As we approach the end of the first half of the year 2018, the time has come to sum up the biggest web design trends that followed it so far. The year was marked with disruptive technology changes that heavily influenced the design community, yet the design switch to user-centric, mobile first hasn’t been losing its momentum. As is it is every year, we are seeing some trends making a comeback and some finally stabilizing and becoming mainstream.  Let’s dive in and cover some of the biggest web design trends for 2018.

Mobile-First Mantra Gets Louder

Mobile usage has greatly surpassed desktop usage. And as it is with any trend, it took some time to mature, to standardize in terms of frameworks and technology stacks. Over the years we’ve seen designers experimenting with responsive designs working top-down funnels to recreate desktop into mobile experiences. Some even took it to the next level and tried to recreate the same experience across all devices which resulted in hurting their content architecture that left gaps in their users’ journey.

The field has been set and the design has been shifted to mobile. Users shop, search and interact via mobile and their interactions are based on different intuitive approach. Mobile first interactions focus mainly on speed and clarity so on a narrow canvas that can be both landscape and portrait oriented, you have to make the most of it. In terms of design, this means ditching large photos and turning to icons and vector animations which is awesome for precision user interaction tracking and specific problem identification.

Also, read:

Illustrations are Becoming More Popular

Source: Nasa: Prospect

Image selection is probably the biggest challenge in the design process. A great selection of images can sometimes represent the core of the whole design layout and it is because of that, it has huge limitations.

In product development and marketing, people usually take on two types of imagery for design representation:

  1. product UI images and/or GIFs;
  2. photos and editorial images.

GIFs can present the process of problem-solving and illustrate the steps of a certain process or showcase UI functionalities needed to achieve an action. But the images that represent consumers hit a more human note – they often offer emotion and describe how to fit it in the users’ everyday online lives.

The key is in hitting the emotion while describing the solution and process the user has to complete in order to solve a specific problem. But using editorial photos alongside UI screenshots results in a design mess and writes out an experience curve filled with gaps. This is where illustrations come into place. They allow you to touch on specific emotion without personifying your design with images of people your users can relate to.

Floating Navigation Menus

As users, we usually see the navigation bar as part of a webpage. Why should we?

Websites that hugely focus on conversion via menu CTAs or have huge informational architecture are marked with fixed navigation that sticks with the user as they scroll down.

Source: Dribbble

By detaching the navbar and moving it a bit down, you bring out a feeling that a navbar is a global object, that it will follow you no matter which page you are on and yet it doesn’t necessarily have to be a part of it.

The Video HTML tag

Videos are a great way of conveying messages. Still, imagery cannot present the interactivity of a product or a UI because of its static nature. Video has become the single most powerful form of marketing content and that’s exactly why brands are investing in video content production to be used across all marketing channels.

The beauty of a <video> tag is that you don’t have to rely on <iframe> and embeds from video sharing networks such are YouTube, Vimeo etc. and end up with their player style that can harm your design. Instead, you can design your own style around the HTML tag.

Dynamic Gradients

Source: Grabient

Gradients have been making a huge comeback. Last time we saw them, they were in a form of subtle shades in icon design. Now, they are commonly used as filters over photos with and in combination with shading, they are becoming a great way to make an image more intriguing to the users.

Most used colour combinations we see today used for filter gradients are purple-red, purple orange and purple-blue variants.

Asymmetry and Broken Grid Layouts

Grid layouts have always been a great way to break down the design frame in which developers could work with and users can find their way. However, its beauty of structural organization has also been a curse as it gave a limitation to the design freedom and led to the point that all websites somewhat looked the same.

Source: Grafik

Broken grid layouts are unique and somewhat experimental and new frameworks such as flexbox are what gave them a push in the design community. As a trend, they are growing strong in 2018 and we’ll see it more in time to come.

Bigger and Bolder Fonts

Source: Typewolf

As devices are getting better in display resolution and browsers expanding their support for CSS classes, we are seeing an increase in custom typeface usage. Designers are getting bolder in designing larger fonts in contrast to serif and sans serif combinations to bring out a more visual and emotional impact on their users. Not to mention that they make it easy for designers to create a contrast between the background and various text elements.

Typography is and has always been one of the most powerful visual tools for conveying messages and improving the overall user experience.

Expect the Unexpected

The year 2018 has so far been most fun when it comes to design trends. As the mobile first design is maturing, we are seeing some huge leaps and disrupts in design trends and it’s always a shame that we have to constrain ourselves in a year timelapse to list them all. Besides AR and VR who’s impact was quite limited despite all the commotion, did we miss any trends you find important?