mediaTemple

Web design trends and predictions for 2014

The start of 2014 marks another set of web design trend predictions, following a tradition from 2011 (part 1 and part 2), 2012 and 2013. A lot of trends continue to evolve, particularly the use of custom type, video assets and responsive layouts. This slower evolution of trends is especially true for large websites that often don’t have the budget, roadmap or technology to respond quickly. I haven’t included these evolving trends but rather focussed on the three trends that seem to affect every new site, or redesign at the moment. These three trends seem to come as a set, with every example demonstrating aspects from each. MediaTemple recently blogged about their design update, you’ll notice they’ve incorporated all of the trends too.

Full screen interactive transitions

With the continued development of different sized tablets, large mobile screens and small laptops there’s less consistency between screen resolutions. Sites started using full screen video and full screen static elements a few years ago. This trend acted as a platform for responsive layouts — including the use of vector assets. It also helped kill off the already out-of-date newspaper concept of the fold.

With the release of additional functionality in front end code these full screen elements can provide sophisticated transitions, such as half the page scrolling while the other half acts as navigation, and also include full screen UI elements.

It’s almost as though there’s been a revelation — the screen isn’t the same as paper. Content can move and give feedback, even based on the user’s history. This trend fights against design in Photoshop, and advocates designing in the browser and prototyping.

Huge's home page features a full screen vertical carousel that transitions to page content.
Huge’s home page features a full screen vertical carousel that transitions to page content.

Mobile focussed

UI elements are getting bigger so they are large enough to accommodate touch interaction. Additionally gesture based navigation is supported. This trend often means menus are being condensed in to a hamburger icon on desktop, which is something to avoid. Development of this trends meant that the top layer of UI (such as scroll bars) has become redundant — users interact directly with content rather that elements to control it.

The Design Council site demonstrates a mobile based menu system and large UI elements on desktop.
The Design Council site demonstrates a mobile based menu system and large UI elements on desktop.

Flat design

The original concept for Windows 8 began a trend to shift to a flatter, more simple aesthetic. iOS 7 was the latest to make this change and many sites are adopting a similar style. It’s somewhat of a shame as this is purely an aesthetic trend which means all sites are starting to look similar. While I welcome the other two trends from a UX perspective, there’s still an opportunity to adopt them using different visual styles, which would incorporate more brand personality.

While not a website, the Xbox One UI demonstrated the latest incarnation of the Metro style. Navigation is via controller, gesture or voice.
While not a website, the Xbox One UI demonstrated the latest incarnation of the Metro style. Navigation is via controller, gesture or voice.

Recommended books for web designers


List Price: £18.99 GBP
New From: £9.82 GBP In Stock
Used from: £11.12 GBP In Stock


List Price: £24.99 GBP
New From: £14.03 GBP In Stock
Used from: £1.41 GBP In Stock


List Price: £19.99 GBP
New From: £9.99 GBP In Stock
Used from: £10.00 GBP In Stock


List Price: £18.09 GBP
New From: £9.22 GBP In Stock
Used from: £12.02 GBP In Stock


List Price: £16.99 GBP
New From: £7.66 GBP In Stock
Used from: £9.87 GBP In Stock


List Price: £27.99 GBP
New From: £14.75 GBP In Stock
Used from: £14.86 GBP In Stock


List Price: £22.99 GBP
New From: £11.27 GBP In Stock
Used from: £11.49 GBP In Stock

3 Responses to “Web design trends and predictions for 2014”

  1. Volume Designs

    Our web design team has been incorporating many of these new design trends for our clients. We would like to do a flat design, that is one that we haven’t had a client ask for yet but it looks really cool! Maybe we should update our own website to a flat design? :-)

    Thanks for sharing!
    –Keller

  2. Anthony Stonehouse

    Hi Keller, yes though this list is more likely driven by designer’s influence rather than clients. Your website already seems to have adopted some flat style graphics, the icons and charts for example.

  3. Volume Designs

    Hi Anthony,

    You’re right we do incorporate a bit of flat style graphics, just a bit though.. Maybe we will expand on our use of them!

    Cheers,
    –Keller

Leave a Reply