The Biggest Web Design Trends From 2020 & What They Mean For 2021

  • Design & Dev

With a difficult year coming to an end, it’s finally time to look ahead to 2021 with hope for better things to come over the next 12 months. In this article, we look at the biggest web design trends that shaped 2020 and look at how these will define the design conventions that matter most in 2021.

As you’ll see from the trends we look at today, there’s a strong influence from the events of this year and how they’ve changed the way people interact with the web. Our aim is to highlight the new challenges businesses and users face with their online activities and the steps designers are taking to help solve these problems and continue achieving marketing goals.

 

Comfortable colours, dark modes & reduced contrast

One of the biggest design trends we’ve seen in recent years is the rise of dark modes - something that started with mobile app designs and has since moved over to software and web design in general.
Dark mode is now a common feature across macOS, iOS and Android, as well as web apps ranging from Instagram and Twitter to Gmail and Google Calendar.

 

 

This is an in-demand design trend, too. A survey carried out by Chrome developer, Thomas Steiner, finds that 82.7% of respondents use dark mode on their OS.

Apple itself says dark mode “makes it easier to stay focused on your work” while Microsoft says it can “reduce eye strain and improve battery life” and Google suggests it “improves visibility for users with low vision and those who are sensitive to bright light.”

 

 

According to ONS figures, a record 46.6% of employed people in the UK did some amount of working from home during the height of lockdown in April 2020. Meanwhile, data from Ofcom shows that adults in the country were spending an average of four hours and 2 minutes online every day in April 2020.

This coincided with a sharp rise in search interest for “dark mode” as countries around the world started to enter lockdown.

Looking forward to 2021, we’re going to see the key principles behind dark mode adopted more broadly as we all spend more of our time online. We’re already started seeing this with the adoption of “comfortable colours” and reduced contrast that aim to make internet time - quite literally - easier on the eyes.

 

 

This isn’t limited to dark modes either and we’re going to see softer colour pallets adopted more widely across the web. On a practical level, this aims to make increased browsing time less taxing on the eyes but there’s also an increased emphasis on soothing, relaxing colour tones - something that seems particularly relevant heading into 2021.

 

 

This could be the biggest colour design trend of 2021 and we expect to see dark mode adoption increase even further. Just keep in mind that dark mode isn’t always the preferred choice and it pays to offer the option of a light mode for users who prefer the more traditional experience.

 

Overlapping layers

Depth is a key concept throughout many of the latest design trends and there are plenty of ways you can approach this. One method, which featured in Designmodo’s Top 11 Web Design and UI Trends for 2020 article back at the start of the year, is overlapping layers.

“Overlapping layers and elements don’t quite create a 3D effect, but they do add a sense of depth and dimension to projects… You can overlap boxes and backgrounds, images or video, text or user interface elements and icons. The trickiest part might be ensuring that the overlapping look flows through the scroll of the design.”

By simply overlapping elements on the page, you can add depth and guide the users’ eye without relying on any heavy JavaScript code that’s going to hurt your loading times.

 

 

This is a simple, effective way to add depth to a static, 2D design but you should pay close attention to how your use of overlapping layers impacts the user. In the example above, the overlapping image encourages the user to scroll down by creating a vertical leading line.

There is a risk this takes attention away from the message in the hero section but this can be a useful technique if your priority is to get users scrolling.

 

 

This example comes from one of the default templates included with the Blocksy WordPress theme and it has the opposite effect by encouraging the user’s eye back to the message in that hero section, which combines excellently with the image of the boy making direct eye contact.

With two CTAs in the hero section, it’s clear that this message is the priority and it makes sense to add visual cues that keep the users’ attention focused on the key message of the page and the desired conversion goals.

 

Neumorphism

Neumorphism started to gain traction right at the end of 2019 and it’s been one of the biggest design trends throughout 2020.

If you’re not sure what neumorphism is, this explanation from David Ofiare is a great intro to the concept. Basically, neumorphism is a progression on another design principle called “skeuomorphism” where software products, icons and elements aim to replicate items of the real world.

This is common in DAW (Digital Audio Workstation) software where interfaces and plugins are designed to look and operate like real studio equipment.

 

 

Skeuomorphism was popularised by Apple with those textured app icons we saw across macOS and iOS for so many years before the age of flat design pulled us into a more minimalist, two-dimensional approach to mobile user interfaces.

 

 

Neumorphism applies some of those old skeuomorphic principles to the modern age of flat design to add texture and depth to interfaces. Here we have an example of how a calculator app might look like with some neumorphism applied to make the buttons and key UI elements more pronounced.

Now, most of us recognise a calculator and know how to use one but neumorphism is a useful tool for providing subtle contextual information in user interfaces that might be less familiar.

 

 

In the example below, you can see how some simple shadows create visible edges to flat UI elements without requiring hard borders or background colours that would break the minimal style of the design.

 

 

This can be combined with flat design within the same interface, using subtle touches of neumorphism to emphasise the most important elements. This is particularly useful for interactive elements such as toggle switches, media players or the schedule timer in this smart home app design.

 

 

When you want to communicate that interaction with specific UI elements results in actions or changed settings, neumorphism is an effective design principle to communicate this functionality.

The key is that you’re able to make these UI elements visually familiar with real-world items that operate in a similar way - such as the schedule timer above that resembles the timer for lights or thermostats in the home.

 

Lightweight, animated micro-interactions

Another trend that ties in nicely with the concept of neumorphism and UI design is the emergence of lightweight animations for micro-interactions. We’re lucky to have plenty of frameworks that make these details easy to add to web apps and UI elements without hurting page speed or responsiveness too much.

The most famous of these is probably Lottie, which was developed by none other than Airbnb, to parse Adobe After Effects animations like these:

Micro-interactions allow you to provide visual feedback like loading animations when users hit the search button, for example, or to provide contextual information like the animated instructions for taking a photo of government ID shown above.

Implementing animations like these used to be a real pain and the performance implications were costly. However, frameworks like Lottie offer a lightweight solution for designers to provide contextual feedback and visual information without clogging up the browser.

 

Embedded video animations

Keeping on the topic of optimised animation techniques, embedded videos are gaining popularity as a replacement for gif animations that can dramatically increase loading times.

Conveying information to users efficiently is the priority for every designer and brands trying to show the best of their products need to adopt the same philosophy. Video is often the most effective way to show products, actions and benefits within seconds.

The trouble is video can be a page speed killer but more brands are turning to self-hosted, embedded video animations like the following example from Unbounce.

 

The idea is that users scroll down the page and see gif-like video clips that demonstrate key features of a product and this has really caught on with software providers.

 

 

With self-hosted video, you have more control over optimising your clips for loading times and you can combine lazy loading techniques with CDNs and caching to improve the perceived loading times. Generally speaking, you’ll want fast-loading content above the fold and your video animations further down the page so they have more time to load.

 

Guided on-page navigation

In recent years, we’ve seen a growing number of brands ditch the traditional menu navigation in favour of on-page navigational elements that guide users to specific parts of a website.

This is increasingly common for companies that have different target audiences landing on the same homepage or complex large product inventories that can be tricky to navigate.

 

 

Clothes retailer PULL&BEAR solves this problem by asking new users to choose whether they want to browse clothes designed for women or men when they arrive on the homepage, allowing the company to simplify its navigation and show more relevant products to users based on their selection.

We see a similar approach taken by luxury jewellery designer Irène Paris who prompts new visitors to choose between browsing through its range of fine jewellery or explore options for something more bespoke.

This guided, on-page approach to navigation allows you to direct visitors to the pages they’re interested in while cutting out anything that’s irrelevant. This increases the relevance of the content they see on subsequent pages while also reducing choice fatigue and unnecessary distractions.

We’re likely to see more of this in 2021, too, as the web moves away from cookies into a more privacy-centric age.

 

GDPR consent & contextual targeting in a cookie-free web

GDPR consent is the design trend nobody asked for but these regulations are serious business. The guidance on consent is especially challenging from a design perspective, adding all kinds of friction to the simple act of visiting a website for the first time.

 

 

This is a frustratingly familiar view for people visiting websites for the first or, worse, revisiting a site when you’ve opted out of cookies, meaning your settings can’t be saved for future sessions.

Paradoxically, GDPR consent is actually punishing those who care about their privacy the most by forcing them to deal with firms like this every time they visit a site:

Worse still, the guidelines aren’t getting the job done as only 11.8% of website ‘cookie banners’ are complying with GDPR and designs that remove the opt-out button increase consent by 22.5% while including opt-outs reduces consent by up to 20%.

Better times may be ahead with Safari and Firefox both blocking third-party cookies by default and Chrome moving towards the same goal by 2022.

The problem is, this will have a profound effect on the user experience of visiting websites more than once, reducing the relevance of repeat visits and making it harder for businesses to deliver personalised content.

“In an advertising landscape transformed by data privacy and tech giants, contextual intelligence will become the dominant form of targeting and is already making both targeting and brand safety more effective.” - Tim Flagg, Winter is coming: Goodbye cookies, hello contextual via ClickZ

In 2021, brands and designers alike need to consider alternatives for a cookie-free web, such as contextual targeting that relies less on cookies and personal data.

his involves delivering content to users based on the actions they complete in the current session and this is another reason the guided navigation strategy we looked at in the previous section is so effective. It allows you to create a navigational structure that filters out irrelevant content as users progress through your site, based on the elements they click and pages they visit - no cookies or consent required.

 

Looking ahead to 2021

With people spending more of their time online, tolerance for poor user experiences is only getting smaller. At the same time, businesses need to ensure they can convey information quickly to reduce the cognitive load of browsing websites and making purchase decisions.

The good news is that web technologies and design principles are always improving, as you can see from the trends we’ve looked at in this article. With lightweight animations and refined principles like neumorphism, we’re able to convey deeper levels of information without compromising on user experience.

This will be the key overriding design trend in 2021.