🔥 Big news: user interviews have come to Hotjar! Read more

Learn / Guides / UI design guide

Back to guides

5 UI design trends to inspire you in 2023

UI design enhances your site with aesthetic appeal and effortless usability. When done well, it drives traffic, boosts engagement, and increases sales and customer delight.

Last updated

10 Oct 2022

UI plays an important role in the user experience (UX), so it's only natural that you’d want to get inspiration from other companies’ sites and keep an eye on UI design trends as they appear. But it’s easy to get swept up in the trend du jour and lose sight of what your users want and expect from your product. 

We’ve identified five innovative trends taking over the UI design landscape—this guide helps you decide whether they’re worth following, and provides inspiration and a sense of which design trends might work for you.

Discover what UI designs work best for your brand

Use Hotjar's tools to get feedback on trends—and customize your UI design for your users.

You don’t have to follow UI design trends, but they’re popular for a reason: users enjoy the design’s experience or ease-of-use.

Still, be discerning about what trends you follow and which ones you ignore. ‘Bad’ UI design results in confusion and frustration as users try to navigate your site. On the flip side, ‘good’ UI design is user-centric: it’s not only accessible and functional, but also creates an enjoyable—even moving—experience for the user.   

Let’s see how five current UI design trends measure up—and how you can adapt them to serve your users.

1. Modern minimalism

Fresh design—scrubbed clean of extra UI elements like busy images—lets the message shine. Abundant white space gives users’ eyes a break and draws their attention to the copy. With this latest iteration of minimalism, expect bold text, some layers, and subtle details to keep things interesting.

The white space on Modulesystem.design’s site makes hand-drawn squiggles stand out, directing users’ attention to helpful product features

The white space on Modulesystem.design’s site makes hand-drawn squiggles stand out, directing users’ attention to helpful product features

Why it works: minimalism continues to trend because it’s fast-loading and functional. While some claim it’s less aesthetic than other styles, minimalist UI still has a pleasing and familiar feel. Because the designer eliminates distractions, the user can seamlessly experience the product’s most essential ideas and images.

I'm a big fan of what Jared Spool calls ‘invisible design’—an experience so smooth and easy to use, you don't even notice it. The most beautifully designed app could still have a terrible user experience, be confusing to read, inaccessible, or inconsiderate of neurodiverse users.

Kaysie Garza
Content Design Lead, Hotjar

Try this:

Add pops of color to buttons

Not only will this inject your brand’s personality, but it will also make that ‘add to cart’ button more visible to users.

Opt for rounded corners on boxes for a friendly feel

Just don’t overdo it—save this touch for buttons and containers.

Add a ‘mega footer’

Organize links at the bottom of your page to keep things less cluttered above the fold, and use padding above and below the footer contents to improve readability for your user.

💡 Pro tip: if you aren’t sure whether users are making it down to the footer of your site, use Hotjar Heatmaps to monitor scroll patterns. If users abandon mid-scroll, consider analyzing why. Then, make changes to improve the product experience.

#Hotjar Heatmaps show scroll depth and areas where users linger

2. Complex aurora gradients

Aurora gradients, which appear as blurs of colors like the Northern Lights, are more popular than ever. Earlier takes on this trend used a mix of 1–3 colors. Now we’re seeing up to 4–6 colors with a gentle animation effect.

Stripe’s website uses a complex aurora gradient to direct users’ attention

Why it works: aurora gradients enhance the user experience by offering an approachable aesthetic appeal. Plus, they help create a visual flow, directing users’ attention to other UI elements, like text, buttons, images, and icons. You can use a large swath of color in the background of a design, or fill a button with a gradient.

Try this:

Create a high level of contrast

One downside of gradients is that they can interfere with accessibility for users. Not sure what contrast ratios work best? Watch this video ↓ about Web Accessibility Content Guidelines.

Don’t be afraid to customize gradients

Consider straying from bright hues to experiment with a calming pastel palette. Just make sure you use compatible shades, and stick with colors users will associate with your brand identity for a sense of familiarity.

Use gradients sparingly

Overusing gradients can create confusion for the user: they may not know where to look next, and may struggle to locate essential text. Consider using a gradient on only one page or consistently on one type of user interface element, like CTA buttons.

3. Dark mode

Dark mode uses near-black backgrounds to evoke emotion or prevent eye strain. Although dark mode isn’t new, it’s becoming increasingly popular among brands and users.

For example, Linear, an issue-tracking software company, uses dark mode to a pleasing effect: the dark background makes their bold white headline pop. The faint glow of an aurora gradient—yep, they combined trends here—helps differentiate the product image from the background, and guides the user’s eyes down the page. 

Linear’s site uses dark mode to enhance a mostly minimal design.

Why it works: brands are hopping on the dark mode bandwagon—either adopting a design with a strictly dark theme or letting users toggle between modes. Dark mode has been found to decrease eye strain at night, providing relief for users from white and bright sites. Plus, the contrast between a dark background and light text improves accessibility for some users with visual impairments.

Try this:

Avoid using pure black and pure white

Extreme contrast can appear harsh. Dark grey and off-white have better readability and are easier on viewers’ eyes.

Create a clear visual hierarchy for easy navigability

For example, adopt a background that gradually moves through shades of dark grey to direct users’ attention where you need it most. Use a slightly different shade for objects on top; this will create the illusion of depth so they pop for viewers.

Get user input

Give users the chance to share insights, rate their experience, and leave comments about how elements of your site worked for them. Or, ask more specific questions on their dark mode experience by launching a survey on key pages.

4. 3D + animation

Three-dimensional UI design has been around for a while, but it's been gaining traction more recently. The latest 3D iteration combines computer modeling and animation to make objects pop from the screen, creating a highly immersive user experience. 

For example, look at The Originals—a ‘museum’ of Renault’s classic cars: users are welcomed by an explosion of color and shape as the hero image alternates between animated 3D and 2D designs. You then swipe horizontally—another current trend!—to learn more about their cars. As you progress through the storyline about a specific model, you reach a page that lets you view and manipulate a lifelike rendering in 3D. For easier navigation, the cursor is a black circle with the words, “Start the 360° experience.”

On Renault’s The Originals website, users can view a 3D car and interact with it in 360°.

Why it works: 3D design’s futuristic, immersive feel fits right in with the virtual reality movement.When done well, users feel excited and engaged as they explore the site. Expect this trend to take off in ecommerce, especially, because it allows companies to provide a more complete visual of products. Just be cautious: 3D UI elements can quickly get overwhelming or disorienting for the user.

Try this:

Create balance

Complement your design with flat or minimalistic elements to provide a visual resting point for users. Or consider using 3D only on some pages, instead of across the site.

Use a labeled cursor element or clear text with interactive features

To avoid user frustration, the more navigational cues you provide, the better. Users who have to click more than three times to find something will likely bounce.

Provide choice

Some interactive 3D elements can take a while to load. Let users click to activate these UI features or scroll right on past.

💡 Pro tip: don’t be afraid to mix-and-match trends. Use 3D illustrations in an otherwise minimalistic design, or throw in a subtle aurora gradient in dark mode to add depth.

5. Scrollytelling  

Scroll-triggered animation can tell a product’s story in a unique way. As the user scrolls, design elements spring to life—from dynamic text to video and animation. 

Bewegen, a company that sells electric-assist bicycles, uses scrollytelling to describe product features. Images and relevant text fly onto the page as users scroll, bringing their eyes along for the ride. A black button allows users to skip ahead at any time.

As users scroll through Bewegen’s site, images and text fly in to tell a story. This site combines scrollytelling with 3D design to create an even more immersive UI experience.

Why it works: scroll-triggered animation captivates users beyond simple engagement, bringing your product’s story to life.You can control the narrative and how the user experiences your product. Scrollytelling is perfect for telling a brand story, and makes product description and instruction pages more engaging. But take caution: it can quickly turn frustrating for users who aren’t getting their questions answered fast enough, and can cause accessibility issues.

Try this:

Create a clear, simple menu at the top of the page

That way, a user can easily navigate to other parts of the site if they have specific questions.

Pay close attention to cursor and icon design

You can use a big, bold cursor to help orient the user, or animated arrows to show them how to progress through the story.

Allow plenty of white or negative space around text

There’s lots of movement in scrollytelling. Give users’ eyes a break by providing visual breathing room. When in doubt, remember that less is often more.

💡 Pro tip: to improve your user interface (and the user experience), try usability testing. As a UI/UX designer, it’s easy to develop tunnel vision with your own products. Usability testing can be as simple as watching recordings to see how users really interact with your site, ensuring it works as it should. If users get stuck on a particular page, rage click, or abandon the site altogether, it might be time to make some changes to your UI.

Hotjar’s Recordings allow you to see how users experience your product.

It's possible to incorporate trends in your designs, while still placing users at the heart of your UI and user experience. (Hint: you need a deep understanding of how users currently experience your site or product—which you can learn from Hotjar 👋).

Once you determine what your users need, you can draw from UI design trends to meet them where they are on their customer journey—and lead them toward conversions and delight.

Discover what UI designs work best for your brand

Use Hotjar's tools to get feedback on trends—and customize your UI design for your users.

FAQs about UI design trends: