Web Design Trends 2022
21 Feb 2022
Web Design Trends 2022
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.
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.
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.
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.
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.
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.
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.