Web Design Trends for 2020
There is a constant need for change and improvement when it comes to web design. Keeping up with trends is important, not only for being one step ahead of the competition but more importantly to be one step closer to the end-users and their requirements and needs.
My colleagues from the design team and I have collaborated, exchanged thoughts and opinions about some upcoming web design trends to keep in mind as we enter 2020.
Our picks are:
- Dark mode/theme
- Involved illustrations
- Bold Typography
- Micro-Interactions
- Voice
- Honorary mention: Accessibility
Dark mode/theme
The trend likely begins with social media giant Twitter that has experimented with dark-theme for android phones back in 2016, and later many other social media platforms and other tech giants followed implementing dark themes (Wikipedia, Facebook’s Messenger, YouTube, Reddit, Gmail, Google Maps, Apple’s Mojave OS, etc).
Dark mode/theme UI is not only important and trending because it is ultra-modern and aesthetically pleasing, but is also easy on the eyes for the users.
The other advantages of dark-themed website designs are:
- It is better for OLED screens — saving power and extending screen lifespans,
- Less sleep disruption,
- Reducing eye fatigue,
- Very importantly — accessibility for people with visual impairments, migraines or other visual disorders.
Dark backgrounds are perfect for making colors stand out on your website and creating truly dynamic designs.
Involved illustrations
While illustrations have been omnipresent on some websites for the past couple of years and there’s a growing trend of having websites with tailored, detailed, and well-executed illustrations and we are positive that the trend is just getting started.
Aesthetic illustrations make your website looking attractive, which is of great significance. However, the real importance of using illustrations is to help you share your message efficiently with the users.
Great Illustrations are a storytelling tool and a great example of how a brand is able to add to people’s lives, to offer a specific service or meet a need. The way to truly connect with your users is through an original and very human story. Designers need to remember when working on abstract graphics to make sure the audience can understand what you are trying to say with the illustration. Too abstract illustrations don’t have much business value and can be considered only as a work of art rather than a functional element that brings a specific business purpose to the user.
Additionally, pairing illustrations with a touch of animation helps to captivate attention and can be used as another way to communicate with your users. Animated illustrations are excellent as a complementary tool to text, and are usually better at illustrating and communicating when used as more subtle and secondary features instead of the main one.
The ultimate goal of utilizing illustrations is to support the message and to craft a strong brand identity.
Bold Typography
A trend coming into 2020 that is indispensable: typography that can be read from across the r̶o̶o̶m̶ Mars. 🙂 Some of the websites of industry leaders have already implemented bold typography and not imagery for the headlines because this is the first thing that grabs users’ attention.
But hero headlines are not at all a new trend. They are like black dresses — never go out of style. The interesting thing about hero headlines is the way they are designed - from simple bold sans serif`s to animated, outlined, bright-colored, even including some illustrated art. Heavy fonts put more visual weight to the message and direct the reader to where they should look first. In terms of usability, is clear that heavy fonts are great for creating contrast (which improves text readability) and visual hierarchy of elements (which improves content comprehension). That’s why bold fonts are so popular among mobile designers.
From an aesthetic point of view, bold fonts also give designs a modern and contemporary feel.
However, keep in mind when using any heavy or bold font, it’s crucial not to overuse it. A few things that you must take into account:
- Bold typography can be overwhelming when there is a lot of text to be read. And the main point of bold typography is to be attractive and captivate attention, not to chase the readers away. That is why bold fonts are best only for short pieces of text or headers/subheaders.
- Never forget about contrast — a heavy font will have a better effect when contrasted against a neutral background.
- Another useful tip is to use simple fonts. When it comes to text, the most important should always be readability. It’s recommended to use Sans Serif fonts because they scale well.
Micro-Interactions
Micro-interactions are events that have one main task and purpose — to amuse the users and to create engaging, welcoming or with other words human interaction with the users.
Micro-interactions have been present on the web for years, for example, Instagram and Twitter are using the heart that pops every time a user clicks on the post.
Lee Poynter, global head of design at Crowd, predicts that they will become the next big thing 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.”
Micro-interactions have the best use not only for aesthetic purposes but also to create some emotions. Create motion for some emotion :)
Some of the benefits of using micro-interactions are:
- Website navigation improvement
- Easier interaction with the website
- Instant and relevant feedback about a completed action to a user
- They encourage liking, sharing, and commenting on your content
- They direct users’ attention
Where are some of the best places to use them?
Swiping
Call to action
Animated Buttons
Downloading
Notifications
Voice Search
Voice search has been around for a while, but now it is gaining more attention. In 2020 we hope we’ll be seeing more of it. Web design for voice search is all about answering the right questions. This trend is a mix of design and SEO research. It’s also about using the right images and adding the correct meta descriptions to them.
Three main reasons why VUI is so important:
- Conversation is a form of communication everyone understands. For some users is simpler to use English (or any other native language) to operate with a system rather than trying to understand any symbology or new terminology (the language of GUI).
- Fast-changing user expectations. According to Statista, 39% of millennials use voice search. This audience is ready for VUI websites.
- Accessibility
Honorary mention: Accessibility
Designing websites for accessibility isn’t exactly a trend; it’s definitely a necessity. No website should avoid optimizations for accessibility at this point, including design aspects like the color choice for color blindness, optimization or screen readers, voice search option and carefully thought out image descriptions. Otherwise speaking, making websites that are welcoming to everybody. This is becoming a real priority in the world of web design for two reasons:
Some website owners and businesses were sued for not providing accessible websites for users with disabilities — across industries like retail, food service, hotels, air travel, and more.
But more importantly, accessibility is crucial for responsible web design and corporate social responsibility. Accessibility and inclusion should be at the forefront of designer and developer’s minds because is a good ROI and marketability, not just trendy and stylish. Web access is not a privilege, it’s a right for everyone!
*If you are interested in web accessibility and UI patterns, this blog is a must-read.
This is our roundup of the hottest website design trends for 2020. Our primary purpose in discussing web design trends is to be inspired and excel in every new project and also hope that will inspire some of you to create effective and eye-catching websites in the coming 2020.
