18 pivotal web design trends for 2014

What web design trends do you think we’ll see in 2014? I’m betting on more simplicity, more cleanliness, and more focus on smaller screen sizes, among other things.

This collection is largely based on observation, vaguely educated guesswork, waving a finger in the air, and a bunch of other posts I’ve compiled in recent months. As such, some of these predictions may be more accurate than others!

No doubt I have missed all manner of trends, so do share your own thoughts and predictions in the comments section below.

1. Flat UI will continue to grow

As a fan of sans serif fonts I am happy to report that clean currently beats fancy. Windows 8 was really influential in this regard, and then Apple ditched skeuomorphism when it launched iOS7. I think flat design has a lot of legs left in it.

Windows 8

Apple iOS7

Skibuddy

2. ‘Mobile first’

Smartphone and tablet usage has skyrocketed in recent years, and is overtaking desktop traffic for many websites. In 2014 mobile devices will continue to dominate, forcing designers to rethink the user experience for smaller screens (they should think about bigger ones too). The need to adapt to a growing mobile-enabled user base can make a company more agile, driving innovation within organisations.

Of course the reality – for most firms – is that ‘mobile first’ doesn’t really apply. It is still very much ‘mobile second’, at least for now, but for those that embrace responsive and / or adaptive design, the ROI can be nothing short of majestic.

3. Yet more scrolling

I explored scrolling websites back in 2012, when it was a relatively nascent trend. It has grown a lot since then. Partly I think it is because scrolling is easy enough to execute, and partly it’s because designers are thinking about mobile and tablet devices, and about how to design with the swipe in mind.

Parallax scrolling, horizontal scrolling, column-based scrolling and infinite scrolling are all things that we’ll probably see more of in 2014 and beyond. There are a few things to be wary of though,particularly around infinite scrolling.

4. More HTML5 goodness

Rather than listening to me bang on about the joys of HTML5 I suggest that you visit Codepenand play around with some of the examples, to see what’s possible. Alternatively, check out a few of these rather creative agency websites, which blend dollops of HTML5 with sprinklings of CSS3 and jQuery.

5. More HTML5 badness

I have already complained at length about the bastardisation of web design and crimes committed against the user experience by people with little restraint. Just because you can doesn’t mean you should.

For example, if your sexy new website starts off with a one minute wait then you’re doing it wrong, no matter how slick your ‘please wait’ loading icon is. Waiting always sucks, and I’m with Brad Frost: performance is design.

The return of Flash-era showiness and ego over a pristine user experience is something I hope doesn’t happen at any kind of scale.

6. Micro UX

Microscopic attention to detail can really make a website stand out from the crowd. Used sparingly, micro UX effects can help bring a website to life, with menus, transitions and hover states all pleasing the senses.

For example, check out this lovely progress indicator from the Daily Beast.

7. Less text

The web seems to becoming a lot less text-heavy, and some apps and websites have almost no visible text, instead relying on images and icons to convey information to the user.

In some cases this works really well, but in others I think the absolute avoidance of text is unhelpful. For example, the Snapchat homepage, which contains less than 10 words, and requires visitors to watch a video to make sense of things.

Medical dashboard concept

ELI – this kind of display makes sense for portfolio sites

Snapchat

8. Minimalist navigation

Stripped-down navigation is a trend that looks set to grow in popularity. Partly influenced by the need to design condensed navigation for mobile, we’re seeing a lot more focus on icons, rolldowns, and navigation that shrinks as you start to scroll down the page.

Medium

Smart Home

9. CSS replaces images

Why use an image as an icon when you can use CSS? Who wouldn’t want a set of lovely CSS checkboxes on their website?

10. Video / moving backgrounds

This is definitely something I think we’ll be seeing a lot more of. The Guardian’s ‘Firestorm‘ provides a good example, and I reckon more brands – rather than content sites – will make the most of dynamic backgrounds in 2014.

The House of Eyewear

11. Richer content experiences

This follows on nicely from Firestorm. Some publishers are moving towards far more engaging online content experiences, which combine text, images, video, interactive functionality, and a fair amount of scrolling.

ESPN’s Grantland

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s