Ones to Watch: 2018 Web Design Trends

By Purplebox Digital


Vibrant Colours

2018 is already fast becoming the year for super-excessive colours online. Whilst in the past designers were limited by web-safe colours, today more designers are becoming courageous in their approach to vibrant colour. This includes supersaturation and vibrant shades combined with headers that are no longer just horizontal but reimagined with hard angles and other shapes.

This is partly helped by advances in display panels and devices with wide gamut screens that are more suitable for reproducing richer colours. Vibrant and even clashing colours can be useful for newer brands hoping to instantly attract their visitors’ attention, but it is also perfect for brands who want to set themselves apart from the ‘web-safe’ and the traditional look.

Lead image – Adobe

Hard Angles

hard angles in web design

PHP Storm

Horizontal sections are so last year: Hard angles, combined with other shapes are quickly becoming a popular way to divide sections of your website, in a striking and different way. Out are the traditional blocky and uniform grid-based structures that we’ve become accustomed to, and in are these new angular devices that, break the norm and aid storytelling journeys down the page.

This links in part to:

Asymmetric Layouts

Spotify.com

The ‘responsive design’ trend that revolutionised web design during the 2010s (and is only now becoming incorporated into Google’s latest algorithm) allowed web developers to build sites that fluidly adapt to different screen sizes and devices.

The latest trend come from this is born from a desire to break the mould (as are all trends) and to rebel against what we know to be normal. Spotify were amongst the first to kick off this trend in 2015, and become more and more prevalent ever since.

Particle Backgrounds

An animated header for Heco's home page

helloheco.com/

A great solution to large videos that impact on your website’s loading times are particle backgrounds that utilise lightweight javascript, allowing movement to be created as part of the background itself.

Using a particle background immediately attracts the viewer’s attention, creating a lasting impact that will remain memorable, whilst having little physical impact on the size and speed of your website.

Integrated animations

Integrated animations

packwire.com/

As browser technology becomes more advanced we’re seeing more and more sites moving away from static images and finding new ways to engage users in their communication approach. The particle animations mentioned earlier are generally used as page backgrounds, however, this new fashion for smaller animations is becoming a useful tool to engage visitors with an experience or service.

These animated graphics can entertain the user while the page is loading, or show them an interesting hover state from a link. They can also be integrated with the page scrolling or even the main focus of the site,  such as in the above example by Packwire.

Dynamic Gradients

bold gradients in web design

instagram.com

And no, we don’t mean gradients used to create 3D surfaces or effects such as the skeuomorphic design era (remember when Apple’s iOS created digital surfaces that reflected their real world counterparts – such as Notes)

No, gradients in 2018 are big, bold, bright and powerful. Recently we’ve seen the popularity of using gradient filters over photos or as large gradient backgrounds, which instantly add a bold splash of colour and make your brand instantly recognisable.

Using gradients by using two or more different colors to paint one element while gradually fading between them creates something that feels like a new color. A tone which didn’t exist before, something that looks unique, modern and refreshing. Just check out http://www.gradients.io/ for some instant inspiration

Typography in 2018

Bold typography in web design

ginventory.co/

As ever, typography will continue to be a powerful visual tool in web design because of its power to evoke emotion, convey personality and present the story or information that its telling. Due to the rising popularity in high pixel density screens and devices, we are starting to see an increase in custom fonts.

When it comes to websites, headers are key SEO tools that provide a key hierarchy to the information that leads you down the page in a logical manner. This year we can see see the rising trend in designers taking full advantage of this, with web pages featuring large and impactful headings using creative typefaces to grab the viewer’s attention.

Negative Whitespace

negative white sapce

apple.com/

Using negative space to draw the viewer’s attention to the key item on a page isn’t new. Graphic designers have been using this technique for decades. Although not strictly a new technique in web design either.

We are starting to see a rise in the use of negative space mainstream and enterprise level websites such as Apple and Microsoft. Clean white space, with a key image of your product followed by a strong CTA. Simply let your product to the talking!

Article reference 

Between the bright colors, bold gradients and integrated animations, 2018 is quickly becoming one of the most exciting years for web design. We can’t wait to see how these new trends develop and are already excitedly working on integrating some of the new trends into our latest projects ourselves.

Looking for a cutting edge website for your business? Contact us today to discuss what we can do for your business.

Get in Touch

 

Get In Touch