Web Design in 2020 – Trends, Tips, and Terrors

web design trends for 2020With 2019 already fading behind us, we’re starting to focus on the shining, golden promise of the new year: 2020.

Whether you’re running a website already, or have made a New Year’s resolution to start one, knowing what’s happening in the world of web design is always a positive. We’re here to prepare you for the hottest trends coming up in 2020, warn you of common mistakes to avoid, and share the best design skills to brush up on ahead of the new year.

We turned to web design experts from a number of industries who could give us a special insight into what the new year will hold for web design. 

And here are the results…

Best Web Design Trends for 2020

  1. UI: Dark Mode
  2. Visual Design: 3D Graphics
  3. Mobile: Minimal Design
  4. Ecommerce: Bright Colors
  5. UX: AI and Voice Interaction
  6. Personalization: Illustrations and Animations
  7. WordPress: Gutenberg 
  8. Content: White Space Frames
  9. Typography: Outlined Typography

Each trend sits in a different category – we’ll go through each one in more detail, including expert quotes and tips.

If you’re looking at our list and wondering how you can apply these trends to your own website, don’t worry. We’re also going to dive into design skills and tools to help you get ready for 2020, plus go through some common design mistakes you should avoid.

The decade is quickly drawing to a close, so we won’t wait any longer – let’s dive straight into the 9 best web design trends for 2020!

Meet the Experts!

ana abrantes

Ana Abrantes,
UI Designer

kevin murray

Kevin Murray,
Ecommerce Solutions Expert

ella johnson

Ella Johnson,
Creative Digital Designer

carol verity mann

Carol Verity Mann,
founder of
Women on the Web

andreas poulos

Andreas Pouros,
CEO of Greenlight Digital

alex vasili

Alex Vasili,
Head of Brand at MVF Global

edd wilson

Edd Wilson,
Senior Technical SEO Specialist

1

Best Design Trend for UI: Dark Mode

dark mode web design mobile
UI stands for user interface, and consists of the visual elements of a digital product. This includes the design of screens, text, buttons, and images – anything that the user sees and interacts with falls under UI.

Dark mode became a widespread design trend in 2019 when it was introduced by Google in many of its apps, from Chrome to YouTube. Dark mode took the internet by storm, and all the signs suggest it will continue to spread in 2020.

dark mode web design twitter
Twitter automatically goes into dark mode when turn it on in your browser settings.

This is a fun feature to play around with on your phone, but why should you consider it as a top web design trend for 2020? Well, Google Chrome and other web browsers have built-in dark mode, so that websites can now automatically switch to dark mode if the user has it switched on.

This only works if the website supports dark mode, though! 

Because so many websites haven’t caught onto dark mode yet, Google Chrome has developed a “Night Eye” feature, which will turn normal websites dark whether they’ve been optimized for it or not.

We recommend staying ahead of the curve and thinking about dark mode when designing your site, rather than leaving it to chance that your site will still look good in forced night mode. YouTube, for example, looks great in dark mode, meaning it still delivers a great user experience:

dark mode web design youtube
YouTube still delivers a great user experience while in dark mode, giving users the choice of what design style suits them best.

However, your site might end up looking like the ugly duckling of the dark mode world – a bit like furniture store IKEA’s website…

web design dark mode ikea
Safe to say, IKEA’s online store could look better in dark mode…
2

Best Design Trend for Visual Design: 3D Graphics

3d web design trend dogstudio example

When we spoke to creative digital designer Ella Johnson, she gave us an insight into how 3D design is on the rise:

“3D rendered design is popular for upping the after effects, making things look really smooth and satisfying. There’s been a big uptake in the use of Cinema 4D to add 3D after effects, and I think this is only set to grow in popularity.”

This makes sense, especially with the rise in virtual reality – it seems people are increasingly seeking out more immersive experiences online.

The move towards 3D graphics suggests a smooth, sleek, and modern vibe, although it will be interesting to see how designers play with this through illustrations and typography, for example.

3d web design welly example
Online store Welly uses 3D visuals combined with interactive motion design to create a unique product view for its customers.
3d web design well motion example

Stepping away from flat design could also have an impact on the color choices we start to see. Ella expanded on this, telling us:

Designers are stepping away from vivid, bright colors and moving more towards muted and pastel colors. This looks especially effective in 3D illustrated artwork where compositions are created with smooth shadows and soft natural lighting, creating a visually pleasing scene.”

web design trend pastel 3d trello
Trello uses a lot of pastel colors alongside its 3D graphics, creating a smooth, bright, modern feel.
3

Best Design Trend for Mobile: Minimal Design

minimal mobile design trend google quiz

Minimalism has been a popular design choice for mobile for a few years now. Still, it’s a reliable and long-lasting trend that has more than proved its worth, and looks set to stay strong through 2020.

The point we want to emphasize here, though, is that minimalist design doesn’t have to mean boring design. You can still use bold, bright colors, overlapping sections, and heavy fonts – whatever suits your branding.

Minimalism is about cutting away any unnecessary excess to create a clear and easy user experience. Make use of white space, and focus on form and function to avoid overwhelming your visitors.

From the Experts

ana abrantes

 

Ana Abrantes says… “This is not a new thing, but still an important one: Mobile first approach should be the focus. In the near future, users will only visit websites on their phone, so it’s important to be prepared for when that day comes.”

 

 

Here’s a great example of minimal design for mobile, from design studio website Yaroflasher:

yaroflasher minimal mobile example
Design studio Yaroflasher’s website is extremely visual and stylish, without feeling cluttered. It uses minimal design to give visitors a clean and easy user experience.

This site uses large, bold fonts, animations, and bright colors contrasted against a black background – and yet it still maintains a clear, minimal design that’s very easy to navigate.

You’ll also notice most mobile apps favor minimal design, such as the example below from Headspace, a popular meditation app. It’s especially important for this app to provide an experience that’s easy to use, as people expect a calm and relaxing experience.

headspace app minimal mobile design
The Headspace app uses minimal design to provide a smooth and accessible user journey, while still engaging its users.

Note the use of icons, color, and illustration – these elements all work together to engage users, while keeping the content simple and easy to digest and navigate.

Minimal design looks great, but there’s another reason for championing this trend in 2020 – the effect it can have on loading speeds.

As always, loading speeds are a critical factor – and this is only set to grow more important in 2020, due to the huge focus on mobile that’s been growing since Google introduced mobile-first indexing back in March 2018.

We talked to Edd Wilson, Senior Technical SEO Specialist at digital marketing agency Impression, who explained how the landscape of search engines and design is changing because of the rise of mobile:

“Google introduced mobile-first indexing in March 2018 – and now, in 2019, the majority of websites in Google’s index will be crawled and viewed from a mobile perspective. Because the majority of devices rely on a 3G/4G network, it’s important to consider that they will want a fast loading website.”

It’s easy to see how mobile is pushing the whole internet to travel lighter, load faster, and deliver instant gratification for users – especially with 5G now raising its head and promising lightning fast speeds for its users.

With this in mind, it’s no surprise that the age of minimal design is coming into its own for mobile devices!

4

Best Design Trend for Ecommerce: Bright Colors

ecommerce web design jackie smith

Once upon a time, not so long ago, ecommerce saw a wave of minimal, modern design with oceans of white space and monochrome color schemes. But that could all change as we burst into 2020 – look out for bold, bright colors popping out at you from online stores.

Bright colors catch attention, create emotive reactions, and can be great motivators, so it’s easy to see why big, loud colors are making a comeback in the ecommerce industry.

Alex Vasili had this to say about the move from minimalism to multicolor in web design:

“We’re seeing a real mash up of styles across the board. The minimalist, refined designs that we have become so used to over the past few years have given the opportunity to a more bold and disruptive aesthetic. This means we are seeing bold patterns and colors being used across the industry in both print and digital.”

colorful ecommerce skull candy 12 moods
colorful ecommerce skull candy gallery
Online store Skullcandy has “12 Moods”, where each month celebrates a different way music makes us feel.
colorful ecommerce skull candy example
Each month has a different color which takes up the whole screen.

If you’re still setting up your brand, then now is the perfect time to choose a strong color scheme for your online store. Pick a main color and a secondary color that compliment each other, and which create a look that matches your brand’s personality.

It may seem old fashioned, but color psychology is extremely useful in finding the right colors to use on your website, so do some research before jumping in. Research suggests that color can increase brand recognition by up to 80%, so it’s worth putting some thought into!

From the Experts

kevin murray

 

Kevin Murray says… “The power and potential of eCommerce is clear. By 2021, the market is expected to hit $4.9 trillion… Consumer habits are evolving every day – they want their shopping experience to be more personalized, faster, and of higher quality than it has been in previous years… In 2020, brands must begin to measure how customers feel.

 

Find out more

  • Is your New Year’s resolution to start your own ecommerce business? Check out our guide How to Sell Online for a helping hand!
  • Read our step-by-step walk through of How to Build an Online Store to create your very own stunning storefront in 2020.

5

Best UX Design Trend: AI and Voice Interaction

ai personalization netflix example
UX stands for user experience, and relates to how the user feels when interacting with a product or service. Fulfilling the user’s needs, solving problems, and creating a positive and satisfying experience is what UX is all about.

Did you know that 65% of 25 to 49 year olds speak to their voice-enabled devices at least once per day? The way that we interact with brands online is changing, with screens no longer a necessity.

Voice search and voice interactions, combined with AI technologies, are revolutionizing the way we navigate the web.

Because of AI, people expect a greater level of personalization and more accurate suggestions for products, music, film, and so on – just look at how Netflix tailors its content to each user based on their choices.

Now, we’re not saying you should start working on your own AI prototypes, or create a competitor to Siri – but there are two key things you can do to welcome this trend in 2020:

1. Optimize your website for voice search

By 2020, 50% of all online searches will be voice searches made using a virtual assistant like Siri or Alexa – so this is as much common sense as staying on trend. Here are some ways to get started:

  • Use natural, conversational language through questions, simple sentences, and contractions like what’s, here’s, and it’s.
  • Make key information easy for Google to find – for example, put contact info on its own page, or even on your homepage!
  • Target long-tail keywords, such as “where’s the best bar in New York?”
  • Mix up long and short form content – try including snappy FAQs at the end of long articles.
  • Focus on page speed – compress images, cut unnecessary code, and remove media-heavy files like adverts and long videos

2. Embrace AI

AI and UX should be a match made in heaven – both are designed to understand human behavior, then offer a useful and natural solution.

Welcoming AI to your website may seem daunting, but there are a couple of fairly simple ways you can start to offer a better user experience through modern tech:

  • Try out a chatbot to provide fast customer service through live chat, which can help out your visitors without draining your own time or resources.
  • Use AI to give visitors a personalized experience. This is a bit more advanced, but you can tailor the content visitors see based on their previous choices or purchases – this is especially great for ecommerce and entertainment sites!

Whether or not you want to try and incorporate AI and voice interactions into your own website, you can expect to see them making waves on the web in 2020.

6

Best Design Trend for Personalization: Illustrations and Animations

web design illustration koox example

Illustrations are hot on most 2020 trend lists – there’s been a noticeable shift away from bland stock photography towards more unique illustrations. Messy, abstract, flowing, and hand-drawn images are growing increasingly popular, as they help to convey personality, positivity, and creativity.

From the Experts

ella johnson

 

Ella Johnson says… “Illustration, particularly vector illustration, is making a comeback – more so than realistic drawing. Because of this, I would expect to see a continued use of patterns and bold colors to enhance images. Vector illustration is great, as it can be used widely and has a handy small file size – and who doesn’t love a little doodle!”

 

 

illustration web design sebastian curi example
Sebastian Curi is an illustrator and animator who works with clients needing graphics for their websites. This style of illustration is appearing more and more on the web.

Animations take that idea one step further to breathe more life into a website, and can be a useful tool for creating a stronger brand image and more engaging experience for your visitors.

Animations and motion graphics can also create a more personalized experience for users, helping them to connect with, remember, and revisit your website. A great example of this is Animal, a Swedish design agency, which uses interactive motion graphics to engage users:

web design trend animation animal example
Design agency Animal’s website uses interactive motion graphics to engage its visitors.
web design trend animation animal interactive example
Visitors can use their cursor to wipe away the text, encouraging engagement with the site's messages.

Be careful though – as our in-house expert Ana Abrantes pointed out:

“A major trend is using big imagery or illustrations with motion, but this can cause a website to be super slow, and break Google’s rules on site speed.” 

To avoid this, Ana recommends optimizing and compressing images to reduce site speed, while keeping the visuals sharp.

7

Best Design Trend for WordPress: Gutenberg

wordpress trend gutenberg

Okay, we know that technically Gutenberg itself isn’t really a web design trend. And yes, it was released in November 2018. But this new WordPress editor is set to be huge for WordPress users in 2020. 

How do we know this? Well, WordPress co-founder Matt Mullenweg’s State of the Word address at November’s WordPress Camp US was pretty focused on Gutenberg – he mentioned it over 70 times in his speech – so we thought we should sit up and listen.

“… this [Gutenberg] is the fundamental foundation that we’re going to build the next decade of WordPress on” – Matt Mullenweg, WordPress co-founder

Gutenberg is a big deal because it re-thinks the whole building and editing process on WordPress. We’ve picked out three Gutenberg features that look hot for WordPress web design in 2020.

Twenty Twenty WordPress Theme

The new default WordPress theme for 2020 – aptly called Twenty Twenty – is designed to make the most out of the Gutenberg editor. Its focus is on flexibility, block-based edits, and customizability. So far it’s been installed over 400,000 times – take a look below, and see if you think this could influence your 2020 style.

wordpress trend twenty twenty theme
WordPress’ new default theme is designed for Gutenberg, and aims to make customization easy for its users.

Gradients

Gutenberg lets you easily add color gradients to buttons without having to know any code. Simply click on the button and choose your colors from the in-house gradient tab that appears – select the design you want, and click update to save your changes!

wordpress web design gutenberg button gradient
It’s now easy to add color effects, including gradients, to your buttons – you don’t even need to code!

Image and Text

Gutenberg also lets you place an image and text side by side. Whereas before this would have caused a lot of headaches and frustration, it’s now super simple to insert the “Media & Text” block to insert images and text next to each other.

wordpress web design gutenberg text and media block
The Media & Text block makes it super easy to insert an image with text alongside.

A similar feature is in the pipeline for buttons, where you can easily format buttons in a row rather than vertically.

These are just three ways that the Gutenberg editor opens up design, especially for those without coding skills. In short, it gives you more design flexibility when using WordPress, and means you can easily customize your website.

Find out more

8

Best Design Trend for Content: White Space Frames

picasso chronicle white space example

Full screen images and parallax scrolling have been popular over the last year, and while we’re sure they’re not about to disappear, there’s a new trend in town that shows a lot of promise – especially for content-heavy sites.

We’re talking about using solid blocks of white space to separate content, draw the eye, and frame images or blocks of text. This is a great way of giving your site a real sense of structure and hierarchy, while bringing a fresh and modern style to the whole page.

Using white space can help to increase comprehension of content by almost 20%, so this is an especially useful design trend for content-heavy sites. One such example is Medium, an online publication site. It uses white space effectively to subtly keep its readers’ attention:

white space web design medium example
The combination of white space, text, and overlapping blocks focuses the reader’s attention, and effectively frames the content.

Apple, Dropbox, and Squarespace are all examples to take a look at for white space inspiration. Using solid sections of white space to frame images and text is a bold, clean way of presenting information and guiding your users’ eye to important highlights.

9

Best Design Trend for Typography: Outlined Fonts

web design typography example dot to dot

Outlined typography is something to keep a keen eye on in the coming year. This might be an unfamiliar term, but it really does what it says on the tin – that is, the outline of the text makes up the letters, rather than the body.

outlined typography trend ella johnson
Outlined typography is stylish and eye-catching, and is thought to be up and coming for 2020. (Image courtesy of Ella Johnson)

We got a tip off from Ella Johnson about her prediction for typography trends in 2020:

We’ve been seeing a lot of outlined typography recently – Huawei and Clarks being two examples – and it’s our strongest trend prediction for 2020. It’s popular in video (particularly music videos), as it’s really effective when you animate.” 

Outlined typography provides an eye-catching way to design headings and add a more layered texture to your site, easily lending itself to 3D effects.

The chance to have your background showing through your text is an interesting dynamic to play with, and creates a very modern feel.

web design typography badass example
This example, from French production company Badass, plays background videos behind its outlined text, which fills with solid pink as you scroll down the page.

Of course, you need to be careful about how you use colors and patterns when paired with outlined typography, as you’re relying on your background to give the text clarity. A plain background and contrasting colors works best, but you can play around with the style – like Badass have in the example above – until you’re happy.

From the Experts

alex vasili

 

Alex Vasili says… “in branding and design I have noticed a general trend towards simple and bold structures, with more creative freedom given to the designs… As traditional brands look to make their identities more usable and dynamic in a digital space… an increasing number of brands are using big, bold, clean typography for their logo, while also giving more room to illustration and color to develop their brand story”

 

9 Mistakes to Avoid in 2020

Now that we’ve shown you what you should be doing in 2020, let’s take a look at some design sins to avoid over the coming year. We asked around our office to find out what common design elements really get on people’s nerves – maybe you’re already guilty of some of them!

There were plenty of responses, but here are the 9 design mistakes that got people most riled up:

  1. Autoplaying media
  2. Hidden contact information
  3. Intrusive pop-ups and adverts that follow you around the page
  4. Infinite scroll
  5. Clunky product pages
  6. Obstructive sticky headers
  7. Slow-loading websites
  8. Online stores without a guest checkout 
  9. Full-screen pop-ups that cover up the whole webpage

Autoplaying media was definitely at the top of the kill list, with one colleague saying: “autoplay videos are a sin and should be banned from existence.” Pretty strong stuff – and a clear sign to stay away from this particular design trend if you want to keep your visitors happy.

For online stores, having a guest checkout option – where you can complete your order without having to sign up – is vitally important. In fact, a recent survey found that 31% of people abandoned their orders because the site wanted them to create an account, making it the second most common reason for cart abandonment!

This list goes to show that not all design trends are good – as with most things, just because something is popular, it doesn’t mean everyone should start copying it. The same goes for your website – think carefully about your design choices, and whether they benefit your users as well as looking cool.

This was an important point emphasized by Carol Verity Mann, who said:

“When design is a ‘trend’, it might actually not be right for the user and the ‘look’ they want to portray… Yes, there are trends, and I wouldn’t say that I ignore them at all. But I won’t do something or use something just because it’s a trend. I would only apply a trend if it’s totally appropriate to the build overall.”

This highlights the importance of thinking about your website, brand, and users first, and working from there to decide on what trends or design tactics to apply. Think about the why before anything else.

Our advice is to:

  • Embrace white space
  • Get feedback from others 
  • If in doubt, leave it out!

Mistakes and accidents happen, but don’t let your website suffer from bad design. Listen to the experts, and try to remember what annoys you when you’re using the web – chances are your own visitors feel the same!

From the Experts

andreas poulos

 

Andreas Pouros says… “On-page surveys, or even exit-surveys, are a great way to get more information about customers and their site experience. On-page surveys allow for the evaluation of particular areas of websites. By learning their thoughts, their feelings towards the site can be assessed and any obstacles that may create a negative experience can be unearthed.”

 

3 Design Skills to Brush Up On In 2020

Maybe you’ve already set yourself goals to achieve next year, and are ready and raring to go. But if you’re looking at our list and wondering where on earth you’re supposed to get started, here’s a list of skills and tools to consider.

1. Animation

Something most people seem to agree on is that animation is going to be big in 2020 – in fact, a recent global design survey found that motion design was the skill most designers wanted to learn in the next two to three years, in order to stay relevant to their field.

So, it makes sense to prepare for 2020 by learning some motion design, or animation skills!

global web design survey
Dribbble’s global design survey found that motion design was the skills most designers wanted to learn in the next two to three years.

The nice thing about motion design is that you can tailor it to suit your preferred medium or existing skills. For example, if you’re all about creating illustrations, you can try your hand at animating your designs.

To get started, take a look at these tools and resources:

  • Adobe Photoshop – it helps to be familiar with this before progressing to Adobe After Effects
  • Adobe After Effects – the top choice for creating motion graphics
  • School of Motion – an online training platform specifically for motion design
  • Lynda.com – an amazing resource full of online courses

2. Illustration

Looking at the anticipated trends for 2020, it’s clear that creativity will continue to thrive and grow in web design. Illustration is likely to play a key part in defining brands, engaging audiences, and shaping page designs, so it’s worth taking seriously.

Start playing around with illustration to find your own style and niche!

3. Coding

It might sound scary, but if you’re just starting out, then learning some code will help you go further. There are different coding “languages” you can learn, but here are the main ones to take a look at:

  • HTML – this stands for HyperText Markup Language, and is used to give websites content and structure
  • CSS – Cascading Style Sheets controls the style and formatting of a web page’s HTML
  • JavaScript – this is one to add to your skill set if you want to stand out from the competition, and take your designs to the next level with interactive elements

Best Design Trends for 2020: The Round-Up

We’ve spoken to the experts, we’ve trawled the internet for glowing examples, and we’ve given you our pick of the hottest web design trends for 2020, from mobile to ecommerce. We even explored common design mistakes to avoid, and design skills to brush up on for 2020.

But after all of that, what we really want to say is: the web design trends of 2020 are in your hands. Will you choose to explore illustrations or 3D graphics? Will you embrace muted colors, or choose vibrant gradients for your website?

The experts have spoken, but the trends of 2020 haven’t been written yet – still, while you decide which ones are right for you, here’s a quick recap of our hottest picks: 

  1. UI: Dark Mode
  2. Visual Design: 3D Graphics
  3. Mobile: Minimal Design
  4. Ecommerce: Bright Colors
  5. UX: AI and Voice Interaction
  6. Personalization: Illustrations and Animations
  7. WordPress: Gutenberg 
  8. Content: White Space Frames
  9. Typography: Outlined Typography

Whether you’re just starting out or are an expert yourself, we hope you’ve enjoyed our breakdown of 2020’s biggest web design trends, and are excited to take on whatever the new year has in store!

Thanks to Our Experts!

ella johnson

 

 

Ella Johnson,
Creative Digital Designer at Armadillo

 

 

carol verity mann

 

 

Carol Verity Mann,
co-owner of We Get Digital and founder of Women on the Web

 

 

andreas poulos

 

 

Andreas Pouros,
CEO at Greenlight Digital

 

 

ana abrantes

 

 

Ana Abrantes,
UI Designer

 

 

edd wilson

 

 

Edd Wilson,
Senior Technical SEO Specialist at Impression

 

 

kevin murray

 

 

Kevin Murray,
Managing Director at Greenlight Commerce

 

 

 

alex vasili

 

 

Alex Vasili,
Head of Brand at MVF Global

 

Leave a comment

Your email address will not be published. Required fields are marked *