Web Design Trends for 2022: From ​​Behavioural Design to Retro UI

The world of web design is ever-changing. As a discipline at the cross section of creativity and technology – two industries that move at the speed of light – it’s no surprise that new web design trends, tools and techniques are constantly emerging and evolving.

Popular designs and innovative UX and UI approaches can quickly become tired and overdone, so keeping on top of the latest web design trends is crucial for staying ahead of the curve. Spanning everything from Behavioural Design to Retro UI, the web design trends we’ll see over the coming year are expected to combine tried and tested design elements of the past with the technology of the future, producing some truly exciting new developments. 

So, which popular web design trends will wow us over the next 12 months? Below, our Envato experts give their tips for building a sleek, eye-catching website, as well as their hot takes on the web design trends predicted for 2022…. 

Behavioural design is all about using visual cues to shape user behaviour. Combining creative design with scientific data, it enables designers to better understand how users think to more effectively influence how they behave.

This method is typically used to create apps and products that help users do things such as hit a fitness goal, develop a skill or maintain a daily habit. Behavioural design employs techniques such as scarcity – like when there’s “only 1 room left” on a hotel booking site – and the CAR model – a strategy based around cue, action and reward. 

Many products have adopted behavioural design thinking, including popular meditation app Headspace. The platform’s success is largely down to its ability to keep subscribers active, by encouraging them to meditate every day. Techniques include personalized daily playlists, stats and meditation history, and even allowing users to sync up schedules with “buddies”. Headspace is a great example of a digital product that understands its user’s behaviours and how to motivate them to engage.  

“From knowing when to water your plants to ensuring that you’re washing your hands for at least 20 seconds, in 2022, we can expect continued demand for Behavioural Design in digital products and AI to reinforce behaviours and help people form habits,” explains Viv Wu, Senior Product Designer at Envato. “Gone are the days when people relied solely on calendar alerts and written notes. In this increasingly competitive market, businesses are continuing to gather people’s data and monitor user behaviour to deliver value for users and increase product engagement, but where do we draw the line?” 

As behavioural science can be a powerful tool that shapes people’s choices and behaviour. There are some ethical concerns around the method, but moving forward there’s hope that the development in popularity of behavioural design will see the design industry continue to use it as a positive influence rather than to manipulate users. 

To utilize behavioural design in your own UX or UI, check out this Behaviour Illustration by usedesignspace on Elements or this WoWonder Android Messenger – Mobile Application for WoWonder Social Script on CodeCanyon. 

While gradients may not be a new trend, they’ve certainly come a long way over time. Complex gradients are one of the more recent developments to emerge in video and web design, and are often used to add depth to flat images.

You can see the use of complex gradients in action in this graphic design portfolio, which uses an ethereal mix of orange, pink, purple and blue hues to add warmth and depth. Creative agency Zeus Jones uses a similar effect on its website, with the design fading from monochrome to color.

“Gradients have come a long way in the technical execution of what’s possible,” says Sean Feehan, Envato UX Designer. “This has led to exciting exploration and developments with motion, irregular and multicolour blends among the creative community.” 

To try complex gradients out for yourself, go for something like Gradient Tumblr Theme by themelantic. It’s fully customizable – all you need to do is upload your own background image, pick your combinations of colors and start turning them into gradients. In terms of gradient backgrounds and textures, try this collection of ten super vivid adjustable gradients by Sko4.

Typography is a super important element in UI design, and we’re seeing some typography trends develop. 

Firstly, big type is back and better than ever. 

Featuring big, bold letters designed to make an impact, big typography can make an impressive visual statement in web design – especially when combined with a more minimalistic design or layout. Opting for a bigger size of text can be great for creating a striking first impression, and also for tying other design elements together.

“As design leans towards more minimal off-grid layouts, big typography helps tie it all together and offers simple brand impact,” explains Vail Joy, Envato Content Specialist. 

French department store Galeries Lafayette’s navigation menu features a neutral, bold type – allowing the brand’s large logo to stand out in the center of the homepage. This, paired with vertical cut-out images, illustrated icons, and a monochrome palette, creates a crafty, collage feel.

Incorporate big, bold typography into your’ website designing plan with this Tobel – Modern Furniture Store by Elated-Themes – an eCommerce theme for Elementor. Designed specifically with interior design or furniture stores in mind, it’s a modern and chic take on big type.

On the other end of the typeface spectrum, contemporary serif typefaces are also having a moment. 

Embracing the delicate decorative elements and elegant flourishes distinctive of the traditional serif, contemporary serifs are also being paired with fun, complex gradients for a trendy, modern look. For example, this website from brand strategist Charlie Osborne features a subtle serif style, which is the hero font of the page while also being elegantly understated. 

To incorporate contemporary serif typefaces in your work, this Black Delights – Elegant Serif by mokatype uses loopy ligatures and emanates a sophisticated style. Ideal for quotes or logos, it’s an eye-catching type that will set your designs apart.

Continuing our obsession with all things retro, retro UI is now taking off in web design.

The first retro trend we’re seeing has been coined the “oval and arched border radius”. This style involves cropping images into ovals and arches featuring a thin border set slightly apart from the image, mirroring the archway or oval shape.

“This trend is popular in fashion and portfolio presentation and is a nod to vintage 70’s magazine layout,” says Vail Joy. “It is often combined with earth tones.” 

You can see this trend in action on Farhan Fauzan’s Photo Studio Website. Reminiscent of a free-standing mirror, the arch is used to showcase photography in a subtle and classic way. 

To get the elegant 70s look in your own fashion or lifestyle website, try this JewellryWear – Jewellery Store by energeticthemes Elementor Template Kit featuring a retro layout perfect for eCommerce stores.

The next retro trend making a big comeback in UI is 90s nostalgia. There are lots of things to love about the ‘90s aesthetic – including video games, VHS and glitch effects, sparkling bubble fonts, as well as punk and rave culture. And recently, as many ‘90s trends have resurfaced, we’ve seen the grunge aesthetic reemerge in UI design.

A great example of this is the website of fashion bible, Nylon. The digital publication approaches grunge in a feminine and understated way, with textured backgrounds reminiscent of band posters as well as polaroid-inspired image layouts, collage and hand drawn details.

To go grunge in your web design, try these Vector Grunge Textures by Digital_infusion. This collection of 29 heavy grunge textures promise to roughen up even the most squeaky clean website for an authentic 90s look and feel.

Next year, we’re expecting native desktop apps to continue to shine. These apps are installed on your desktop and accessed natively – think Microsoft Office suite as opposed to online Office 365 –  and many software companies are now opting to create native desktop apps with user experiences comparable to their popular web versions.

But in an increasingly online world, why are companies taking their apps offline? There are actually many benefits of the desktop user experience, according to Envato Product Designer, Raouf Araji. 

“Some companies are opting to create native desktop apps with comparable user experiences to their popular web browser versions,” explains Raouf. “The benefits to the user experience include a boost in performance, ability to integrate with the operating system’s notification system, and improved focus when removed from the distractions of other tabbed windows in a browser.”

A great example of this is web-based graphics editor and prototyping tool – Figma. The native desktop version of the software includes a feature called Figma Mirror, which allows you to view your designs from the Figma desktop app live across all of your iOS devices. There’s also an ongoing debate around Figma vs Sketch – the two most popular UI/UX design tools out there today.

As many of us continue to work from home, a hybrid approach to remote and in-person collaboration is becoming more and more necessary. As a result, in-app communication is required to be more seamless and engaging. 

Product designers are rising to the challenge of improving in-app comms – particularly in the SaaS and technology space where there’s a clear effort to make in-app collaboration both more coherent and more “human”.

To use Figma as an example again, the company has now introduced a “High five” feature for its online whiteboard, FigJam. This enables users working in teams to celebrate achievements together, greet other teammates, or get colleagues’ attention while working on a file. It eventually fades, similar to a raising a hand in video calling software. 

While not necessarily a new trend, 3D design is continuing to flourish in the world of web design. 3D graphics are being increasingly used in UI to enhance web interfaces and add an eye-catching element to websites.  

3D design, which uses computer-modelling software to create objects with a three-dimensional appearance, is also a popular trend in graphic design, typography and digital art. It can be seen everywhere from professional websites to personal portfolios.

“Whilst 3D has been around for some time, it’s now being integrated more seamlessly into designs,” explains ​​John Kappa, Envato Senior Designer. “From vibrant bright and colorful elements through to hyper realistic abstract designs, 3D is here and it’s making things pop!”

Check out some of the work in John’s portfolio – from this box of Aesop bottles to this exploding glitter message – to see how 3D designs can really lift your web design game.

Envato author PixelSquid360 is a master at creating moldable 3D objects. From throwbacks like this cartoon rendered Retro Television, to this chrome Gold Skull, there’s plenty of 3D objects to play with over on Envato Elements.

Last but not least, DIY website builders and page-building tools are increasingly popular in the web design space, helping those with no or limited experience helping those with no or limited experience to start a blog or to get a website up and running. These platforms are shifting to become more accessible and user-friendly, moving towards a no-code approach, says Tuts+ Web Design Editor, Ian Yates.

“In 2022 I’ll be watching the changing landscape of Web Design as a craft; particularly the go-to tools for building a website, getting it online, and earning an income in the process,” explains Ian. “Customer-friendly platforms have drenched the professional web design scene in recent times; freelancers and in-house departments alike are turning more and more in their direction.

Why might this be? As expectations for new websites become more complex, ease-of-use is an obvious reason. Client–designer collaboration is another, plus support, growth, and community around the tools themselves. A quick scroll through #webdesign on TikTok reveals young designers reaching for the no-code-necessary approach all over the place. 

Either way their success has been a while in the making. Website builders are enjoying widely reported funding rounds and IPO-ing everywhere, amounting to a projected 8% compound annual growth in the sector between now and 2027. So at the very least it’s an area worth watching.”

Pro tip: Make sure you choose a builder that passes security tests by the penetration testing services provider thereby offering you maximum security to shield you from rising cybersecurity threats like data breaches and identity thefts! Elementor is a favorite page builder among web designers and non-professionals alike. You can get started with Elementor by accessing a wide selection of template kits for Elementor over on ThemeForest, such as this Influence Marketing template kit by BimberOnline which has an intuitive layout, bright colors and high impact.

And that’s our pick of the top Web Design trends you can expect to see more of in 2022. From the perfect bold font, to UX and UI kits, website templates and themes, Envato Elements has all you need to create a seamless, smooth and aesthetically pleasing user experience. And while you’re here, don’t forget to check out our Graphic Design Trends and Marketing Trends for 2022!