8 web design trends for 2020

8 web design trends for 2020

We are now entering the “worrying twenties”, as the major Ipsos Trend Obs 2020 study called them. On the menu for the decade: disenchantment, existential distress and the fantasy of the apocalypse. Despite this, web trends continue to evolve. We can certainly see a correlation between the craze for dark mode, the very corporate Pantone color of the year to restore confidence in large institutions and what is happening all around us. Here are the 8 web design trends for 2020 that seem the most promising.


1 – Dark mode

Web design trends for 2020: dark mode is in the spotlight! Beyond the functional benefits, such as increased battery life and low-light settings, dark mode improves the visibility of accent colors. The dimmer appearance is also easier on the eyes. To fully grasp the extent of the comeback of dark mode, we only have to look at what the tech giants are doing.

Tendances design web 2020 - iOS mode sombre
Apple offers its iOS and OS interfaces in dark mode
Tendances design web 2020 - Photoshop mode sombre
Photoshop also offers its users a dark version 
Tendances web design 2020 - Instagram mode sombre
Instagram also offers a dark interface

Some examples of dark mode applied to web design

Minna
Tendances design web 2020 - The Scott
Tendances design web 2020 - Palestinian Film Festival Australia

2 – Pantone Color of the Year 2020

With this strong comeback of dark mode, it is not surprising to see Pantone select “Classic Blue” as the official color for the year 2020. Obviously, this choice does not please everyone and has its detractors. Deemed too corporate or classic, the color is no less captivating and soothing. In these new 20s, where public trust in institutions and the future is increasingly called into question, many want a return to authenticity and empathy.

Tendances design web 2020 - Classic Blue : Pantone Color of the Year 2020
Finoit
Plink

3 – Bright and incandescent colors

After several years of surfing on flat design, brightness and incandescence are making a strong comeback. The dark mode trend is also a way to bring out the light. We’ll see more bold color combinations, used strategically to make concepts stand out. For example, using bright neons on dark backgrounds or highly saturated colors in combination with darker shades to give a luminous feel.

Neon icons
Tendances design web 2020 - Athletics NYC
We cargo
Kaleidoscope lights

4 – Filled and Outlined Typography Combinations

Web Design Trends 2020: Filled and outlined typography combinations (often in the same font) are very effective. The trend offers typography duos with and without interactive features. You can put a title that displays both types of use or display an outline font as a base display and the same filled font when hovering over the word to indicate to users that the element is clickable (or vice versa). The results are very interesting and create a fun typographic effect that you can use in many different ways.

Tendances design web 2020 - Roche Musique
Nuclear Dissent
Summerclub Adoratorio
Van Holtz

5 – Vertical Division

Another web design trend that we have seen growing throughout the year, and that will certainly grow in 2020, is the use of vertical divisions. This trend is used to create two distinct sections of information in the same space. It sometimes allows you to divide the information of the same content into two separate blocks. We also discover a new way to combine the content on one side with a photo on the other, but unlike what we already saw, the photo is now vertical and the block is higher than usual. This way of structuring the content makes your website more attractive and organized.

Tendances design web 2020 - Books make us better
Annual Digest
1017 Gin
Tolv

6 – Layering photos and illustrations

Layering illustrations or graphics over photography creates a memorable visual effect. This collage-like trend is versatile. You can use it to add a touch of drama to an otherwise bland product photo. You can also use it to better communicate complicated or abstract concepts. It’s often seen in the tech or finance industries. It’s a way to personalize your images and add more personality to your websites. To make the most of this trend, make sure to match the style of your illustrations and graphics with your brand’s personality. Their style can influence how people will interpret the photograph. For example, use cartoons for something more playful. Or geometric and detailed illustrations for something more sophisticated.

Tendances design web 2020 - Forwardyou
Nikki Farquharson
Andreea Robescu
Whitespacenepal

7 – Optimized for voice

People’s attention spans are increasingly fleeting. Developers know they need to partner with progressive designers to keep the attention of a distracted audience. Millions of devices are home to intelligent virtual assistants like Siri, Google Now, and Cortana. As a result, more and more people are opting for voice over text. It’s easier to talk to a device than to manually type out requests or inquiries.

It may have started slowly, but the popularity of voice command/input is finally hitting its stride. The following statistics illustrate why voice is one of the biggest web trends for 2020 and beyond.

  • Voice input will be worth over $40 billion by 2022 (Source: OC&C Strategy Consultants).
  • Globally, smart speaker shipments increased nearly 200% in Q3 2018 (Source: Strategy Analytics).
  • 55% of households are expected to own smart speakers by 2022 (Source: OC&C Strategy Consultants).
  • 65% of 25-49 year olds speak to their voice-enabled devices at least once a day (Source: PwC).
  • 61% of 25-64 year olds say they will use their voice devices more in the future (Source: PwC).

The introduction of voice interfaces in traditional businesses remains relatively slow. However, evidence suggests that it is only a matter of time before voice becomes the primary or exclusive input or control option for the masses.


8 – Websites accessible to all

A trend that is extremely important is accessibility. In other words, creating welcoming websites for all is becoming a real priority in the web world. On the one hand, some website owners have to follow government standards for accessible websites for people with functional limitations, such as public bodies, cities, schools, etc. On the other hand, there is naturally a slight increase in responsible web design and corporate social responsibility. People see a good return on investment and good marketing of accessibility, which makes it good advertising.

Here are two examples of websites recently developed by Kryzalid that implement the WCAG 2.1 web accessibility standards.

Commission scolaire de Laval
Cégep de Sorel-Tracy

Kryzalid can help you refresh your website’s graphic interfaces. We can also help you with a complete redesign. Our team of experts is at your disposal to make it happen. Do not hesitate to contact us to find out more.


Sources