2016 was the year of user experience (UX) and responsive design.

Designers recognised that aesthetics don’t matter if a site doesn’t function how a user wants. Responsive design became more commonplace and increasingly expected by users. When we access a website on our phone or tablet we no longer expect to see a shrunken, difficult to navigate version of the desktop site. We want a website that can adapt to each device and how we use that device. A phone user would much rather scroll than click.

It would be wrong to see this expectation as just another fad. Aesthetic components within the general design may come and go, but responsive design is here for the long haul.

Without further ado, here’s our round-up of 2016’s hottest website design trends.

Hero Images

A hero image is simply a large header image placed very prominently on a website page, often taking up the entire space ‘above the fold’ on a desktop screen. The image should be high quality and positively identify your brand. Some designers have taken the trend a step further and replaced large static images with animation or even video. Such designs are increasingly popular as user bandwidth restrictions become a less pressing concern. Hero images catch the user’s attention and so it makes sense to capitalise on this with calls-to-action. Ideally, the hero image should clearly tie in with the call-to-action. For example, an e-commerce website may feature its primary product in the image, with the accompanying call-to-action asking the user to ‘Browse’, ‘Shop’ or ‘Buy’. Another popular option has been to overlay a search bar over the image.

Typography

With minimalism still very much in vogue for overall website design, bold typography has been a major trend of 2016. Simple backgrounds and lots of whitespace have allowed brands to communicate their brand personality through their choice of font. As well as complex fonts, designers have been experimenting with extremes of size. It is not unusual now to see a handful of words dominating a website homepage. Variations in font size implicitly indicate a hierarchy and give the user direction on how to process across or down the page. More traditional fonts are still being deployed but in new and innovative ways. 2016 has generally seen a tendency towards large high quality images that often fill a screen. Simple fonts can be placed over these images, cutting them away to create a negative space.

Long Scrolling

Endless scrolling was derided in the past for being disorientating and difficult to navigate. However, the rising popularity of smartphones propelled long scrolling back to the forefront of web design this year. Small screens mean that information is mainly read in vertical lists. It is useful for that information to load automatically. Constantly having to click to load another page negatively impacts upon a mobile user’s experience and suggests that you haven’t considered their needs and habits. Endless scrolling was popularised by social media sites such as Twitter, Tumblr and Facebook. These sites need to display large amounts of information that is continuously being updated, in a logical manner. Various design tricks have been used to break up the monotony of endless scrolling. Designers have grouped information together through colour blocking or used animations to transition between sections. These techniques are more subtle than parallax scrolling but allow for differentiation of information.

Hamburger Menu

The ubiquitous hamburger menu has been a divisive one. The three horizontal lines are a simple way of clearing up a cluttered navigation, a pressing problem given the rise of small screen devices. However, the graphic isn’t self-explanatory and relies on the user recognising it as a something that needs clicking. Such a drawback has raised questions about UX. Furthermore, by hiding away a site’s navigation, the user doesn’t get to immediately see the full extent and breadth of a website. They don’t instantly know what they’ve landed on.

Card Layout

2016 has seen a move towards easily digestible information and this is nowhere more evident than in the current fashion for card layouts. This aesthetically pleasing design trend breaks content down into individual points. The simple underlying rule is that one point should be made per card. The cards should also be clearly differentiated from each other. Colour blocking is the easiest way of achieving this. Card layouts are particularly popular amongst designers working on responsive designs as cards can easily shift according to screen size. Individual cards are also handy for a user who wants to share content.

Duotones

With all of this emphasis on image and pleasing aesthetics, it is not surprising that duotones has become a widespread favourite, spearheaded by Spotify. Duotone is simply the act of breaking an image down into two colours, a method which has its origins in the print industry. The colours used need to be contrasting so that the image remains clear and detailed. Duotone images have been particularly popular amongst minimalist websites which want to have a strong visual impact whilst remaining un-cluttered. 

So there you have it. A year of web design.

2017 will almost certainly see a continued drive for user-focused design and naturalistic interaction. Keep an eye on the increasing prominence of artificial intelligence! Chatbots are on their way...

Written by Anna Carruthers November of 2016