Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Rss Bot

6 huge web design trends for 2020

Recommended Posts

For many years, web designers have strived to provide the optimal information people are searching for, quickly and effectively. It’s undeniable, when comparing websites from a decade ago to those of today, that the industry is getting better at this. But have we lost something along the way?

"I think we’re in an age of user feedback that drives well-optimised but increasingly generic executions," argues Simon Gater, creative director and co-owner at Mad River. "The quality feedback we get from users makes it much easier to get a solid understanding of whether your work is 'fit for purpose' quickly, and ensures we achieve client goals at a statistical level. But as more and more people get similar feedback, we’re at risk of being filtered down the same design trend or path of execution. Because of this, we now need to work harder for that point of differentiation while maintaining the optimum user experience."

So as we continue to walk the line between functionality and originality, usefulness and inspiration, what are the big trends we’ll need to take account of, in 2020 and beyond? In this article, we chat to some leading voices in the industry to find out.

If you're after more web design help, see our web design tools roundup.

01. Sophisticated micro-interactions 

Homepage of Bournemouth Beach Lodges

On Crowd’s website for Bournemouth Beach Lodges, hovering over buttons creates an animated wave effect

Micro-interactions have been around for years, especially on social media; an example would be the red heart popping up when a post is liked on Instagram. But as attention spans continue to constrict, Lee Poynter, global head of design at Crowd, believes they’re going to become a bigger deal in 2020. "Micro-interactions and micro-animations are going to become more sophisticated until they become part of everyone’s interactivity," he predicts. "They are a way to signpost, feedback and ensure trust." 

His colleague, digital designer Vicky Kwan, agrees. "Micro-interactions are used to show the personality and the vibe of a brand," she explains. "For example, if a product wants to be presented in a sleek way, then the interactions will not be bouncy; instead, they’ll come in smoothly and slowly, so it gives the whole elegant feel when the person is looking at it."

02. Taller image crops

Homepage of Mountainguides.is with portrait shot of a hillside

Mountainguides.is, a website about adventure travel in Iceland, makes strong use of portrait, as opposed to landscape, images

"I’ve noticed a real increase in the use of portrait imagery in desktop experiences this year," says Jake Young, senior digital designer at Mad River. "This is only going to become more prevalent as more and more people view content on their phones."

And this trend is bigger than a case of lazy mobile-first designers with portrait crops scaling up to desktop, he adds; nor is it confined to the common 4:5 ratio. "We’re increasingly seeing taller and taller image crops on desktop experiences... and they’re beautiful. This image consideration is resulting in taller, but well-considered designs, be them carousel or card."

03. Dark mode design

Instagram in Dark Mode

Instagram was one of several big sites to introduce dark mode in 2019

“Dark mode design has been a big topic of conversation this year,” notes Davide Barrata, design director at Impero. “We’ve seen pros and cons being discussed everywhere, notably asking if 'design' is being sacrificed over science. I expect the discussion to continue in 2020.”

Consuela Onighi, UX designer at Illustrate Digital, sees the trend as a good thing. “Dark mode is a nice option to have for a more delightful UX, as it brings out the content and it's easier on the eye,” she argues. “I wouldn’t be surprised if most designers started switching to dark mode in the new year.” 

This concept isn’t new, of course. “However in 2019 we’ve seen brands like Pinterest, Slack and Instagram bring this into the mainstream, with Facebook and Whatsapp due to launch imminently,” points out Lee Hoddy, creative partner at Conran Design Group. And he heartily approves. 

“Beyond the more functional benefits that dark mode offers, such as increased battery life and low-light settings, aesthetically speaking it achieves the feat of creating the impression of a truly bezel-less, notch-less design, something which the majority of smartphone makers are clamouring towards from a product design perspective,” Hoddy argues. “It is going to be interesting to see how designers push dark mode further in 2020.”

04. The foldable web

Samsung Galaxy Fold 5G open at fold

Designers will need to take account of foldable devices like the Samsung Galaxy Fold 5G going forward

Many big trends in web design have been driven by new devices, most notably at the beginning of the 2010s by the rise of the iPad. And perhaps at the dawn of the 2020s, we’ll see a similar shift to respond to new foldable devices, such as the Samsung Galaxy Fold 5G. 

"The rise of a 'foldable web' will mean more and more designs will recognise and provide a unique experience for foldable phones and tablets,” predicts Adam Innes, senior software developer at 50,000feet. “I think you'll see some of the more unique and innovative designs go viral while the concept is fresh."

05. Typographic diversity

Homepage of &Walsh, with animated 3D ampersand on Jessica Walsh's face

A beautiful implementation of 3D animated type on the &Walsh website

Will 2020 see more typographical experimentation on the web? “Bold lowercase sans-serif typefaces have been doing the rounds for years now and, as a result, lots of websites have begun to look a bit samey,” says James Wood, co-founder and creative director at ShopTalk. “But we’re seeing the seeds of change, and that’ll gain momentum in 2020. Handwritten type, retro fonts and animation typefaces are making a comeback.

“We’re also seeing combinations – things that look as though they shouldn’t belong together but somehow work anyway," he continues. "‘Imperfections’ can add real personality. Look out, too, for a big push in immersive 3D elements. &Walsh’s rotating 3D metal ampersand is a great example of this.”

06. Minimalism goes further

Homepage of Apple website

Even at Christmas, Apple.com keeps things sleek and minimal

"One trend we’ve been seeing more and more of in 2019 is simple and minimalistic web page design," says Steve Sharp, director of Fat Cow Media. "Following in the footsteps of the Apples of this world, companies are looking for simple templates to land their brand message and showcase their products and services in a clear and concise way." And he’s a strong supporter of this approach. "It’s clean, modern and fresh and makes the user experience all the better. I’m excited to see this particular trend becoming more widely adopted into 2020.”

Of course, minimalism is ultimately about providing an easier and better experience for the user, and that's just as much about functionality as it is aesthetics. Alex Schleifer, chief design officer at Airbnb, believes that's going to see big strides in 2020. "We’ll become accustomed to very low-friction, or zero-friction interfaces when it comes to things like sign-ups and payments," he predicts. "One-tap registration and instant payments will become the norm, while entering credit card numbers and passwords will start to feel archaic." We're looking forward to that! 

Read more:

View the full article

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×