Why have I used the adjective ‘sensible’ in my headline, instead of something more click-worthy like ‘crucial’?

The answer is that web design trends in 2017 should be all about meeting the user’s needs.

Gone is the temptation to show off what the browser can do, in its place is a passion for proper design; form follows function.

Ignore all the web design trends pieces that tip their hats to virtual reality or to eye-catching animation; 2017 is about utilitarianism.

Here are the 10 trends I think will be most noticeable, and for more on this topic check out these resources:

1. Fewer menu options

2016 saw many websites redesigned with reduced primary navigation options. This will likely become a big trend in 2017.

Header menus that previously presented 5-7 options may reduce this to 3-4.

The reason is one of mitigating choice paralysis, something summed up in a recent Econsultancy article by Michael Sandstrom. Fewer choices guide the user more easily to what they are looking for.

Ikea is a great example. Compare its recent redesign with the old one, below.

Ikea’s ‘old’ website

ikea old website

Ikea’s 2016 redesign

ikea website

2. Bye bye, hamburger

Whilst we’re on menus, let’s wave goodbye to the hamburger. Yes, it neatly tucks away all your menu gubbins, but users often do not recognise the symbol.

More importantly perhaps, hamburger menus disguise the depth and breadth of your website or app. Users are left with no orientation; out of sight, out of mind.

Spotify has got rid of the hamburger menu on its app, a clear sign of things to come.

Spotify has been visited by the Hamburglar

hamburger gone

3. Duotones

Do a Google Image search for ‘duotone examples’ and you’ll recognise the technique and plenty of the examples.

Below, I’ve included a screenshot of Capital One Labs, which uses the effect to perk up its homepage.

Duotones are used to find a balance between a minimal and a busy or distracting website. Imagery can be included this way, without pulling the eye away from key messaging or navigation, or indeed obscuring them.

Expect to see more duotone imagery taking the place of higher resolution hero backgrounds, or used to bring consistency when several images are displayed.

capital one labs

4. ‘Tactile’ design

Google has further defined its Material Design approach this year (it calls the Material Design guidelines a ‘living document’), and 2017 may see many web designers following Google’s lead.

In short, Material Design has many of the traits of flat design (bold, graphic, with plenty of colour) but uses material as a metaphor; therefore it includes tactile attributes such as surfaces and edges, as well as rationalized space.

The aim is to conceive a ‘unified experience across platforms and device sizes’. It’s all about UX.

Head over to the Material Design pages to read more of Google’s rationale behind the project, or go to materialup to see lots of examples of websites and apps using Material Design.

material design

5. Bye bye, parallax scrolling

Parallax scrolling is the epitome of design trends that aim to impress rather than serve.

These experiences make use of background and foregrounds that scroll at different speeds, which appears to add depth to the page.

You can see a relatively subtle use of the effect on Firewatchgame.com, which uses parallax in the hero image at the top of the page.

For a more involved example, see AlfredService.com. Many of these sites use ’scrolljacking’, a feature that particularly annoys/confuses some users (where the scroll of your mouse does not correspond accurately with the movement of the page).

The downsides of parallax experiences, aside from confusing the user, include increased load times and poor SEO (if most of the site is graphics).

In 2016, I argued that animation may be a way to stand out amongst the crowd of increasingly standardised websites, but this year’s focus on performance has shown parallax scrolling is too intrusive.

firewatchgame

6. Meaningful motion

One of the principles of Material Design is ‘motion provides meaning’. Though I think we’ll see the back of animation for animation’s sake (parallax), there is a case for the improvement of motion in web pages and apps.

Google puts it well, saying that motion should be ‘meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.’

Have a browse through Android’s website and you’ll see some examples:

  • The way that text flexes as it swings in on the main carousel.
  • The way the carousel indicates you have gone full circle.
  • The way images slide in as you select a dynamic menu option (OS devices).

Though it was released back in 2015, Tumblr’s app is another good example, winning a Material Design award for animation last year.

7. Bye bye, crappy stock imagery

We are now at the point where the availability of high quality imagery, alongside the user-centric mantra of companies undergoing digital transformation, leaves no place for crappy, unrepresentative and unimaginative stock imagery.

Company websites should be inviting and should reflect the values of the business. That is not possible with image such as…

stock image

8. Fewer apps, more PWAs? 

App-inspired web design got quite a bit of attention in 2016, with the development of several high profile progressive web apps (PWAs).

PWAs take advantage of HTML5 browser technology and advances in JavaScript to cache an ‘app shell’ on first visit, and allow offline functionality as well as push notifications and a home screen icon.

There are many advantages of PWAs over lengthier app development, and we may see more follow in the footsteps of The Washington Post, Airberlin and Flipkart.

pwa 

9. Google Fonts

The open source library of fonts was created by Google in 2010.

In 2016, as Google continued to work on Material Design, it also revamped the Google Fonts service.

Previewing fonts is quicker and easier, including the ability to preview fonts on a whole swatch of background colours. It’s also easier to configure fonts, and Google highlights Featured Fonts that it feels are well suited to Material Design.

Interestingly, Google has also developed a free font called Noto, designed to bring a cohesive visual language to 800 different languages (read the full story via Wired), so that there will be a continuity when changing language settings or juxtaposing scripts.

Expect more designers to investigate Google Fonts in 2017.

google fonts

10. Minimalism

This trend encapsulates many of the others on this list. Minimalism means an emphasis on performance (speed) and uncluttered UX.

To some extent, the trend was started by the move to responsive websites, which not only need to be clear on a mobile screen, but have also encouraged scrolling, meaning users don’t expect all content to be jammed above the fold.

Typograhy, contrast and space are all important.

So, those are the 10 web design trends to look out for in 2017. Let us know if you disagree.