{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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.

Ben Davis

Published 13 December, 2016 by Ben Davis @ Econsultancy

Ben Davis is Deputy Editor at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

1004 more posts from this author

Comments (9)

Comment
No-profile-pic
Save or Cancel
Jeff Moyer

Jeff Moyer, Web Designer & SEO Professional at Advance Web Solutions

Good information I agree about Parallax scrolling it was a cool trend but not practical for load time or user friendliness. I jumped on the bandwagon with my website and wish I hadn't...

4 months ago

Nigel Garner

Nigel Garner, Digital Strategy & Optimisation - Mobile/Web/eCare/Social Media/UCD/UX at Sales Optimisation Ltd

Good post, but I tend to disagree with the minimalisation of nav headings (as per Ikea). Users want to know that what they click is going to be useful and relevant to their search. Hiding sections like "Bedroom", "Storage" or "Rugs & Carpets" under unspecific and often generic headings like "Rooms" or "Products" gives users little or no idea what to expect.

The same is also true for Apps and responsive websites. I agree the hamburger is often not recognised or spotted but to give no navigation is even worse.

4 months ago

Greg Randall

Greg Randall, Director at Econsultancy Guest Access TRAININGSmall Business Multi-user

Hi Ben,

Great article and a good summary. I am in full agreement with Nigel Garner's comments (above). I think Ikea has taken a step backwards in their navigation treatment. I agree with simplifying visuals to assist with decision making but to hide categories in the main navigation does not help consumers who try to understand the range of Ikea and to gain a visual frame of reference once they are deeper in the site.

People will argue the content in the body of the page (in the screenshot above) provides the context necessary, but once a consumer clicks through to their next step in their journey this content disappears.

I recognise Ikea as the challenge of what to present in the main navigation due to their broad range, but more could be done.

One example of what could be done is, through Ikea's data they could determine consumers are more prone to shop by products initially, so present a main navigation summarising the product hierarchy but also introduce, in the main navigation, a link titled "Shop by Room" which would take consumers to a beautiful landing page presenting the various options.

Thanks again. Great article.

Greg

4 months ago

Avatar-blank-50x50

San R, Designer at LogoWhistle

Hey Davis,

It's a good read. I am a designer and entrepreneur myself. I am following the UI/Web design trends for more than 12 years now.

After the mobile era started, the UIs has lots trends changes. Interesting to follow up them.

I agree that, minimalism and of course micro interactions are going to play a big role in the next few years.

I have a good read here too, http://colorwhistle.com/graphic-design-trends-in-2017/

Keep posting!

Thanks,
San

3 months ago

Avatar-blank-50x50

Grahame Beresford, Art Director at Lighthouse Software, Inc

Good article. I especially appreciate #7. I've spent far too many hours sifting through contrived, forced, "clever," and wholly underwhelming stock photography looking for the few images I actually ever need. It's great that the stock photo market invites photographers from around the world, but often times I can tell which ones are made by a real professional and which ones are from some amateur in Moskow.

However if you want some stock photography that is truly beautiful, check out Unsplash.com. I recently discovered it and have used a few of their photos in various projects. It's a totally free site (no subscription needed), and I'm shocked at how great these pics are. It's like someone said, "Stock photography sucks, and we ought to change that." Definitely worth a look, fellow designers.

3 months ago

Avatar-blank-50x50

Grahame Beresford, Art Director at Lighthouse Software, Inc

*Moscow

3 months ago

Avatar-blank-50x50

Grahame Beresford, Art Director at Lighthouse Software, Inc

I don't know that I agree about the hamburger icon, however. The assertion is made her that "users often do not recognize the symbol," but I don't really see how that can be. It's everywhere. Practically every mobile website uses it, and a great many apps as well. If you don't recognize the hamburger icon and what it represents, then you're probably not much of an app user to begin with.

But I'm willing to be proven wrong.

3 months ago

Greg Randall

Greg Randall, Director at Econsultancy Guest Access TRAININGSmall Business Multi-user

@ Grahame, I understand your point Re the hamburger icon, the primary issue with this symbol is the absence of standard placement and there is no standardisation around its treatment.

It's found both on the right and left side of mobile sites and can activate product navigation systems and/or customer service content.

Instead of applying this icon, sites (and APPs) are better off introducing intuitive titles and icons to introduce content and functions to better set consumer expectation as to what is coming.

3 months ago

Avatar-blank-50x50

Linards Lazdins, CEO at CreateIT

Great article Ben!

I am big a fan of simplicity in web design. With addition of free space, great content, good typography and clean design you can gain a lot better UX and increase the CTR rate. As I can understand, on the new IKEA version, the main focus is to let users search for the things they want to find. If a website has good search engine, it is logical to take out redundant navigation items to earn more space.

I also believe that PWA concept is the next big thing in web. Web is becoming more and more mobile-oriented each day. Let’s hope that Apple and MS will introduce full service workers support on their browser platforms very soon. This has a HUGE potential in making mobile web-based apps.

Linards from CreateIT
https://createit.lv

2 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.