12 good, bad and ugly web design trends for 2016

I last compiled a list of design trends back at the start of 2014. Things move quickly in the wide world of web design, but I feel that an annual list is probably overkill.

As such, 2015 was a fallow year for me, but I thought I’d put a new list together this side of the holidays. Not that all of these trends will make you feel jolly.

So what have we got going on in 2016? More of the same, some innovative new techniques, and one or two surprises, as well as a whole bunch of things that should have been jettisoned by now.

A quick caveat: you may think that some of these things aren’t all about ‘web design’. They may just be the result of a bad decision by the marketing team, rather than the designers. But I’m putting them in this list because web design is fundamentally experiential, and they affect how users perceive your website.

My great hope is that more designers will move towards user experience and data, and away from gut feel, opinion, and putting all kinds of bells and whistles on a website just because they can, or because it’s fashionable.

So then, grab yourself a drink and pull up a cushion. You can decide on whether these trends are good, bad or plain ugly. I’m on the fence about a couple of them…

The homogenization of web design

If you’ve read about the Dribbblisation of web design then you’ll know where I’m going with this. A lot of sites that win Awwwwards are actually rather me-too. A ‘Site Of The Day’ badge doesn’t necessarily stand for innovation. It often stands for being on-trend, which isn’t always a good thing.

There’s a lot to be said for standardisation. If all online checkouts worked the same way then there would be a lot less cart abandonment. But in agencyland, for example, what’s the point of looking exactly the same as a bunch of your competitors?

Think I’m exaggerating? Think again…

It’s the same among B2B SaaS apps, which often have websites with an obligatory three-column grid. Indeed, there are dozens of themes and templates available that help companies to look pretty much the same. I’m not sure if this is a bad thing, but there’s something to be said for being distinctive.

Homogenisation is actually part a wider design trend. I’ve spent most of 2015 trying to figure out what kind of car to buy, partially because nothing really stands out.

Patterns, not pages

To quote the excellent UI-Patterns website:

“Patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.”

As Vince Speelman says: “Modern UI teams are designing components first; interfaces are merely the thoughtful composition of components.”

Google’s Material Design guidelines are usually mentioned whenever I read about this subject, and they’re well worth a look if you’re unfamiliar with them.

Codeacademy’s recent redesign was based around 10 guiding design principles and patterns that could be used and reused, along with UI design templates. Here’s the UI toolkit Codeacademy put together at the start of the project:

toolkit codeacademy

This kind of design template is really helpful – especially when working as a team. Design patterns tend to be somewhat broader. I think of patterns as non-prescriptive guidelines to help people design to accommodate typical user behaviour. The reusable assets and ready-to-code design stencils as shown above are a subset of patterns, and reflects the user-focused thinking that happens before designers mess around with pixels.

Disney-grade animation

Flash might be dead but you can do wondrous things with CSS, HTML5 and jQuery. The trouble is, all too often designers do not show enough restraint.

I’m a huge fan of motion design, which can help bring a website to life in very subtle, unexpected ways. The trouble is, animation gets old fast when everything is moving and flashing and spinning and wobbling.

Sophie Paxton nailed it when she wrote about gratuitous animation a couple of months ago.

Sophie’s five tips are well worth paying attention to:

five-animation-tips

Super-saturated websites

Have you seen Bloomberg’s web designs of late? Bloomberg isn’t shy when it comes to using colour, using highly saturated and neon palettes. I’m not sure that everything works, but I admire its bold stance, especially relative to its dry subject matter (primarily business and politics).

bloomberg-politics

Another website that has gone all-out neon in a recent revamp is Medium, which chose a shade of green that can be seen by the human eye from outer space.

medium-logo

Lots of people hated the change, but it’s grown on me, not least because it has made Medium more usable when I’m not actively using it…

medium-tab

Spotify also went crazy earlier in the year, if the thousands of tweets about it’s new logo are anything to go by. People seemed to universally hate the new, bright green.

new-spotify-logo

It’s lead designer subsequently talked about “involving the community in the design process”. Probably a good idea, if only for PR reasons…

‘Blur up’ background images

Facebook’s engineers wrote about this ‘blur and scale’ technique. It scales a smaller image, applies Gaussian blur, and gradually loads the picture.

Facebook found that it helps to speed up page loading time by 30% – a big win. Here’s a great post on how to apply this technique, by Emil Björklund.

scale-and-blur

Subtle loading states

Facebook also applies subtle loading states to newsfeed items, to bridge the user experience gap between ‘nothing’ and ‘something’. Beats a spinning loading icon.

There’s a wonderful post by Vince Speelman on the nine states of design, which covers this topic and more besides. It’s well worth a read.

subtle-loading-states

‘Mullet websites’

I love this phrase, which was coined by a Redditor called ironmetal in a post dedicated to “the anti-usability trend of web dev”. It perfectly sums up the aesthetics-first trend in web design.

“The web is experiencing what I would consider to be it’s ‘80s. So many new options and capabilities are available and everyone is going crazy finding ways to add it all to their site. So now we have a bunch of shit that we all think looks great but is extremely unusable. In 10 years we’ll look back and cringe at our mullet websites.”

Technology is a great enabler, but I’ve said it before and I’ll say it again: just because you can, doesn’t mean you should.

That being said, who doesn’t love a good mullet?

darryl-hall-mullet

Preloaders

While we’re on the subject of anti-UX, here’s another one that was mentioned in that Reddit post. Preloaders. They are the spawn of Satan, and only exist to tell users that you’re happy to make people wait. Not a good message, in my opinion.

preloaders

I’m pretty hardcore about this: there’s almost no reason why you should use a loading animation. Yes, there are some outliers to consider, but if your website doesn’t load in under eight seconds then something is very, very wrong.

Scrolljacking

Ever been on a website where your mouse feels weird? You’ve probably been scrolljacked. As Redditor poisondwarf says:

“Why is this so popular?! Nevermind that you’ve completely fucked it up, and now my scroll wheel scrolls at a 10th of the speed, you just don’t change expected behaviour! Especially native behaviour to your operating system and peripherals. How could you be so naive that you think your operating system with your mouse is the only thing people use? And for what? So you can trigger those browser-killing animations? There is no justifiable reason to override native scrolling behaviour, period.”

I agree entirely. Only a sadist would choose to inflict this kind of savagery on a visitor.

If you spend your time doing this kind of thing, you need to exit the building.

As I mentioned at the start of this article, I hope that we’ll see a lot more interest in user experience from the many talented designers who work on undeniably impressive websites.

Passive aggressive pop-ups

There’s nothing subtle about pop-ups, but there are two serious UX crimes at play nowadays.

The first is that they’re often house ads. It’s terrible! Pop-ups used to be bought by clueless brands. Now they are delivered – on purpose – by clueless brands masquerading as publishers in the name of content marketing.

Presumably this is because they generate lots of newsletter sign-ups, but this is a boorish ad format, and it just comes across as desperate. Or worse…

The second crime is one of messaging. Depending on where you draw the line, you might not consider this web design, unless – like me – you think that content and user experience are fundamental. So what is the message here, apart from ‘SIGN UP TO OUR NEWSLETTER’ or ‘DOWNLOAD OUR EBOOK’?

The message is, if you don’t sign up, you – the user – are a moron.

Here are five of the douchiest pop-ups I’ve seen in 2015…

douchey-pop-up-one

douchey-pop-ups-two

douchey-pop-up-three

douchey-pop-up-four

douchey-pop-up-five

So long, hamburger

Way too much has been written about the beleaguered hamburger menu. I guess it seemed like a good idea at the time, but it turns out that there are better alternatives out there. Unlike the blessed hamburger, visible menus have proven benefits, in terms of user comprehension, engagement, and goal completion.

Many of the biggest web companies have retired their hamburger menus in the past year or so, in favour of something a bit more obvious. Always a sign that the data has proved conclusive.

YouTube, for example, binned its hamburger menu, a few months ago…

Google, Apple and Microsoft have also dropped the hamburger menu. Others will follow suit.

Heavy pages get heavier

If you’ve tried to use the web without a decent broadband connection in the past year or so, you will have noticed that websites are very, very, very slow. Page bloat is now – by design – out of control.

A decade ago the rule of thumb was to keep web pages below 100kb, as Google used to stop indexing content above that limit. At some point, a few years later, Google retired this rule and the gloves came off. Pages started to get heavier.

In 2010 the average web page had grown to 702 KB in weight, based on the performance of the top one million sites, as per HTTP Archive’s stats.

http-archive-stats

Since then, pages have basically become obese. In 2015, the average web page is 2,219 KB – more than three times as large as they were five years ago.

2015-bloated-websites

It looks like slow-ass third party scripts, (presumably non-compressed) images, video and fonts are largely to blame.

For all the lip service paid to designing for all kinds of different devices, this is very bad news for mobile users who aren’t hooked up to WiFi.

Some sites are worse than others. The Daily Mail’s homepage is 8.8 MB in size. Staggering, don’t you think?

daily-mail-homepage-speed

There are another dozen or so trends to flag up, but in the interests of brevity I’m going to stop here.

Which other trends are emerging and evolving? What’s starting to fade away? Do share your thoughts below…

Related reading

eeg
site stats
citizen kane newspaper
bull
Simple Share Buttons