Monthly Archives: January 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.

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.

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.

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…

Qatar Airways

15. Hypercolour

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.

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.

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.

AO, previously Appliances Online, is a great site to head for if you want to see examples of best practice. It has also been refreshingly honest with us, talking about how it redesigned its product pages for example.

Schuh’s Stuart McMillan nominated AO, though we may have done so anyway.

Why is the site good? Lots of reasons, but check out the product pages for one.

We have great use of social proof with the reviews and Facebook mentions, while all the information customers need to decide on big ticket purchases is there, along with clear delivery information.

We’ve talked about ASOS a lot on this blog, purely because it offers a great example of ecommerce best practice (as well as social, customer service and more).

According to Paul Rouke from PRWD:

Across devices, in fashion retailing ASOS continues to deliver an exceptional experience in many areas – service proposition, site speed, genuinely valuable shopping features, integration across devices, and just lots of lots of ecommerce best practice.

Who needs to reinvent the wheel when you have a clear focus on delivering what visitors expect and desire?

It offers a great user experience on desktop. Ben Davis likes the category pages, such as this one for wooden sheds:

It’s a very useful page, with excellent filtering options that allow shoppers to narrow the selection and choose according to the features that are important to them – size, price, ease of assembly, and so on.

Over in the US during 2013 we’ve been extremely impressed by the significant improvements The North Face has made to its browsing and buying user experience. Its new product lister experience and in particular the big, bold, persuasive product pages are key highlights in the user experience.

It has truly embraced key concepts, such as white space, clarity of information, the importance of providing engaging content and how to provide customer reviews in a persuasive, emotive way.

Nominated by Chris Lake for it’s excellent product pages and use of product images. Here, it uses five different product images, as well as the option of a 360 view. I also like the way it displays both UK and European sizes on the page.

For pure ecommerce, I’m a fan of Freepeople.com, a US clothing retailer. It has created a strong visual brand identity online and invests in striking product imagery. The site is just enjoyable to browse.

I recently usedwatchshop.com, I found the watch buying guides and the user reviews to be very helpful. I felt the site offered an overall service much more tailored to someone looking to buy a watch than Amazon does. Therefore I think there’s a lot of room for smaller, niche/boutique stores to flourish online to bring some personality back to online shopping.

Amazon is great because it offers low prices and an expansive collection of products, but could you call the customer service team and have them recommend a nice Rolex watch in gold for under £10,000? I doubt it.

Hard not to mention Amazon, since it’s doing pretty well at the moment…

Perhaps the most impressive aspect, and one which other ecommerce sites can learn from, is theease of repeat purchases. One click and I’ve placed an order, no time for second thoughts as I negotiate the checkout process.

In the UK, I’m always impressed with the marketing work at House of Fraser. The site sells beautiful clothes from the top brands and always has a strong promotional calendar to drive online and in-store traffic.

The spikes it sees during brand events are quite amazing. It has lots of opportunities in mobile and it’s an area it’s investing in continually.