Web design focuses a lot on visual appeal and designers rely on CSS to achieve this effect. CSS is a style sheet language that is used to determine the layout of a document like a webpage, written in a markup language.

In practice, your CSS “tells” your HTML file how elements should be displayed on a web page and how they should behave. It saves a lot of work since you can use it to change the layout of several web pages at once.

As a front end developer, the type of CSS technique you use can have a significant impact on how your web product, like a web application for example, is perceived by users.

In this post, we are going to discuss CSS techniques that can be vital to your web design.

1. Animated Forms

The human eye is attracted to motion. In web design, the more natural and fluid motion is, the more pleasant the user experience. To accomplish this effect, web designers have been putting a lot of emphasis on the how different elements transition on web pages.

Transitions in lead capture pages like web forms are a good example. Everything from the color to the structure of webforms can have an effect on leads. And lately, designers have started enriching the whole experience (filling the form) itself by using subtle animations:

• Animated form input fields: Sometimes, even something like an animated check mark can seem pleasant. Consider this form with animated checkbox inputs made with CSS transition effects.
• Animated action buttons: Animating action buttons in your web form can also enhance the user experience. As an example, consider this technique. Every action in the user journey, from the email entry to pressing the send button, is accompanied by an associated animation which enhances the experience.

2. Parallax Scrolling

If you have ever played Super Mario brothers, you probably noticed how the hills in the background moved at a slightly different speed compared to all the other characters in the foreground. It gave the gameplay a lot more depth than games with static backgrounds.

And now it has become a hot trend in web design as well.

The design trend, known as parallax scrolling, is where a web page’s background moves at a slower speed than the foreground.

When used on a website, a parallax scrolling effect gives users a sense of action and depth to:

• Tell a story: Parallax gives visitors a sense of 3 dimensionality. Some designers use this to tell their story without relying on heavy graphical element. The website Jess and Russ, for example, uses the technique to tell a beautiful story.
• Highlight services and products: In addition to enhancing user experience, web designers are also using parallax scrolling to put more focus on their offerings. Consider the Myriad website, which uses a clever parallax effect to showcase several possibilities regarding furnishings. As you scroll through, the page pulls in interesting furniture arrangements.

3. Scalable Vector Graphics (SVG)

To create animation in web design, designers often turn to using CSS in HTML. However, not every pattern and shape can be created with these alone. This is why SVG (Scalable Vector Graphics)are a huge part of web design today.

Supported by all modern browsers, SVG is an XML based file format that allows developers and designers to create dynamic graphics which are perfect for high resolution displays required for computers and mobile devices. Additionally:

• They don’t have pixel based limitations of PNG or JPEG images
• They are interactive
• They are scalable
• They can be controlled by CSS

To illustrate consider Fleximize Squad. The financial lender’s website is based entirely on SVG animations and it combines this with storytelling to give users a more dynamic experience.

4. Vertical Navigation

Not a lot of website used vertical sliding navigation, but the trend has recently picked up steam again. The trend is a refreshing twist from traditional web design, like horizontal navigation menus. Plus:

• It doesn’t confuse visitors on where to click as is often the case when unconventional navigation is used
• It doesn’t distract visitors from the main content of the page
• It gives designers the freedom to add more links if they need to

To illustrate, consider the Arbor Restaurant website. The fixed vertical navigation bar is placed on the left, which is pretty good considering that our eyes usually gravitate in this direction when we view a web page. And since the navigation bar is fixed which keeps it visible and accessible anytime while scrolling.

5. Typography

Considering that the average attention span of the typical web user is less than a few seconds, it isn’t surprising why designers are focusing more on typography in as they are today. Sure, you might argue that images can also have the same effect in drawing user attention; but, keep in mind, as soon as visitors land on your page they expect a good experience.

They want to know what’s in it for them. And your choice of typographic elements might just make them stick around to read the rest of what you have to say on your webpage.

On that note, here are a few techniques you can use to improve your typography:

• Large Type: They say that bigger is better, and bigger is definitely what some designers seem to be going with concerning typographical elements. Consider Beat Cycling’s website. The supersized text at the end “Be Part of the Beat Cycling Club” really draws the eye and encourages you to read further.
• 3D Text Effects: Special effects can give typographic elements an edge and thanks to CSS3 transforms, designers can now manipulate any page or text element easily. To illustrate, consider this 3D CSS typography by Noah Blon. For a split second, it makes you stop short and stare at it in admiration. It’s subtle, yet effective.

6. A Myriad of Colors

No one color palette reigns supreme this year in CSS. Web designers have unleashed their creativity by experimenting with different hues, combinations and contrasts. Here are some of the more popular techniques that we saw:

• Neutral Color Palettes: Some web designs are seen sporting natural colors on their webpages. The use of mild color palettes is a great choice for designers who want to keep layouts minimalistic and keeping themes consistent. Neutral colors (like light brown, green or blue hues) also come in handy when you have a product to promote and want it to be the focus. For example, consider the colors used in the Paul Valentine website. The mild pink color hues keeps our focus on the company’s collection of quality watches.
• Dark Backgrounds: Mild hues keep UI’s minimalistic and user experience consistent. However, we are also seeing a return of darker backgrounds. Using incredibly dark backgrounds (like black) might seem counterproductive but some designers have made it work by using other elements (like content) alongside. Consider the dark background here. The white text is clearly visible on the black background which draws focus on the food.
• Extreme Color Contrasts: Contrasting colors that work well together can do wonders for a web page. But what about colors that are too far from each other in the contrast spectrum or would generally look horrible together? This doesn’t seem to be much of a concern this year as some designers exhibited such themes in their designs. For example, a purple and green color combination would look off but it works well for this page by Intesys S.r.l.
• Colorful but not clashing: To keep interfaces clean and uncluttered, web designers usually stick to two or three colors. But this year, we have seen some designers breaking this tradition. Consider this website by Yoke. To keep it less overwhelming, the color don’t clash too much and are also a bit muted which gives a pleasing effect.
• Color Gradients: Once considered a bad practice when flat design reigned, color graduations are making a comeback this year. The change is more obvious since designers are now keeping color gradients in brighter (changing between two bright colors) hues. The Spotify website was one of the first to show off this duotone effect last year. MailChimp picked it up this year.
• Vintage hues: Faded or dull hues like grey are tricky to work with. How do you use them in a layout without making them look old and dated? You get creative and smart in your color selection. To illustrate, check out the palette on Cafe Frida’s page. It uses warm colors like greens, browns, dull gold and off white to give off a charming effect.

7. Wacky Interfaces

So far, we saw web designers use creative ways to make web interfaces more interesting from hover animations to SVGs and vertical scrolling navigation. But all of these represent specific parts of user interfaces and specific user experiences.

Recently, some designers have introduced ways that make whole webpages experiences themselves. As an example, consider this website showcasing designer Nick Jones’s portfolio. Unlike a typical scrolling view, the interface flips, rotates and zooms as you navigate through it.

8. Split Viewports

Cross screen compatibility is fast becoming a priority in web design. And some designers are experimenting with different layouts and viewing experiences to this effect. Split viewing ports are an example.

A viewport is an area of a web page that is visible to visitors. It’s size varies with the device. To make viewing experiences consistent across all devices, designers are getting creative in tinkering with interfaces.

For example, consider the viewport in UX designer Melania David’s personal website. The layout is split in half with the content on the right and section titles on the left. The best part is when you scroll right to the end and a chopped version of the illustration (hand) comes together in time to the scroll.

9. Hover Animation

Animations that clue users into the actions that can take on an interface is a great way for designers to improve navigation on their web pages. Animated effects like spin, bump or color or text changes make users focus on the next action they can take and also makes the experience smoother and more fluid.

To illustrate, consider the Humaan website. The logo at the top left animates (changes) to the home button as you hover the cursor over it.

Conclusion

Technology is in a constant state of flux. And as web design practices change, so does user demand. If you want your web layout to be impressive enough for visitors today, the CSS techniques mentioned above can give you a pretty good head start.