In Web design
UX/UI Design Trends 2022 - read the full article about web design trends 2021, Web design and from Envato on Qualified.One
Youtube Blogger
Hey there! Jen McKinnon here with a fresh look at the UX and UI design trends you’ll be seeing this year. If any of the items featured in today’s video catch your eye, you can find download links in the description below.
This video is brought to you by Envato Elements, a subscription-based library full of all the digital creative assets you need to make your creative projects the best they can be.
From the perfect bold font, to UX wireframe templates, UI design kits, website templates and themes, all you need to create a seamless, smooth and aesthetically pleasing user experience is right here. Check the link in the description for a special offer from the Envato Elements team to get you started. Let’s get into it! First up, behavioural design: a subcategory of design that’s all about how visual cues can shape user behaviour. This trend combines design thinking with science, and enables designers to understand how people think so they can more effectively influence how they behave.
Typically behavioural design is used to keep the user on track with something, whether it’s hitting a fitness goal or maintaining a daily habit. There are lots of techniques employed in this discipline, from scarcity – like when there’s “only 1 room left” on a hotel booking site – to the CAR model – where the user is provided a Cue, they take an Action and then they’re given a Reward.
Many websites and apps use behavioural design, including the meditation app Headspace.
With the simple goal of teaching users how to meditate each and every day, the success of the platform is largely down to how it keeps subscribers active.
This includes a personalised daily playlist, stats on your meditation history, and letting you sync up your schedule with “buddies”.
Often used to add depth to flat design, gradients may not be a new trend, but they’ve come a long way in terms of technical execution.
Complex gradients have emerged as a result of some exciting developments with motion, as well as irregular and multi colour blends.
You can see an example of what we mean in this website for creative agency Zeus Jones. They take it one step further and use gradients to compliment the title narrative. he background fades from monochrome to color as the text sequentially appears on the screen, illustrating that the Zeus Jones agency helps brands go from drab to brilliant.
Try it for yourself with 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 unravelling gradients. In terms of gradient backgrounds and textures, try this collection of ten super vivid adjustable gradients by Sko4.
Typography is essential in UI design, and right now we’re seeing two new type trends. Firstly, big type is back and better than ever. It’s true that large letters can make a bold impact, especially when a design leads towards a more minimal off-grid layout. Opting for a bigger size for your text will help tie it all together.
French department store Galeries Lafayette strips back the navigation menu to a neutral, bold type – while the brands logo looms large in the centre of the homepage.
This, paired with vertical cut-out images, illustrated icons, and a monochrome palette, lend a stylish, collage feel.
Incorporate big, bold typography into your business’ website by using 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.
Then, on the other end of the typeface spectrum there’s contemporary serif typefaces.
Making use of the decorative elements and small, elegant flourishes that are a hallmark of the traditional serif, contemporary serifs, are also being paired with complex gradients like the ones we touched on in the previous trend.
Here’s an example of how the two can work well together from brand strategist Charlie Osborne. This site features a very subtle serif style, making it the hero font of the page. To make use of contemporary serif typefaces in your work, look to an example like Black Delights – Elegant Serif by mokatype. This font uses ligatures - the lines that join letters - to finesse the sophisticated style.
Ideal for quotes or logos, it’s an eye catching take that will set your designs apart.
Our next trend, retro UI, also has a couple of variations. First is something we’re calling “oval and arched border radius”. In a nutshell it involves cropping images into ovals and arches, and sometimes adding the highlight of a thin border set slightly apart from the image, again mirroring the archway or oval shape. Used well, it looks elegant and chic. It’s a trend we’re seeing most often used in fashion websites – often combined with earthy tones, giving a nod to vintage ‘70s magazine layouts.
You can see it 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. Get the look on your own fashion or lifestyle website, with JewellryWear - Jewellery Store by energeticthemes. This Elementor template kit features a creative layout for eCommerce stores.
From chic 70s to 90s grunge, our other throwback UI trend is a nostalgia fest.
There are lots of things to love about the ‘90s. Video games, VHS and glitch aesthetics, sparkling bubble fonts, and the underground music scenes that gave us punk and rave culture. Recently, as many ‘90s trends have reemerged, we’ve seen the grunge aesthetic in UI design.
A great example of this is fashion bible Nylon. The publication’s website does 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 get the grunge look in your page backgrounds, distress your design with Vector Grunge Textures by Digital_infusion. This collection of 29 heavy grunge textures promise to roughen up even the most squeaky clean, bubble gum pop page designs, for an authentic look and feel.
Onto number 5 - a UX trend that’s making a comeback. After falling out of favour, native desktop apps are emerging again.
These apps are installed on your desktop and are accessed natively (think the Microsoft Office suite vs the online versions available with Office 365). Many software companies are opting to create native desktop apps with comparable user experiences to their popular web browser versions.
The benefits to the user experience include a boost in performance, the 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 good 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.
As many of us continue to work from home, we’re looking for a hybrid approach to remote and in-person collaboration. Our next trend, in-app communication, zeros in on this development.
Product designers are rising to the challenge – particularly in the SaaS and technology space where there’s a clear effort to make in-app collaboration both seamless and more “human”.
If we look at Figma again, the tool has now introduced a “High five” feature for its online whiteboard, FigJam. This enables users working in teams to celebrate achievements together, say hi as others log in, or get someone’s attention while you’re both working in the file.
It then eventually fades, working similarly to a raised hand in video calling software.
While not necessarily a new trend, 3D graphics are increasingly being used to enhance web interfaces.
3D design uses computer-modelling software to create objects in three-dimensional space.
Essentially, it makes images more realistic or in the case of abstract design, hyper realistic.
If you want to see how 3D is making things pop, check out some of the work in Envato Senior Designer John Kappa’s portfolio. From a box of Aesop bottles where it feels like you could reach out and grab one, to an exploding glitter message, these perception designs really lift the game.
PixelSquid360 is another master of the 3D object. From throwbacks like the cartoonish Retro Television, to the realistic creation of a British Telephone Box, you can access and download from a portfolio of the author’s work on Envato Elements. There’s plenty to play with.
Last but not least, the go-to tools for building a website, getting it up and running and making sure you’re earning along the way are shifting to customer-friendly platforms.
Why is this? As expectations for new websites become more complex, ease of use is an obvious reason. Simple tooling can also help support designer/client collaboration.
Young people seem to be driving the no-code-necessary approach, which you’ll notice if you do a quick scroll through the #webdesign hashtag on TikTok.
Elementor is a favorite among web designers and non-professionals alike. You can access a heap of template kits for Elementor over on ThemeForest.
For example, the Influence Marketing template kit by BimberOnline has an intuitive layout, and features bright colors for high impact.
And that’s our pick of the top UX and UI trends you can expect to see more of this year.
If this video was helpful, click the like button below so we know to create more videos like this. And, to stay up-to-date, don’t forget to subscribe to the Envato YouTube channel.
Got another trend in mind you think is due to be covered? Let us know what you’d like us to profile next in the comments below, and hit the Envato blog for more trends and tips.
To delve into more trends roundups right now, the thumbnail at the top right of your screen will take you there – or hit the one at the bottom right of your screen to watch the next Envato video selected just for you. See you next time.
Envato: UX/UI Design Trends 2022 - Web design