Web design trends and predictions for 2014

The start of 2014 marks another set of web design trend pre­dic­tions, fol­low­ing a tra­di­tion from 2011 (part 1 and part 2), 2012 and 2013. A lot of trends con­tinue to evolve, par­tic­u­larly the use of cus­tom type, video assets and respon­sive lay­outs. This slower evo­lu­tion of trends is espe­cially true for large web­sites that often don’t have the bud­get, roadmap or tech­nol­ogy to respond quickly. I haven’t included these evolv­ing 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 exam­ple demon­strat­ing aspects from each. Medi­aTem­ple recently blogged about their design update, you’ll notice they’ve incor­po­rated all of the trends too.

Full screen inter­ac­tive transitions

With the con­tin­ued devel­op­ment of dif­fer­ent sized tablets, large mobile screens and small lap­tops there’s less con­sis­tency between screen resolutions. Sites started using full screen video and full screen sta­tic ele­ments a few years ago. This trend acted as a plat­form for respon­sive lay­outs — includ­ing the use of vec­tor assets. It also helped kill off the already out-of-date news­pa­per con­cept of the fold.

With the release of addi­tional func­tion­al­ity in front end code these full screen ele­ments can pro­vide sophis­ti­cated tran­si­tions, such as half the page scrolling while the other half acts as nav­i­ga­tion, and also include full screen UI elements.

It’s almost as though there’s been a rev­e­la­tion — the screen isn’t the same as paper. Con­tent can move and give feed­back, even based on the user’s his­tory. This trend fights against design in Pho­to­shop, and advo­cates design­ing in the browser and prototyping.

Huge's home page features a full screen vertical carousel that transitions to page content.
Huge’s home page fea­tures a full screen ver­ti­cal carousel that tran­si­tions to page content.

Mobile focussed

UI ele­ments are get­ting big­ger so they are large enough to accom­mo­date touch inter­ac­tion. Addi­tion­ally ges­ture based nav­i­ga­tion is sup­ported. This trend often means menus are being con­densed in to a ham­burger icon on desk­top, which is some­thing to avoid. Devel­op­ment of this trends meant that the top layer of UI (such as scroll bars) has become redun­dant — users inter­act directly with con­tent rather that ele­ments to con­trol it.

The Design Council site demonstrates a mobile based menu system and large UI elements on desktop.
The Design Coun­cil site demon­strates a mobile based menu sys­tem and large UI ele­ments on desktop.

Flat design

The orig­i­nal con­cept for Win­dows 8 began a trend to shift to a flat­ter, more sim­ple aes­thetic. iOS 7 was the lat­est to make this change and many sites are adopt­ing a sim­i­lar style. It’s some­what of a shame as this is purely an aes­thetic trend which means all sites are start­ing to look sim­i­lar. While I wel­come the other two trends from a UX per­spec­tive, there’s still an oppor­tu­nity to adopt them using dif­fer­ent visual styles, which would incor­po­rate 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 web­site, the Xbox One UI demon­strated the lat­est incar­na­tion of the Metro style. Nav­i­ga­tion is via con­troller, ges­ture or voice.

Rec­om­mended books for web designers

List Price: £18.99 GBP
New From: £9.14 GBP In Stock
Used from: £10.86 GBP In Stock

List Price: £24.99 GBP
New From: £11.50 GBP In Stock
Used from: £3.24 GBP In Stock

List Price: £19.99 GBP
New From: £10.50 GBP In Stock
Used from: £10.41 GBP In Stock

List Price: £17.67 GBP
New From: £9.79 GBP In Stock
Used from: £10.94 GBP In Stock

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

List Price: £27.99 GBP
New From: £14.77 GBP In Stock
Used from: £14.91 GBP In Stock

List Price: £22.99 GBP
New From: £11.60 GBP In Stock
Used from: £11.51 GBP In Stock

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

  1. Volume Designs

    Our web design team has been incor­po­rat­ing 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 web­site to a flat design? :-)

    Thanks for shar­ing!

  2. Anthony Stonehouse

    Hi Keller, yes though this list is more likely dri­ven by designer’s influ­ence rather than clients. Your web­site already seems to have adopted some flat style graph­ics, the icons and charts for example.

  3. Volume Designs

    Hi Anthony,

    You’re right we do incor­po­rate a bit of flat style graph­ics, just a bit though.. Maybe we will expand on our use of them!



Leave a Reply