Web design trends 2014

Last week I was involved in some rather impassioned discussions about the look and feel of a new student accommodation website I’m project managing at Sanctuary.

This was the same week that Apple launched the much talked about iOS 7 which includes features such as, in Apple’s own words, “a beautiful new design”.

I decided to take a closer look at this beautiful design and see how it compared to iOS 6. What I like about it, is that it’s:

  • Whiter, Brighter, Cleaner and Flatter.
Screen shots of iphone running on ios 6 and ipad running on ios 7
Left to right: iPhone running on iOS 6 and iPad running on iOS 7

IOS 7 uses colour to accentuate features- note the difference in the ‘Reminders’ app where iOS 6 uses a 2 colour tick box design compared to the colour popping version in iOS 7. The ‘Game Center’ app also does this well and the same can be said for the ‘Contacts’ app which in iOS 7 makes me think about all the types of contact I can have with my friends like SMS and social, whereas the iOS 6 version reminds me of a rather out-dated ‘Filofax’.

This got me thinking about other web design trends for 2014. I’m certainly not a trend-setter so I’ve scoured the web for these.

Lip-smacking Neon

Love it or hate it, it’s on the high street so it will probably make its way online too.

Screen shot of a website using neon colours
Neon in web design- hot trend for 2014

Flat design

Think Windows 8 with flat blocks of colour. This means no drop shadows, no colour gradients on buttons, no texture and no 3D.

Screen shot of windows 8 showing flat blocks of colour
Windows 8 uses flat blocks of colour

Creative use of typography

This has been a big trend in 2013 and it shows no sign of going away.

I heart typography image
I do indeed heart typography (when it looks good)

Keeping it simple

It’s all about minimalist pages. Provide clear distinction between page elements by using blocks of content.

Screen shot of website showing block content design
Provide clear distinction between page elements by using blocks of content

Maps

We already love a good Google map but 2014 could see maps becoming the basis for the entire website.

Responsive design

This is a no-brainer. Responsive design is about providing the optimal viewing experience every time, according to the device being used. Choose a content management provider that does this for you as a given.

Social media today provides 10 examples of responsive web design in this blog post. I stolen one of their images here, showing you the AIDS.gov website which looks great on PC, laptop, tablet and mobile (I hope they don’t mind).

Screen shot of AIDS.gov website on PC, tablet and mobile
The AIDS.gov website looks great on all devices

Check out these sources for more examples of web design trends for 2014:

www.smartcheck.me/en/web-design-trends-in-2014/

www.designpromotivate.com/2013/08/web-design-trends-changes-2014.html

blog.lunaweb.com/2013/08/07/6-web-design-trends-that-will-make-your-website-pop-in-2014/

Have I missed anything? What’s your opinion? Leave a comment below…

Advertisements

5 thoughts on “Web design trends 2014

  1. My problem with iOS7 as a whole is that it is more difficult to see what actions are available to you: in previous versions of iOS, actions were clearly indicated through “pushable”-looking buttons.

    In iOS7, actions are indicated by coloured text or by thin-lined icons (and which one is used seems to be fairly arbitrary); this makes it harder for novice users, but also less intuitive for experienced users. Instead of being able to glance at the button (and understand by colour or icon what it does) you have to search the screen for the action link, and read it.

    For me, this is a retrograde step from a UI point of view.

    DK

    1. To be honest Chris I haven’t played on the iPad much since I downloaded iOS7 so was looking at it purely from an aesthetic point of view, rather than considering UX. Naive I know. Thanks for your comment. I hope to see some neon in our websites soon……..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s