7 Web Design and UX Trends to Watch Out for in 2022

Tips and Practices

Today’s websites need to offer better and more seamless digital experiences by the second. If your website isn’t optimized for UX and fails at providing seamless digital experiences to your users, it can negatively impact your success. But how can you keep up with your customers’ expectations?

We’d like to discuss seven major web design and UX trends that you should keep an eye on in 2022. Because if you regularly optimize your website, follow UX best practices and stay up to date on impactful web trends, your website can truly shine.

Trend #1 Offer Comfortable Colors and Dark Mode

Due to the pandemic, more people are working remotely and might not go back to working in an office again. We spend hours and hours staring at our computers, having meetings via Zoom and the like instead of in-person, and organizing our social events online. After a day of staring at the screen, it’s not unusual to experience eye strain and fatigue.

Web designers are responding to the “Zoom fatigue” and now use color schemes that are easy on the eye and reduce back web design to do one task at a time. This web design trend already kicked off in 2020 with the popularity of dark mode. Most browsers and mobile devices can now toggle between light and dark modes, so you have to consider what your website design will look like with a dark color scheme in any case.

Users don’t want to have a disrupting color experience when they look at your website. Soft color palettes such as wholesome greens, pastel, blues, warm browns, or light pinks make your website easier to look at and naturally induce calm and relaxation. This website design trend gives hope that designers will be more concerned with comfort and overall user experience instead of focusing on drastic innovations.

Trend #2 Playful Cursors

What if viewing your page was a fun experience? Many modern websites now feature cursors that are playful and customized to one particular site or brand. This trend comes in many variations and can be as simple as changing the shape of the cursor or as complex as coding animations triggered by the cursor.

Introducing playfulness into your website will make your users curious and they can easily spend a couple of minutes exploring the uniqueness of your cursor icon. Having a unique element to your cursor will add another layer to your user’s experience.

Custom cursors are not a new trend, in fact, Myspace introduced them already in the mid-2000s in their profiles. But this is a comeback that brings new geometric shapes and custom coding. Repeating the colors or design of your logo in your cursor can also be a great way to incorporate your branding and engage your users with your brand by playing with the shapes.


Impero shows how you can playfully integrate an unusual cursor. In their case, the yellow circle interacts with the website and lets you mark text. When you scroll over the navigation, you will see how the elements move according to the cursor. Just be careful cause you might end up searching all over the website for easter eggs and joyful ways to use the cursor.

Trend #3 – Use animated illustrations and micro-interactions

Do you remember the times when almost all creative and smashing websites animated with Flash? It was relatively easy to create these animations, and more and more designers filled their sites with fancy animations until it became too much for everyone to bear. Then the animations disappeared, making room for a more minimalist design approach.

Today, hardly any site uses Flash (Adobe ended their support for Flash players in December 2020). However, with the new browser technologies such as HTML5, WebGL, and WebAssembly, web designers and developers can stylishly reintroduce animations into the web.

Tell your story with animated illustrations

Illustrations are well-known and effective design elements that help grab your users’ attention. Add some movement and dynamism to that, and you can enhance this effect a lot. People are attracted to motion. After all, our physical world away from pixels isn’t still either, and movement feels natural to us. Thus, applying motion to your website and illustrations can bring your products and services to life and help you tell meaningful stories. The golden rule here is not to overdo it, so we don’t get into the same situation as in Flash times. Thus, make sure that your website’s performance doesn’t suffer and that your animations don’t overwhelm users.


Species in pieces is a perfect example that shows what’s possible thanks to modern web technologies in the field of animation. The website skillfully uses animations and an appealing approach to educating users about endangered animals on our planet. All of the animals consist of animated shard-like pieces – without the use of images or videos.

Illustrated animations

Create seamless experiences with micro-interactions that blend in

Micro-interactions help you intuitively guide users through your website and give everyday UI interactions a well-rounded feel. You sure have noticed these little animations when you press a button, move the mouse over an image, or scroll through a website. Often, these interactions are so subtle that we aren’t aware of them. However, if these micro-interactions were removed, we’d definitely feel that something was missing. Although the topic appears to be a mere detail, it would be wrong to underestimate the power of subtlety. Micro-interactions can greatly improve your website’s user experience if they integrate seamlessly with your design, user interface, and other animations.


The first thing that catches our eye is that the content of this one-pager from CoverMyMeds runs horizontally. While scrolling, some of the visual elements move slightly, giving the user a sense of liveliness. Also, note the micro-interactions when hovering your mouse over videos, navigation items, and buttons. As pointed out above, subtlety is key. The designers of this website skillfully utilized micro-interactions to create a seamless experience that fits well with the brand and unexpected scrolling direction.

Web design trends 2020: micro-interactions

Trend #4 – Bring real-life experiences to the display

3D graphics are another great way to bring real-world feelings to your website. In contrast to simple 2D images, 3D graphic renderings can, for example, allow users to engage with your products and services in an interactive way, creating an unforgettable experience.

During COVID-19 we experienced a time when we had to change our shopping behavior drastically due to lockdowns and curfews. By giving customers near-real-world experiences with your products, they can regain some of the familiar and missing shopping feelings. Ultimately, you can create something eye-catching and unique with 3D elements, as there is still plenty of room for exploration and growth in this area.

Creating 3D representations of your products or services takes some skill and time. But as you will see shortly in our examples, there are other ways to bring the feeling of 3D to your website.


Plink is a digital payment provider that uses animated 3D graphics to create a modern and unique website design. The consistent and loving use of various animations and other design elements perfectly reflects how the company wants to be perceived by its customers.

Web design trends 2020: 3D renderings

We also want to showcase a second example that follows a different approach. Empress‘s web design uses many quality videos and product photos. Naturally, these elements are 2D. However, as you can see in the following screenshot, the designers skilfully overlay photos with different sharpness to create the illusion of a 3D space. Real or not, what we see here feels like real depth for the human brain.

Web design trends 2020: 3D space

Trend #5 – Expand your user base with inclusive design

Frankly, we don’t think inclusive design merely belongs to the web design and UX trends in 2022 – it should always be considered. As inclusion becomes more and more deserved attention in the physical world, we also have to bring the topic to our websites. We should not ignore certain target groups or groups of people when designing our websites. With inclusive design and accessibility, you not only do the right thing, but you also open up new opportunities for your company and help achieve your goals. Therefore, we recommend that you dive into inclusive design and web accessibility, learn about best practices, and make them an integral part of your website design and development processes.

What’s more, designing for accessibility and inclusion can lead to great solutions and UX design that benefit your entire user base. For example, think of voice search. Voice-assisted technologies not only help people with disabilities but can also ease processes and tasks for everyone. By researching and experimenting with new techniques that make your website more accessible, you can come across new innovative ways of doing things that can give you an advantage in the market.

Trend #6 – Making design decisions through business knowledge

What drives the digital realm? That’s right – it’s data. The collection and analysis of data help us improve our products and services as well as our websites and content. Different design methods and approaches such as design thinking or service design have long required designers to focus on more aspects than just aesthetics. In 2022, we can see that this trend continues, and it’s becoming increasingly important for designers to think a little more like business people. The combination of talent for creating great user experiences and understanding of the company and its users contribute to the creation of human-centered innovations.

Use data to create business strategies and financial models for your website that ensure that your idea creates long-term value. Business thinking also allows designers to see the bigger picture – not just the site but all the touchpoints between the company and its customers. It’s then possible to create seamless and unique experiences and back up design decisions with data. The days when only visual aspects determined the appearance of our websites are long gone. We started to ask questions more often: Why did we design elements of our site in a certain way? Is there a return on investment?

For example, a website owner may ask their designers why they need an inclusive and accessible design. Of course, they know it’s the morally and ethically right thing to do, but they also want to know how their company can benefit from it. Designers with business knowledge can now help decision-makers to understand and recognize the value of inclusive design for all parties. For example, they can research and analyze data and show the opportunities that can be expected from opening up new target groups and markets.

Trend #7 – Storytelling and writing for humans

Valuable content and well-written copy that focuses on people rather than search engines play a vital role and have earned a place among the most important web design and UX trends in 2022. More and more companies understand that text is part of the design and should receive as much attention when it’s created.

Create enticing copy that speaks to your customers

It’s not a secret that good website copy has the power to turn prospects into customers by supporting users in assessing and identifying with products and services. Additionally, text can transport messages that design can’t (and vice versa), and you can make sure the user understands your mission, making your business more attractive and relatable.

Apart from that, we can also witness a more dialogue-like approach to written content. Even the most “boring” industries can spark joy and make their topics more exciting and appealing for their audience. Naturally, enticing copy requires a skilled writer who can work with UX designers to create a smooth interplay between visuals and text.


Mailchimp‘s writers sure know their way around words. The company has a dialogue-like and authentic writing voice that makes it more straightforward for readers to identify with the brand. However, this isn’t a coincidence, and the company has probably spent a lot of time establishing and fine-tuning its writing style and creating a detailed and practical content style guide.

UX trends 2020: conversational copy

Tell stories to create unforgettable experiences with your brand

Storytelling has been part of humanity for millennia and is now a popular buzzword in the marketing industry. But many businesses still struggle with the proper execution.

Good stories don’t happen overnight. They require time, a lot of fine-tuning, and a team of writers and designers who appreciate the importance and value of each other’s skills. Combine design and copy to tell meaningful and exciting stories. Mix text with illustrations, photos, colors, typography, and animations to get your message across. Ultimately, your users will remember your company and product. Keep in mind that people love stories! We want to be part of what is told, and we like to remind us of the emotions they conveyed to us.


On this one-pager, Atlassian skillfully uses storytelling with appealing design, eye-catching illustrations, and good writing to confront the reader with an everyday situation that they can identify with. Only at the end does Atlassian refer to their product (Confluence) as a solution to the conflict that they built up in their story. This example impressively shows how you can sell a product without constantly asking to buy through call-to-actions.


Wrapping up – the 7 major web design and UX trends in 2022

What was your experience with these web design and UX trends for 2022? Are you already working with some of these elements, or are you planning to do so? Hopefully, you’re as excited as we are about how these trends will shape the web and what new achievements we can look forward to in the coming years. We also published a blog post on site search in 2021 that we recommend reading if you want to learn more about this year’s web trends.

We’d love to help you build a unique site search feature with simple design tools. Get in touch with AddSearch today and learn more about how seamlessly you can integrate site search into your website.


Was this helpful?

Share this: