Skip to Content

Stuff that’s been on our minds...

Karmabunny Blog

Hello new year! 10 web design trends for 2014 - part 1

Posted in Web design

For a lot of businesses and organisations, the new year is a great time to hit the ground running with fresh perspectives and motivations for improving business. If the word "Website" is at the top of your new years resolution list, lets shake off the post-holiday comedown and take a look at some broad trends to keep an eye on in 2014...

What's HOT

CSS Tricks - An example of the flat design trend

Flat UI Design:

With it's emergence in 2013, Flat Design will continue to rise in 2014. Even former Skeuomorphic Design lovers such as Apple are shaving off any design element which doesn't strictly serve a purpose. Form AND Function. So lose the ultra-realistic look, ditch the outdated 3D graphics and gradients and thank CSS3 for allowing designers to create much cleaner design elements with magical markup rather than bandwidth bloating images. Your mobile users will thank you too!

One of client's websites, GRANTassist, features a responsive design with a dedicated mobile skin

Spotlight on Mobile:

Given the steep growth curve of smartphone usage for browsing in the last few years, it makes sense to put a big emphasis on this in 2014. With grid style layouts, Responsive Web Design, Adaptive Web Design and Flat UI Design, there has never been a better time for creating websites that shine on a mobile phone too. There's been talk about designing for 'Mobile First', but in reality it doesn't serve most businesses well at this stage. Both desktop and mobile sites serve a purpose - but in 2014 it looks like each is as important as the other. - A great web app example of keeping it simple

KISS - Keep it simple stupid:

Flat UI Design is more than just shedding unnecessary design elements to achieve a clean and minimal look. Think about the whole picture. Forget pages upon pages of text ladden stodginess. Keep things light, less is more. There's a trend to cull text heavy pages and replace that dialogue with video to tell the story instead (there's lots of love for HTML5 video players). Other ways to communicate simply and effectively include the use of flat design infographics (for charts and stats), lighter forms for quick user registration (do you really need a user's life story?), integration with social media (let your fans tell the story), deeply focused landing pages (do home pages need to shout a gazillion messages to tell the story?) and long scrolling sites (trim down that bloated sitemap).

Some of the fonts and foundries available on Adobe Typekit

Eyeball grabbing typography:

Although it's been around for a few years, I'd like to personally thank @font-face, Adobe Typekit and Google Fonts for giving us web designers in exile the typographic freedom of a print designer. The trend for playing with typography will continue to grow this year. And when I say grow, I mean get bigger, literally. Falling in line with the emphasis on keeping things clean and simple - form AND function - upping the font size on webpages means text is clean and highly legible for web users.

It's also worth noting that responsive typography (which naturally plays a big part in Responsive Web Design) is very on trend in 2014. Text automatically upscales and downsizes to keep a website easy to read on a range of devices.

A 'Mega Menu' helping to inform and orientate the user

Easy, intuitive navigation bars:

Ok, intuitive navigation bars should have always been considered a website staple since, like, forever. I'm thinking more about ways to trick them up, minimally. There's some good trends to focus on for navigation for 2014. One is the sticky nav bar which gained momentum in 2013 and should, um, stick around this year. With longer scrolling pages, the sticky nav allows users to still get somewhere else without the long scroll back.

How about the mega menu? Forget the polite list of drop down menu items. Think big with an edge-to-edge panel which includes multiple lists, graphics and the kitchen sink.

Now you see it, now you don't - the slide out menu keeps the content as king. Toggle it on and toggle it off, it's a nice way to keep a webpage clean and minimal with the focus on the content.

And now, a quick look at 'What's NOT' in part 2...

Tagged with:

Web design

Tell me more...

More web rambles on similar topics

  • Posted by Bek

    Following on from 'What's HOT' in part 1, let's now have a quick look at what not to inflict on your web audience in 2014... What's NOT Anything Flash: Ok, well Flash has...

  • Posted by Jana

    NOTE: while this post has some useful tidbits, it is pretty much out of date now and we will try to update it soon. Alas, website design changes pretty quickly.. So you're a...

  • SproutCMS

    Posted by Luke

    Our content management system, SproutCMS 3.0 has now been released as an open source development platform. Read more about the release: Official SproutCMS 3.0 website Download from GIT View development docs Over 15...

Want to get webby with us?

We’d love to hear from you