10 Website design trends for 2017

New Year always brings a swathe of predictions for the coming year and this year is no exception. We’ve looked at a variety of posts from across the web predicting what will happen for website design trends in 2017.

NB If you’re looking for some trends to avoid, try this article from Inspired Mag.

One: Typography and content

First up, The Next Web’s post Web design trends we can expect to see in 2017 makes some pretty big suggestions about removing clutter such as sidebars, banner ads and focussing on content. Being that content is why people visit your website then why not make that the focus? They are also looking at reducing the amount of navigation, using geometric layouts and different graphic styles, including “imaginative heading styles”. Read the whole article to see what The Next Web predicts.

Two: Lazy loading

We said trends, and next up, in 8 Web Design Predictions For 2017, Tipping Point suggests broadly the same ideas as the Next Web at the start of their list. Storytelling (how users navigate the content of the website), “semi-flat design” adds more depth to the flat imagery suggested by Windows graphics and custom graphics, which follows the theme of reducing or removing the use of stock imagery from websites. You will have seen “Lazy Loading” on sites such as Pinterest, Facebook and Instagram – it means you don’t need to navigate to another page of content when the list reaches a certain number of posts – expect more of that. We’ve seen a lot of websites using parallax design and Tipping Point suggest broader adoption of this. If you don’t know what this is, they call it: “The background of the website moves at a different speed than the rest of the page which gives sites the illusion of depth.” Visit the Tipping Point article for more.

 

Three: Responsive website design

Forbes is a great predictor of trends and they have five predictions in their article, The Five Most Important Website Design Trends That Will Emerge In 2017

They top their list with “responsive website design” as more people view web content via smartphones. Similar focus is brought on “semi-flat design” and uncluttering website layouts. Typography, as with inventive headings is also key and yet again parallax layouts feature.

 

Four: Vivid colours and gradients

Shifting focus slightly, we look at 10 top UI trends for 2017 on the Creative Bloq website whose top of the list trend is for “fullscreen immersive video”. We’ve seen this already with websites such as Paypal, WPEngine and Diesel Island and Creative Bloq talk about how video can work as “…highly versatile in their application, working especially well as background devices accompanied with typography”.

Gradients are featuring a lot in our search and they say: “Vivid colours and gradients are great for injecting energy”. Think also about how users view content on mobile devices and are happier to scroll through content or viewing cards which work across devices, spread across the screen on desktop and stacking on mobile screens in a responsive view.

Five: Micro-interactions in web design

Micro-interactions feature a lot in our searches. But what are they? According to the website microinteractions.com: “Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction.” Pretty much everyone we’ve referred to has mentioned this as a trend in website design. We perform these actions without really thinking about it as they get so much easier.

Six: The downside of parallax experiences

The people at econsultancy are much more to the point when in their article 10 sensible web design trends for 2017 when they refer to fewer menu options, “Bye bye, hamburger”, using duotones, ‘Tactile’ design, meaningful motion, “Bye bye, crappy stock imagery” and a focus on uncluttered UX. econsultancy discuss “…the downsides of parallax experiences, aside from confusing the user, include increased load times and poor SEO (if most of the site is graphics)”

Seven: Colorful shape gradients

As a source of “ready made” or “ready to use” website themes and code snippets, Envato, Code Canyon and Theme Forest are invaluable in jumpstarting website projects. In 6 Web Design Style Predictions for 2017,
their emphasis is much more about the display layer of the website and so we see more reference to the style of design we could expect. Think about more use of shadows (ie not flat design), shape gradients and again the use of illustrations and micro-interactions.

Eight: Draw attention with GIFs

There are various mentions of using GIFs in websites. Facebook is full of animated gifs which were very popular in the 90s and then disappeared except in banner advertising. Design Shack has a great article called Design Trend: Photos That Come Alive and discusses methods, techniques and examples of “cinemagraphs” where “…the grass might move in the wind or a landscape. A person might blink when showcased in and oversized headshot. A product might tilt or turn or complete the action it is designed for.” The emphasis here is subtle. They also refer to www.monochrome.paris whose use of eye-catching design is engaging to the user without being over the top.
 

Nine: Semi-flat design

Specky Boy discussed the change in graphic design for the web in an article earlier in 2016 called The Rise of the Almost-Flat Design Web Trend As mentioned elsewhere, the “Flat 2.0” style loses some of the simplicity and crispness by including shading, dynamic colours (“…energizing colors contrasted with one another keep a page of few elements from appearing dull.”), simple typography, “ghost buttons” which “…draw too much attention to itself, but is still recognizable as a button”, minimalism, iconography and accent colours ie using standard colour palettes. Read the whole article and see for yourself.

Ten: Breaking out of the grid

We’ve been working to 12 column grid layouts for a long time now, whether it’s the 960 Grid system or through Bootstrap. So what’s all this about “abstraction”? Web Designer Wall’s article, Design Trends in 2016 discusses CSS grid and how “…web design is more flexible now than ever before, and designers this year took a cue from print design to experiment with boundaries”. There’s a lot to read about this, so where better to start than at CSS Tricks and their article A Complete Guide to Grid

Conclusion – the top ten of top ten website design trends

If you can’t be bothered to read all the articles we’ve listed, then here’s a brief roundup of the predictions for website design in 2017:

  • Content and typography
  • Lazy loading
  • Responsive layouts
  • Vivid colours and gradients
  • Micro-interactions
  • Parallax adoption / stop using parallax layouts
  • Less flat graphics / semi-flat design
  • Greater use of custom graphics and illustrations
  • Breaking out of grid layouts

And if that hasn’t whet your appetite enough then why not come and have a chat with us about how we can make your website look and work better in 2017? Or leave a comment.

Happy New Year!

 

 

  • Anna Howell

    I am quite new to internet. but what you write in this post is really great and very informative. I think it will help me in the later. Thanks for the great job
    Web Development Brisbane – WebNado