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.
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
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.
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.
12. Making the most of one page
More and more sites avoid loading new pages, preferring instead to present additional content on the current page. Lightboxes, overlays, and expanding / repositioned tiles can all reduce the amount of clicks in an average user journey.
Stories by H&M
13. Varied typography
Web fonts are on the rise, designers are favouring bigger font sizes than ever, and mix and matchis proving to be very popular. In addition, responsive typography should become a bigger part of responsive web design.
14. Monochromatic design
Why use three colours when two – and shades thereof – will do? I’ve seen some lovely monochromatic palettes recently…
Then again, why use two colours when the whole rainbow is available? A multicoloured approach doesn’t need to be garish, or distracting, and it seems to work particularly well with flat design.
Here are some very colourful websites and apps for you to take a look at.
16. Cards / tiles
This is something I’ve been meaning to write about in a lot more detail, but for now aim here for an overview of why cards ‘are the future of the web’. I happen to think that they’re the past and present too.
17. Bigger, better imagery
Massive pictures and background images – as opposed to patterns for texture – seem to be increasingly popular, and they certainly look nice on retina displays. Take a look at the recentAwwwards ‘Site Of The Day’ gallery and you’ll see what I mean.
Publishers are also using bigger images more than ever, with mixed results.
18. Fixed position content / navigation
This is when you scroll down and the navigation (or some other content unit) stays on the page. Sometimes the navigation will reduce in height into a narrow bar, or a small icon that can be expanded (as per point eight). This is now becoming fairly commonplace among freshly-designed websites, and let’s stick with Awwwards for an example.