Skip to the content

Eight web design trends to watch for in 2014

This is a post from Metia Designer Vicky Forbes

As we get further into 2014, it’s a good time to take a look at the most popular web design trends of the moment. The fast-moving nature of technology and our ever-increasing use of smartphones and tablets mean that designers are continually looking at new ways to make beautiful visuals in combination with great user experiences. Here are eight trends that you should be looking out for – if you haven’t seen them already.

1. Flat Design

You can’t have a list of trends without using the words ‘flat design’. It’s important to communicate clearly and with visual clarity, especially on mobiles, and flat design helps get rid of the cluttered feel that has been a problem in the past. Good examples are Microsoft’s Windows 8 and Apple’s iOS7. 

Clean is currently beating complex. You also need to remember that the term ‘flat’ doesn’t mean the absence of gradients or details – it’s simply a more stripped back version of what there used to be. The previous trend for skeuomorphism, a style of design that mimicked real-world objects, has gone – you won’t see bevels or embossing on icons these days.

According to Shutterstock, downloads of flat design elements have increased 200% over the past year. To find out more about flat design, have a read of Jessie Shen’s blog on flat design 

2. Mobile First Design

Due to the increase of people using smartphones to look at websites, it makes sense designing for that view first. Of course, this isn’t yet true for all websites, as it depends on how the site is used. However, we can confidently say it is a trend that will continue to increase.

The increase of smartphone and tablet use is obviously having an effect on the way designers are working. It appears that as more complex devices enter the market, the key is to make design cleaner, clearer, but working harder. It’s really about making the user’s experience easier and better – fail and they’ll just stop using gadgets out of frustration. 

3. Sticky and Nested Navigation

Navigation is adapting to suit smartphones and tablets. Sticky navigation follows you down the page in a fixed position (like Mashable’s example below). What’s so great about this is that you can navigate throughout the site without having to scroll to the top.

 

Websites are also using nested navigation from mobile to desktop, where information is organised in layers so you don’t need to move off the webpage you’re looking at. As everything is hidden away to be found, it means you’ll keep the same browsing experience.

4. Infinite Scrolling Websites

Clients always ask about where the fold is on a website, but is it still relevant? People are becoming more used to using infinite scrolling sites, such as Facebook, Twitter, Instagram and Pinterest. This is a web design technique which loads content continuously as a user scrolls down a page, which means no pagination.

This can work for some industries, but you may need to be careful with this technique when thinking about creating a website where you need people to reach a goal – such as a call-to-action.

 

5. Shorter Content

With Facebook and Twitter, content is more digestible. Attention spans are shorter in this time-pressured world with people have less patience to read long articles, so sharper content is needed. Say it in 140 characters or you might run the risk of losing your viewer’s attention.

 Short content can be the way to go, especially when you just want something to amuse you on the train home. Short content together with images often work well – pictures can very quickly tell a story that you would need hundreds of words to tell. Think of Instagram.

6. Large Images as Homepages

While looking for inspiration we’ve noticed a trend on websites having massive hero images. One example is: http://blackhouse.uk.com, where you have big pictures of meaty chunks of steak to illustrate the point of what they do – cooking ‘solid and honest’ food.

It’s about grabbing people’s attention in a stripped back way, without being complex. Again, you can see how images can sometimes say much more than hundreds of words.

 

7. Video and animated gifs background

An increasingly popular medium for storytelling, a short video can say much more about a product than several pages on a website. Twitter’s app Vine, which lets you create and share short looping videos, is also feeding people’s interest in videos and GIFs. Think about an animated GIF in the background of a webpage – it can make it stand out.

A great example is the short video in the background for the websitehttp://www.croptheblock.com, which is designed to make you stay longer on the site. And the Bing browser (see image below) has a really pleasant to look at moving background that can be really immersive.

8. Interactive Infographics

The ever-present infographic, which is created to make complex information digestible, is now even more interactive. With more interaction the infographic can become really engaging, with more users potentially interested in reading and sharing the content.

A great example is http://neomam.com/interactive/13reasons, an infographic which (slightly confusingly) tries to explain why we love infographics! Using parallax and animated backgrounds it really does engage a reader differently and more effectively than if the infographic was static.

It will be interesting is to see how these eight trends fare and what new ones will be discovered as new devices come out with different design challenges. What others have you noticed? 

For more 2014 design trends to expect, please take a look at our recent Metia Insights Report, available as a download here