Hero

8 webdesign trends in 2022

The design landscape is never boring, with new trends emerging every year. At the dawn of 2022, we asked our designer Janne and design intern Diana to take a look at what you’ll be seeing around the web!

Trend 1: fewer hero images

Instead of using a photograph or illustration in a hero image or landingpage, try using layout, typography, color, and shape to communicate a strong, unique brand identity. Forgoing images also creates a bit of mystery, enticing visitors to find out what else lies beyond the hero section.

Examples below: Humain, SVZ Design

humain.png
svz

Trend 2: interactive fonts

Taking the use of text even further, some designers have been finding creative ways to make their text move and play with the user’s mouse. An easy way to make text interactive is by applying a hover-state change like you would with a button. When employing interactivity onto fonts, it’s important to keep legibility in mind as some people are distracted by moving characters.

A beautiful addition to the previous trend is Kinetic Typography that is rapidly evolving with new techniques in hand. Nowadays, this practice is widely used by web designers in a variety of forms. Once the first go-to for telling a story was animating characters, but now typography is an entirely new ball game.

Moving text can capture attention, establish a tone, highlight important segments, and guide the user’s eyes through a page.

In the coming years, we will see more kinetic typography exploration that serves as a function rather than decoration only.

Examples below: Dillinger, Stellar, Markus

Dillinger
Stellar
markus

Trend 3: oversized typography

Something that goes hand in hand with the trend discussed above is typography of unusual size. At a certain size, words become more of a graphic element than simply part of the copy. This is a versatile technique that can be used in minimalist or maximalist designs just as effectively and can suit many different styles.

Example below: Kieran Baybutt

KieranB

Trend 4: gradients (& grain)

Gradients have been popular for a while now, but with added grain, they create an entirely different effect. A perfect gradient is slick and modern, giving objects a futuristic glow or a shiny, technological feeling. Grain grounds a design, gives it texture, and helps it feel more natural.

Another creative use of gradients this year is issuing them within the borders of buttons and other types of elements.

Due to the emerging use of motion design in websites, gradients can now also be implemented and used in a more complex way. In 2022 they are going to be used as backgrounds, or part of smaller elements. They can be used to visually express your message such as the website below does.

Examples below: Zeus Jones, Webflow No Code Conference

ZeusJones
Webflow

Trend 5: retro (linework, circles & arches)

A trend that feels in some ways both modern and throwback is linework. Designers can use lines to delineate sections, headers, paragraphs, and product galleries, or create a dynamic grid for the entire webpage. Add linework illustrations to bring this style even further. With this type of design, line weight is going to have the biggest impact on the final effect.

This retro effect can be achieved not only with lines but also with pictures cut off in the shape of a circle or an arch. When used right, this style can look chic and elegant.

Examples below: esenin-esenin.tilda.ws, Shaleen Cheah, GCI

arc
https://shaleencheah.com/
gci

Trend 6: more glassmorphism and 3D graphics

A gorgeous trend that actually already started last year is glassmorphism. A combination of transparency, blur, and movement can make elements of pages behave visually like glass. You can use this technique in logos, illustrations, or even full sections.

The key to this style is diffusion, reflection, and shadow, which create the optical illusion. Combined with subtle movement, the glass effect can make a site feel 3D. The diffusion of the “frosted glass” within the image allows you to incorporate transparency into your design without it feeling too visually messy.

Talking about 3D: this is not a new trend, but indeed such a cool one that it will continue to thrive. Big 3D graphics are a clean and very bold way to express the message of your brand.

Examples below: Decimal Chain, Pluto

decimal chain
pluto

Trend 7: imagery multilayers

In recent years, during the design process, there’s been a heavy focus on clean, pixel-perfect, and minimalist designs. So much so, that many designers are discouraged from approaching more visually-complex designs.

Multilayers of content are a way to challenge conventional components that our eyes are used to — like photo galleries and typographical elements that create an immersive experience for telling the website story. This leads to users spending more time exploring a website.

Using the example of General Condition, the common theme of the photos, elegant animation, and black background helps tie everything together, delivering a visually cohesive experience.

Another benefit of this technique is that it makes it easier to put plenty of content in a single section or limited space such as on mobile screens.

generalconditionstudio

Trend 8: dark mode

Dark mode websites are becoming more and more popular. They not only are aesthetically pleasing but also are a great feature showcasing the accessibility of the websites. An example is the big contrast between elements and greater readability. It also makes the website more easily perceived by us. This is due to minimizing the exposure to blue light. Additionally, it saves the battery life of the technology used, so it’s also a more sustainably way of designing.

Examples below: Mocs Media, Apple AirdPods Pro

Mocs Media
airpods pro

One thing's for sure: 2022 will be an interesting and even more creative year for webdesign. The design team at Radikal is very eager to start playing with all of these new elements!

Sources: webflow

By Janne Degryse & Diana Zamfirova

Get in touch

Have a project in mind? Tell us all about it