4 web design trends of 2018 and the award-winning websites already using them

As the end of the year draws closer distinct trends are emerging and are set to grow in popularity over the coming year.

For web development this year, as predicted, we have seen the rise of 3D, VR & AI and the is a trend that looks to be growing strong. For front-end web design several trends seem to be emerging that leading designers agree are set to grow in popularity.

In this article are 4 of those trends some details on how to identify site using and make use of these trends and an inspiring world-class example to motivate your creativity in 2018.

Interactive Animation and video

It is not exactly a new trend but it is evident that animation and video are becoming more sophisticated elements of web design than ever before. Subtle details and playful interactivity that is designed to encourage the visitor to stay longer are signs of the coming of age of animation and video in web design.

How will trend following websites use animation and video in 2018:

  • Custom animation unique to the message of the design
  • 3D elements that move as the user interacts with the page
  • Video as background
  • Continued use of parallax
  • 3D video effects
  • Mouse over effects

Example 1 – Canva

Canva is a delightful example of animation mouse over effect in action. All The fun of mouseover effect of the early days of the web circa 2002 feels like it has been reborn and modernized for the rich user expectations in 2018. It’s a pretty nifty image editor too.

Example 2 – The Hunt for the Cheshire Cat

Another good example of animation is the rich experience of The Hunt for the Cheshire Cat that takes the user on an imaginative journey where getting lost in the website is actually encouraged and an intentional part of the experience.

Clean decorative details

I am really happy to see a revival of detail in web design. It feels like the soul has been put back into the craft. I think the rush to be mobile friendly and flat really helped push the mobile platform to a place where it could make the web accessible on a much larger scale. Now is the time to get creative.

How will trend following websites use decorative details in 2018:

  • Embellishments of geometric shapes and icons.
  • Details that bring focus to one part of a design for user experience purposes
  • Less distracting details in the used for decorative purposes
  • I think The State of European Tech is a fine example of decorative an clean details

Example – The State of European Tech 2017

The State of European Tech showcases a design with decorative embellishments. the background details either serve to add to the users understanding of a challenging navigation system or add to the few of the theme of the design.

Breaking out of the grid

This is one trend that should be used with caution. It is fun to experiments but easy to go too far. however, if the target market of your website is open to it you could try to be like some of the trendiest websites around by breaking out of the grid and adding original unexpected layouts and details to your website that really makes it different from your competitors.

How will trend following websites break away from the grid in 2018:

  • Asymmetrical layouts
  • Unexpected details
  • Page layouts that break the mold, creative hamburger menus and floating social bars are good examples.
  • Media of various kinds occupying the same area
  • unusual, but still usable, page layouts and arrangements

Example – Gourmet House

A brochure site with a simple amount of content and plenty of strong images like gourmethouse.com can work really well by breaking out of the grid. Gourmet House provides a rich experience with a luxurious feel where the user never quite knows what to find next but can still easily find their way around the simple navigation system.
Still, when the user likes to feel more secure, like when buying online, the experience of the brochure section of the website is used more moderately and becomes more grid-like.

Typography

In 2018 the rules of Typography are changing, designers are no longer content to play it safe when so many are opting to stand out from the crowd with bold typography.

How will trend following websites use typography in 2018:

  • Rule breaking, experiment with spacing, sizing, and weight.
  • Mixing it up with Serif and Sans-serif font families

Example – 10×17

Still paying attention to legibility where it matters, Readability of content matters so leave the experimentation to adding details to smaller sections of text like headings.

The website I have chosen with admirable typography is 10×17 where Twenty-six artists visually interpret and countdown their favourite albums of 2017. I really like the bold and unexpected font choices and how typography is incorporated is incorporated into the theme of the design.