Web design trends in 2018

María Navarro

Written by María Navarro

With the New Year upon us, in this post we would like to talk about web design trends in 2018. It’s important to understand that when we’re going to develop a new website, o to update the exisiting one, our goal must be to achieve the perfect balance between aesthetic and functionality. Evidently, sometimes this can be rather difficult to accomplish, but when done correctly, in return you will increase user interaction and get better conversion rate.

The goal of web design is to achieve the perfect balance between aesthetic and functionality of the final product.

Mobile-first design

Although it was already a ‘thing’ in 2017, in 2018 it is a must.

A designer’s goals is to find a pretty and dynamic design, which is also capable of harmoniously coexisting with a good performance on mobile.

Mobile-first design has notably become more important over the last few years, and continues to be a growing trend, as somewhere around 60% of all searches are carried out on mobile devices. Moreover, Google has already announced that throughout 2018 it was going to roll out its mobile-first index, which means:

  1. Giving mobile versions of websites much more importance than to desktop ones.
  2. Give better rankings to websites that are better optimised for mobile devices in the search results.

You also need to consider AMP implementation, which enables websites to load really fast on mobile devices. Users are ever more impatient and we want to have everything “right this instant”.

Based on this mobile-first approach, 2018 will be also focussing on cleaner and simpler designs.

Minimalist design

Us users are increasingly becoming more impatient, and for that reason we must strive to achieve that our websites load very fast on mobile devices. One way to reach that goal is by decreasing weight of our graphic elements.

Light and swiftly-loading designs make for much more speedy and optimised pages, something that Google and other search engines are going to thank us for. Faster download speed means Google will give us better rankings, and it also will retain users on our website for a longer period of time, which will improve our conversion rate.

A minimalist design doesn’t have to be sad or boring, the current trend is to use bright colours with contrasts and linear illustrations, creating designs that our users will find attractive.

Unstructured grid

Most currently existing templates for content management systems such as WordPress are designed in grids, working in columns. In early 2017 the CSS grid was being introduced. This type of grid is a much more powerful system, that enables us to work with both columns and rows. In 2018 the trend is to use unstructured grid designs, with blank spaces to make content stand out more, and to make it easier to read and browse, which will help to keep users stay on our website for longer periods of time.

CSS grid designCSS unstructured grid

Expressive typography, bright colours and bold fonts

In 2018 designers will have to let their creativity loose with typography. The latest trend in typography is to use font styles with blank spaces, to play with eye-catching typefaces and bright colours, which will make for an easier read. We should reduce our use of banners, images and large buttons that are too heavy to load, paving the way for typographic expressions. The advantage of basing our design on typography for most part, is that when we scale the font size, it doesn’t affect performance on mobile devices, and save us from loading too many images.

In terms of colour, plain colours are replaced by multicolour gradients, bringing good combination and harmony to the mix.

Creative typographyBold typography

Bold typography with blanks

Gradient typography

Unique images and graphics

As we said previously, use of images and banners is going to decline, but they aren’t going to disappear completely. Instead, they will give way to graphic illustrations or images with a branded character. Less stock photos and more handmade, original and unique designs. Power to creativity!

Linear art is in fashion, so icons will be more linear than ever.

Linear icons

At this point, you will probably say “It’s impossible to have an online store without pictures!”. That is true indeed. Latest product photography trends dictate that we must make unique and striking photos that will differentiate us from our competition. A distinct touch is important, as over 60% of users find product images to be a decisive purchasing factor. We buy with our eyes!

Scroll-based animations

Scroll-based animations and interactive elements increase user’s permanence on our website. A great example of scroll-based animation can be found at https://www.apple.com/mac-pro/.

As described in previous points, we are looking to achieve minimalist and strategic animations, which will increase conversion.

Animated logos

Animated logos are in fashion in 2018. Our minds are better at remembering dynamic and animated images. With an animated logo image we can achieve colour transitions, transmit emotions through images, and they help us to better explain our business to prospective clients. The goal is to immediately transmit positive emotions. Moreover, we may also play with surprising our users with something new, as this isn’t the most common practice.

We must work on our animations to be simple and elegant.

Animated logo trendAnimated logo design

Vector graphics in SVG

JPG and PNG images are left behind, whilst SVG vectors are on the rise. Files with the .svg extension are easy to scale without losing quality. Besides, their size is smaller and if they contain animations, this doesn’t affect download speed, because they don’t require an HTTP request. In 2018, SGV will be the best format for graphic elements.

Progressive Web Apps

Next year will also see the rise of web app and website hybrids, formally known as Progressive Web Apps. This trend will include elements such as Push notifications, animated page transitions, and welcome screens.

Some of the advantages of using Progressive Web Apps are:

  • Faster download speed, even with a poor Internet connection.
  • Shortcut icons on the screen.
  • Ability to send relevant push notifications.
  • Full-screen experience.

As you can see, in 2018 our design efforts will be mostly focussed on improving usability and download speed on mobile devices.

María Navarro
Autor: María Navarro
Search Marketing consultant and web developer at Human Level.

Leave a comment

Your email address will not be published. Required fields are marked *