Is your site lagging behind web design trends? (infographic)

Judge how far your site is from the styles of 2015

Web design trends evolve continually and websites that don’t change with them begin to look stale. The main driver for change is the phenomenal rate of technological advance in the online landscape. The result is that your site may be lagging behind what visitors expect to see.

An old design can lead visitors to perceive your whole company as out-of-step with with the rest of the market and out-of-step with their own life-style. Of course perceptions may have no rational basis, it’s just how the human mind works…

The following infographic highlights the main web design trends that differentiate a modern site from an older design. You can judge for yourself whether your own site has fallen far behind the styles of today.

Mobile focus

Mobile first is the strategy where the design of the desktop site is dictated by what works best on a mobile. This approach presupposes that most of your potential customers have a smartphone and that is how they choose to access your site most of the time – which may not be the case for your niche at this point. Nonetheless there’s a clear trend that mobile use will continue to grow at a rapid pace while desktop browsing is on the decline. A good illustration of this trend is the case of Instagram where the website is merely a scaled up version of the mobile app (and lacks a lot of it’s functionality).

It’s now many years since catering for mobiles through responsive design was offered by websites merely as an extra feature, now it’s an essential part of a site design. How a website looks on a mobile determines whether your site is worth revisiting on any platform.

web-design-trends-1

A good example of this trend: nixon.com

Interactive scrolling

Some of the latest research shows that people do scroll and they love it. Furthermore digital storytelling is about creating a unified experience that a smooth flow enhances. Interactive scrolling can be broken down into two significant web design trends: infinite scrolling and the parallax effect.

You’re probably familiar with infinite scrolling. It’s often referred to as ‘unpaginate’ or ‘endless pages’. In effect it’s pre-fetching content from the next page and adding it to the current page. This creates a seamless browsing experience. The user explores the information with a sense of discovery, so he’s more likely to stay on your site and read the full message.

web-design-trends-2b

A good example of this trend: www.china.exed.hec.edu

Parallax is the apparent displacement of an object as the observer changes his point of view. The parallax effect is employed increasingly in the scrolling feature of a web page. It uses multiple backgrounds which create a sensation of depth by appearing to move at different speeds, resulting in a faux-3D effect.

web-design-trends-2a

A good example of this trend: www.drugtreatment.com

Flat design

Flat design is probably the most identifiable hallmark of modern web design trends. Flat color and simple geometry first appeared a century ago as a reaction to the intricate decoration of the period. In recent times you’ll no doubt remember the minimalist flat silhouettes of Apple’s famous iPod commercials from the early 2000s.

In the early days of the web, designers aimed for ‘true-to-life’ moulded effects. A swing to flatness came about partly as a reaction. But it makes sense too – the web is a complicated place and simple design elements cut through the clutter. The most practical benefit particularly for mobile is the reduction in pagespeed as flat color can be created programmatically rather than relying on images.

True ‘flat’ design has no depth to any element so everything appears to be integrated into one surface. A popular variation is ‘semi-flat’ design. The ‘almost flat’ look often features gradients, semi-transparent panels and drop shadows. This creates a subtle distinction between the element and the background but there’s no attempt at the old realism. On this site you’ll see that I’ve created a combination of flat and semi-flat – I’ve restricted semi-flat to clickable elements so it doesn’t get boring.

web-design-trends 3

A good example of this trend: www.caramelbudgie.com

Single page

A combination of web design trends such as the focus on mobile and the popularity of scrolling has led to a mushrooming of a further trend: single page websites. These aren’t suitable for all sites – the main thing that determines whether a site should be composed of a single page is content strategy. If you’re planning to have only a small amount of content then one page makes sense: the alternative is a site that looks ‘padded out’. A single page also makes sense if you aim to guide the visitor through your content in a linear manner.

web-design-trends 4

A good example of this trend: frii.io

Clean simple layout

A clean simple layout combines the twin goals of achieving a fast loading time and a simple message for the visitor. All unnecessary clutter is removed so the viewer can focus on the essentials.

Layout is the arrangement of the elements of a webpage to make it more readable or more engaging. The key to a good layout is a balance between the elements that require the viewer’s attention and the surrounding ‘whitespace’ or blank areas with no demand on the visitor’s eyes. Modern web design trends combine to create a simple layout that enhances the message. This also ties in with the aim to cut loading times.

A bold use of photography reflects the understanding that the human brain is better at assimilating images rather than text. Thanks to the high speeds afforded by broadband, designers can incorporate large images into their designs for greater impact. This also eradicates the cluttered feel of multiple small elements.

Most online content is still text so typography is always going to be an important part of web design. Typography creates a feeling for the driest message. The main aim of typography is to ensure readability but it can be used to carry forward the brand, such as with the iconic lettering of Coca Cola. It also serves to make content attractive without adding weight to page loading times. In non-professional circles this is perhaps the least visible technique of modern web design trends as typography has always been present somewhere in the media.

web-design-trends 5

A good example of this trend: www.chamainc.com

First impressions count. According to research you only have a few seconds to get the visitor’s attention. So appearing out-of-date is a problem.
No one is suggesting your website should follow all the latest web design trends immediately. There will always be some advance that overtakes even your most recent re-design. The key point is to realise that the need to update your website will always be a recurrent need, much in the same way as many people keep updating their mobile phone to benefit from new features.

Most importantly individual web design trends such as flat design may be unimportant in themselves. What matters is an understanding of why design is evolving in these directions. The clear drivers are a move to simplicity, the need for speed and delivering information in a way that’s most efficient for the customer – how you achieve those goals is up to you.

Donald

You can explore the full infographic by visual.ly on the next page.

Title:
Is your site lagging behind web design trends? (infographic)
Description:
Judge how far your site is lagging behind today's web design trends. The aim is not to follow but to understand why they're going there.
Author:
  • Thanks for the nod and the quote. very nice piece. i like your treatment of mobile design.

    • Hi, Kim, glad you like it, thanks for commenting.

  • Hi, Donald,

    I’m always interested to see how I’m fairing with trends. Some are important to me, while others are not. Just did a major overhaul on my blog, new theme, etc. before the first of the year, so I’m glad I listened to my instincts.

    Yes, I absolutely agree that Mobile should be first in consideration these days. I’m so glad that my theme is mobile responsive and fast loading and font (and links) is big enough to be easily seen on mobile.

    Do you like infinite scrolling when you come upon it? I don’t care for it myself. Never heard of parallax design but perhaps I’ve come across it, not sure. Cool examples provided, thanks.

    My preference would probably be flat design or clean simple layout. What a fun and interesting post, Donald – I had a good time reading about these different trends.

    Talk soon,
    ˜Carol

    • Hi, Carol, I noticed that your site had a big refresh, it’s very effective. I can see they’ve updated lots of areas, I’m impressed!

      I’m glad you mentioned infinite scrolling, I have to say that when I get the option it’s the first thing I turn off. It’s particularly annoying if you want to read something in the footer and you keep getting presented with new content… aagh!

      Enjoy the rest of your weekend :)