Web Design Trends For 2022

You know, the thing with design trend articles is the same as with horoscopes: The more general you write the more likely it is that more of the predicted things will actually happen and be true to more people. But still, people read them every year and if you'd ask me: They're somehow fun and nobody gets hurt. So, this year I'm trying this, too. Have fun reading. :)

Color of The Year 2022

Screenshot pantone.com Very Peri, Color of the year 2022

Let's begin with something, that others define: The color of the year. Every December the people at Pantone announce what they think will be the defining color of the coming year. Usually that is one color (or sometimes even two) from their already existing color scheme. This year however they created a new color: Very Peri - or PANTONE 17-3938 Very Peri, to be exact. My browser tells me that the hex code would be #6868ac - which is a blue that's rather violet. Here's what Pantone says about the color

As we move into a world of unprecedented change, the selection of PANTONE 17-3938 Very Peri brings a novel perspective and vision of the trusted and beloved blue color family, encompassing the qualities of the blues, yet at the same time with its violet red undertone, PANTONE 17-3938 Very Peri displays a spiritly, joyous attitude and dynamic presence that encourage courageous creativity and imaginative expressions.

Well, that's too much text for a fortune cookie.

And for some reason when I'm looking at Pantone's presentation I'm somehow reminded of the early 2000s. Which brings me almost seamlessly to my next trend

Y2K Asthetics

While not being entirely linked to next year - I've seen people again wearing these Buffalo boots in Berlin this year - I guess that this is something that's only speeding up now.

This design trend would be best described by crude interfaces, using bubblegum pinks and blues with a somewhat metallic appearance. A good example for this would be the landing page for Shopify's Hydrogen Framework.

Screenshot of Shopify's Hydrogen Framework

As I said before it's not really a new trend for next year but recently designs like this pop up more and more.

“Gradients are back every year. And next year will certainly be no exception.”

Gradients, Gradients And Even More Gradients

As you might have guessed gradients will be a thing in 2022, too. And they've never been truly gone. After all they're a part of nature. But the new thing are grainy gradients - meaning that you'll add noise to your gradients. In most cases this would be achieved by combining gradients using SVG noise. An introduction to this can be found over at CSS-Tricks. Another good example for this is the just recently launched Open Pops by Adam Argyle.

Screenshot of grainy gradients on Open Props

Speaking of gradients: There's also a trend to add more dimension to designs using gradients, for example the original proposal for Microsoft's Emoji redesign, which sadly will not be the final design.

Typography

In terms of typography we will see a lot more bold & experimental fonts. Again this is not entirely new, since this trend has been around a few months now. But I feel that this trend only gathers more traction with the still ongoing rise of variable fonts. Example typefaces for this are Right Gothic, Astronef Super and Champ.

Screenshot of Niccolo Miranda's Portfolio

Screenshot of The Flat Head

Another way to set your typography is to use a rather readable sans serif typeface (maybe even system fonts) for the main text and UI combined with large serif fonts, like I did here on Elevenfour. I chose to set text & UI in Inter without preloading it, so if Inter was not installed on the readers device a system font would be used instead. For headlines and in some special cases I use EB Garamond to give a little extra to the typographic design.

Typography used on Elevenfour, Version 4 (Titan) - Screenshot

But no worries: You can still use Helvetica and call it a day - there's really nothing wrong about that.

Border Radius

Like it or hate it: border radius - or rounded borders - makes a huge comeback. The Flat Design trend (started in the early to mid 2010s) almost entirely got rid of rounded borders but they're back. And I'd say it's here to stay (for a while). Apple started it with macOS Big Sur on Desktop (it's been around on iOS for a little while), Google followed with Material You and now even Microsoft followed with Windows 11.

Big Sur - Border Radius

“User Prefered” CSS or Media Features

User preferred CSS means that the website or app can adapt to a setting that a user set on operating system level. Parts of this are around for a little while. Some people know this from the “Dark Mode feature” for websites, introduced by Apple in 2018 when presenting macOS Mojave. The CSS could look something like this:

Code
body {
    background-color: #fefefe;
    color: #222;
    @media (prefers-color-scheme: dark) {
        background-color: #222;
        color: #fefefe;
    }
}

But that's just the tip of the iceberg.

Other media features are already here or planned to be implemented. As always it depends on the browser you're using - and we're not talking about Internet Explorer. Additionally to prefers-color-scheme there are prefers-reduced-motion (good browser support), prefers-contrast (ok browser support - it's behind a flag in Firefox and not available in Samsung Internet), prefers-reduced-data (planned - sadly not yet available).

Once this was fully implemented we will see this on more and more websites and ultimately give users control about how websites might look and work based on their settings in their OS - no need for extra settings on the website or app.

The Personal Website

Listen, I'm not here to tell you social networks have become a mess (looking at you Meta, aka Facebook, Instagram). But one thing is clear: If you want your audience to be able to actually find you and your content - be it, articles, media or whatever else and a have a little more control: You need a website. And through the recent months and years more and more people realize that a website would be a good thing to have. That is unless you want your content to be hidden behind some obscure algorithms or an artificially limited audience until you pay to reach more people - but although you paid, you again wouldn’t reach everyone who might be interested. And all of that doesn't mean that you should instantly leave social media. There are other, better reasons to do that, should you want to.

Your website is the little corner of the internet that you can own - as long as you wish.


Design trends can shape everything from how we create interfaces or packaging to how we perceive the world. They can rise quickly but can also vanish as quick as they came. So it might be best advice to be aware of what you create and even more important why you do. The most trendy design is useless if it wasn't designed to serve some kind of purpose or doesn't reach the expactations that stakeholders might have set. What's even more important: Have some fun when designing.

Are there some trends that you would have added to this list? Let us know in the comments below.

And if you have been: Thank you for reading.