Website design trends of 2020


Web design trends are constantly changing. 2020 has seen a mix of digital design trends and the high-tech side of evolving technology.

Website designers and UX designers follow design trends for a reason — integrating new design trends in products can make them seem fresh and in style to their audience.

Popular web design trends

We know trends come and go year-by-year, but if you want to make your website stand out, here are a few things worth noting.

1. Use of dark mode

Reddit in dark mode

You may have noticed larger companies including light and dark modes to their websites.

Dark mode is a low-light user interface that displays mainly dark surfaces. Not only does this look slightly cooler and slicker, but it also reduces eye strain by adjusting the brightness of the screen.

Including darker aesthetics

Buy To Let Deals incorporating darker aesthetics within their web design

With so many companies offering dark mode, it’s no surprise that more websites are also creating designs with dark aesthetics instead. They are working so well because the dark mode designs are complemented by bright accents. For example, Buy to Let Deals have used darker colours throughout their website with lighter gold and white accents complimenting them.

2. Use of bolder fonts

Many industry leaders are using headlines over imagery to grab attention.

Headlines within the header section of websites are not a new trend (see our homepage, for example). However, many now are using much larger and bolder fonts, in order to put more emphasis on their message and direct the reader on where to look first.  Bolder fonts can also give a minimal and modern feel.

Heavy fonts, such as headings are great for creating a contrast, which may improve readability throughout the page. It also creates a visual hierarchy of elements (see HTML heading tags), which improves content comprehension.

When using a bold font on your website, it’s vital that they aren’t overused. Bold typography can be overpowering if there’s a lot to read. Try to only use it for short pieces of text like headers and sub-headers.

3. Use of gradients

In the past, minimalism has been the predominant website design style; as a result, many sites displayed large amounts of white space and little colour. This can become quite a boring user experience, which has led designers to experiment with different visual styles.

One popular trend that has found itself in the spotlight is gradients. Over the last few years, gradients have started to replace flat colours. They add depth in what would otherwise be boring white space-only layouts and elements.

Grammarly using gradient colours which incorporate their branding

Gradients can be created by using brands colours, as seen by Grammarly, in order to create a fun element on the homepage.

Gradients are versatile too:

  • They can be used for backgrounds.
  • Filters over images and illustrations.
  • Behind functional elements, such as between light text and light images, in order to increase the text’s readability.
  • Be subtle by using muted colours, or loud using bright colours.
Example of a functional gradient on the BBC News website

4. Integrated 3D designs

Example of a 3D website (Les Animals)

Adding depth creates a greater sense of realism within a design. A design which incorporates 3-dimensional depth is an extension from realism and is a trend that we’re seeing a lot more in 2020.

Websites using 3D designs attract the attention of visitors, especially when contrasted against a clean and minimal background or layout.

Preview of Apple's site, presenting a 3D product shot of their Apple Watch

3D designs are not new, however, they’re now becoming more widely used as 3D modelling softwares are becoming more and more well-known.

5. Overlapping layers

Homepage of Ahrefs, showing an example of overlapping layers

Although overlapping layers and elements don’t serve the same effect as 3D design, they do add a sense of depth and dimension to websites. The best thing about it is that it can work with any type of design theme.

You can overlap various elements such as texts, images or videos, backgrounds, boxes, UI elements, and icons. The most difficult part is ensuring that the overlapping elements flow throughout all the website and that it is equally as eye-catching when visiting the website on different devices (i.e. mobiles and tablets).

6. Use of illustrations

Examples of illustrations on Dropbox

Using custom illustrations on your website is an excellent way for you to stand out from the crowd. Especially if you’ve had them created specifically for your band, as it shows that you’re thinking outside of the box; competitors may be able to replicate your colour scheme or your layouts, however, not your unique illustrations.

Digital illustrations have recently become popular over the last couple of years, with larger companies primarily using artistic illustrations rather than photographs (such as Dropbox). This trend has gained attention due to its authenticity and whimsical feel.

It’s important to note that the audience should be able to interpret what the company is trying to say with their visuals (even if it’s in a contemporary manor). Dropbox’s illustrations are a great example of the balance between creativity and their minimalistic and contemporary vision.

You may be familiar with some of these trends, and some might be completely new to you. Hopefully, this post allows you to start thinking about ways to incorporate trends into your own website.

Posted on 23rd May 2020