Subscribe to our Newsletter

Get articles, advice and tips about:

You can read more about our privacy policy and how we use your personal data here.

Web Design Trends 2022

Web Design Trends 2022

by Frida Nyvall

Our annual prediction of what will trend in web design 2022 and why.

A Personal Touch

Not long ago, it was mockingly said that all websites looked the same – had the same layout and was using the same font (most often Open Sans).

In 2022, web design will dare to be a little bolder. We predict that websites will take a more personal approach to strengthen their brand and stand out from the crowd by focusing on their individual style.

This can be achieved through using non-traditional and unusual fonts mixed with creative image editing and animations.

Web technologies that make it easier to create forward-thinking designs are for example the possibility to create different blend modes and image filters (read more and see examples of these techniques). Another technology that can be used to enrich typography on websites is the increasing number of variable fonts.

Fonts in Focus

Color Fonts

Color fonts are a recent technology for creative fonts. Unlike normal fonts, color fonts can have multiple colors, textures, opacities as well as gradients. Note that color fonts are not yet supported by all web browsers.

Read more about color fonts at www.colorfonts.wtf.

 

Example of the color font “Gilbert” from Type with Pride

Example of the color font “Gilbert” from Type with Pride.

Animated Text

Create a personal, unique, and creative expression using animated text. Animate whole text sections, for example, rows of texts that move horizontally across the screen.

Example of animated text from Garden Eight.

Example of animated text from Garden Eight.

It is also possible to animate letters (as single elements) along a path easier than before, as browser support for CSS Motion Path is increasing.

An older but still impactful technique is using SVG paths to animate text illustrations, like in the example below:

See the Pen
Script SVG path animation
by Frida Nyvall (@fridanyvall)
on CodePen.


Yet another way of animating text is to animate variable fonts.

Demonstrating changing the custom axis on a variable font

Changing the custom axis "Daffness"

Read more about variable fonts in our blog post “Variable Fonts on the Web”. See how to implement variable fonts in the article “How to Implement Variable Fonts on the Web”.

Colour, Shape & Texture

Bright Colours

Fashion colours tend to influence what colours are currently popular in web design, and this year colours are getting clearer, bolder, and stronger. New technical developments make it possible to better reproduce clear and strong colours on the web. In the future, LAB and LCH colours will be possible to use on websites, making it possible to display a larger range of colours . Currently, browser support for these new colour technologies is limited to the latest version of Safari.

Claymorphism

This year’s “-ism” is called Claymorphism, and aims to create images reminiscent of objects created in 3D from clay. Soft edges, fluffiness, and seemingly inflated objects characterize the style.

Claymorphism example

NFTs, quirky typography, and claymorphism – it doesn’t get more modern than this. Concept by Dolphin Effect, Teheran.

Web developers can use the style library Clay.css to add a bit of claymorphism feel to their websites. Read more about the trend here.

Grainy & Glitchy

Grainy, scratched, and non-perfect images in the 1990s vibe go well with the retro trend, and the ambition to create a more individual and unique expression.

Glitchyimage is a tool for creating glitchy images online. Create images with noise via ffuel.co or cssmatic.

Immersion

The trend to create more realistic online experiences from previous years is still very current. The past years’ experiences of isolation and quarantine have made it important to be able to create commitment and interest even if the user is not present (physically in real life). This has particularly affected the e-commerce industry.

Interactive online Reebok store

Example of interactive online store, Reebok collab collection.

When customers are unable to get to a physical store, it becomes increasingly important to be able to provide the same professional experience online. At the same time, competition in the global e-commerce market is increasing.

One way for companies to stand out from the competition is to offer the same level of customer service and professional experience as in a physical store. Examples would be using digital technology that allows customers to interact with the website to tailor their purchases or take part in interactive product presentations.

Example of customized and personalized products by Rimowa

From a technical perspective, the data visualization tool D3 was trending during the more intensive phases of the pandemic. Now, tools for 3D animation and interaction, such as Three.js seem to gain popularity.

Tags

More posts

EAA get ready for the new law

Get ready for European Accessibility Act, EAA

Web design trends 2024

Web design trends 2024

Baseline logo on old computer

What’s to know about Baseline