10 Web design trends for 2017

By now responsive design has become mainstream, and come 2017 we have to use that as a template and build beautiful things on top of it.

When looking at web design trends for the next year, and regardless of which you adopt, three distinct elements stand out. These are: a clean look that allows your messages to stand out; seamless blending of content and creating an impression of quality and trust. 

Of course, it still has to load really fast, too and keep in mind that visuals are replacing text across design innovations like never seen before.


Design trends to look out for

There are many factors to consider when designing or re-designing an e-commerce website, but we'll list the most important ones here.

1. Parallax scrolling, where background images move slower than foreground images, create an illusion of depth in a 2D or 3D scene, making the foreground pop. This became popular in 2016 and we predict it will remain on the design radar next year.

Campo Santo Firewatch does this perfectly.

Parallax scrolling

2. Flat design (design devoid of multidimensional stylistic elements) was popular after Windows launched Metro UI style and Google's Material design, but it has become outdated due to its lack of signifiers on clickable elements.

It has given rise to almost-flat, semi-flat or rich design that incorporates drop shadows, bevels, highlights, reflections and gradients to, among others, icons, illustrations and menus to create depth and dimension and make navigation more tactile and usable to users. 

Here are some semi-flat icons to give you an idea.

Flat design

3. Storytelling such as Peugeot's Graphic Novel Hybrid4, combine visuals with text to guide the user through the website's key content, highlighting products, history of the organisation, journey to purchase, etc.

It functions via automated video or as the user clicks, scrolls or swipes. 

Storytelling

4. Innovative navigation and less scrolling. Sites like Hellouppercase have even done away with scrolling altogether. 

Though not new, expect to keep seeing scrolling foreground against a static background, alowing designers to include lots of content without making the page too long.

Sticky navigation - where the navigation and menus are stagnant while the content moves, also helps with a lot of the orientation issues of long scrolling.

Innovative navigation

5. Moving visuals, including videos and live streaming, is more dynamic than ever and with the addition of sound it holds users' attention better and for longer. Background 3D graphics and HD quality videos are used to build an impression of a real life experience.

Cinemagraphs like this one below (from Wix.com) are images that incorporate subtle areas of animation and add an element of fun and surprise for the user. They normally come in the shape of elegant gifs and are less expensive to create than videos. 

Moving visuals

6. Bespoke illustrations such as the doodles Dropbox is already using - or as can be seen here by Brancott Estate Wines - are quite the rage.

Chalk on blackboard, sketchy lines, brushstrokes and whimsical hand drawn illustrations, although nothing new, are expected to go mainstream and can give a brand a distinct personality that can be difficult to achieve with stock imagery.

Bespoke illustrations 

7. Tile design is favoured by serious designers who have moved on from card design. By adding hover effects, flipping the cards or expanding, they provide more information without the user having to go to another page. 

Laid out in a grid, tiles allow designers to organise graphic elements more fluidly. Here music artist Jay Z uses interactive tiles to great effect on lifeandtimes.com

Tile design

8. Bold typograpy such as used here on the Chess Hotel website are used to define a brand name. It's also often combined with more traditional web fonts such as serif, or handwritten fonts.

Bold, confident fonts also work well with other trendy elements used in web design to create something memorable and to convey a unique corporate identity.

Bold typograpy

9. Original photography such as Sevenhills Wholefoods pictured here has used will appeal to a visuals-obsessed world.

The brand implemented horizontal scrolling to take the user on a visual journey through the seven hills that represent their brand. Like unique content, unique imagery will make all the difference in first impressions. 

Original photography

10. Bold colours. Gone are the days of web-safe colours as brands go for over-saturated vibrant hues spurred on by technological advancements in monitors and screen devices that can reproduce richer colours more easily.

Spotify has adopted this trend as can be seen in Spotify Hong Kong. 

Bold colours

These are just some of the more solid web design trends we've seen and that are on the increase across the web.

Striking a balance between what looks and works well on mobile, but still conveys a distinctive, unique style for the brand, remain the challenges for web designers in 2017. 

Main image credit: Screenshot of Dribble.com homepage.

Image of The Dude

Do you want to know more?