Unique web design trends that will dominate 2023

Web Design Trends 

Unique web design trends for 2022

No code 

The last trend we saw in 2021 was no code designing. Keep in mind that no code doesn't mean the complete elimination of code.

There’s no denying that programmers and developers play an essential role. And the no code trend signifies an opening of these areas of expertise to designers and other people who would otherwise have been kept out. No code allows anyone with an idea or vision to create.

By using no code, designers are now front-end developers, writers get to become web designers, and small business owners get to tap into the world of eCommerce. So regardless of what your expertise is, no code empowers you to become something more.

We love how this trend removes the dividing lines between developers, non-designers, and those who only design. We love a great collaboration!

We loved seeing the development of new no code platforms and design courses that included teachings about it in their curriculum in 2021.

Design systems for consistency

Using a CMS to design repeatable layouts and related collections makes updates, edits, and the creation of duplicate websites fast. With the pandemic still raging, it's pretty clear that design systems are a powerful tool for the modern web designer.

So whether you use them on a big scale or on a small one, they are useful for any organization that wants to create and manage its designs.

Additionally, we've also seen some handy apps developed to make design system workflows even more effortless this year. Zero height, for instance, works as a centralized space to manage tasks and collaborate. And Figma offers templates and other design systems tools; lastly, Webflow's CMS collection can be used to power a design system regardless of size. 

Web inspired by print

As digital technology is slowly replacing a lot of physical objects, there has been a resurgence of old media. For example, there's a growing popularity of vinyl albums, and that's all the proof we need that people are drawn towards experiences that has nothing to do with a bunch of zeros and ones.

Web design layouts that use print as inspiration fulfill that inherent desire to connect with something in the real world. Magazine style layouts and other traditional graphic design elements offer the user a link to the tactile experience of print on paper.

Retro fonts

Ever heard the saying 'there's nothing new under the sun? Well, this phrase has been proven true time and time again. Think about it, how many old things have become cool and then uncool again? Wide leg pants, chokers, mom jeans, etc. It's a cycle.

Retro fonts have experienced the same cycles, and unfortunately, many web designs that feature vintage typography have seen a decrease in use.

But just as cycles go, throwback typography has gone through a bit of a resurgence. However, we aren't seeing the same old tired fonts. Instead, we're seeing some form of stylization and a bit of artistry are re-imagining what retro fonts can be.

For example, we saw this merging of old and new on Spotify’s Carnival promotion. Instead of the stale and cliche retro look, they brought new life into traditional bold fonts with a bit of experimentation. This web design is an excellent example of how a modern and cool spin on conventional fonts can have breathtaking results while maintaining legibility.

Another great example is the retro-futurism design on this website for the event planning company Goliath Entertainment. The bold typography is a clear nod to the past while still feeling very modern.

As 2022 unfolds, we can't wait to see more creative typographic re-imagining.

Parallax scroll animations

Who doesn't love a good parallax scroll effect? These trendy animations have been popular for years, and in 2022, we hope to see more creative but subtle explorations of what can be achieved with parallax.

Keep in mind that too much movement in parallax effects can be harmful to some individuals who suffer certain vestibular disorders. This is because the illusion of depth and movement can cause them to become dizzy or disoriented.

We’ve gathered a few guidelines that we’ve seen more and more designers implementing to ensure they minimally incorporate parallax and reduce any incidences of harm:

Avoid focusing too much on the parallax effects; otherwise, they distract from the critical information
Don’t complicate things by making it harder for the user to complete an important task
Minimize the number of parallax effects
Reduce the amount of parallax movement within each instance
Restricting parallax effects to a small area of the screen
Make sure to include an option for users to switch off the parallax effects

Take a look at this Alice Lee’s portfolio site. They used parallax effects that respond to mouse position to bring her illustration to life. The movement is slight and contained within the bounds of the significant image. This method ticks most of the boxes on the list we've written above; it has constraint and intention.

Remember that not every parallax animation has to make grand gestures across the screen. We’ve seen an increase in more subtle applications. Take this web design for Green Meadow, for example; if you're not paying attention, you could almost miss the effect entirely.

The good thing is that this gentle unveiling of text creates enough contrast to draw focus to each block of text as it comes up. Next year we hope to see parallax scroll used subtly, not for flashy effect but as a tool to highlight and emphasize significant bits of content.

Horizontal scrolling

A few years ago, horizontal scrolling was regarded as a web design faux-pas, but in 2021 we saw horizontal scrolling making a comeback.

We're starting to see more web designers embracing and experimenting with horizontal scroll. The best use of this style is when designers break the pattern as a practical way to disclose secondary information progressively and not for the sake of being different. It's more or less like an image gallery.

If you want to employ horizontal scroll successfully in 2022 and beyond, keep in mind these considerations:

Avoid making users navigate through horizontal content. Make sure you allow the user alternate ways to navigate; for example, you can make use of arrow buttons with clear labels.
Make use of clear visual cues to indicate where content uses horizontal scroll, and avoid hiding these cues behind hovers.
Give enough thought to what content would benefit from being displayed in a horizontal scroll. For instance, a photo gallery is a good contender as a horizontal scroll because it shows users a small preview and allows them the option to view more or keep moving down the page.
Don't use horizontal scroll for text intended for the user to read.

You can implement a horizontal scroll on a feature page by using it in small amounts to zoom in on a large image. This will show more relevant bits of the image at a bigger size to accompany the applicable content.

On the Momento Design Studios home page, they've included a clear cue next to the primary button that also acts as a link. It also slowly slides the user over to the featured works on click. We like how the scroll motion is well-paced and not too long, allowing the featured images to shine.

Our last example is the McBride Design which uses a horizontal scroll to showcase large photos of their work without occupying a lot of space on the page. The site also includes a clear indicator in the bottom right that sets the expectation that the page will scroll horizontally.

3D visuals

Ah, 3D, every designer's new love! With the advancement of technology and the popularity of higher resolution screens, 3D design has come a long way from the chunky blocky and beveled edges of the past.

More and more, we've been noticing high-quality 3D visuals blended seamlessly into web designs. So instead of being offensively distracting, they're adding to an overall positive user experience. 3D elements add a sense of dimensionality and uniqueness to any webpage.

Look at Sennep; for example, this creative agency sprinkles a dash of depth with 3D elements throughout their website. We particularly like the seamless harmony between all of the design elements. The website is an excellent example of how 3D can make a big impression in more minimalist layouts.

In this example from Yaya, we can clearly see how they used 3D at the front and center of their homepage. This excellent and quirky illustration depicts a person interacting with a futuristic manufacturing machine.

And below, Pitch, a presentation software company, used a colorful layout with a sufficient amount of three-dimensional shapes, gradients, layered elements, and drop shadows.

Multimedia experiences

Multimedia web experiences are popping up everywhere, mainly because most people now have access to faster internet speeds. This has enabled designers to bring together text, video, audio, and visuals for a rich user experience.

Successful designs will need to incorporate the following constraints with multimedia experiences:

Simplicity is king and needs to be prioritized. For instance, it's better not to have too many things going on as it can be overwhelming or distracting to people with cognitive disorders.

Make use of different media formats thoughtfully to maximize the easy accessibility of content.
Make use of closed captioning and transcripts for all pre-recorded multimedia.


Ensuring that alt text for images is included and accompanying complex images with longer descriptive text.
Use HTML to make all text rather than render inside images.

Stay clear of autoplaying video or motion content: instead, provide a precise "play" button that gives the user an option to play and pause the content.

One thing is clear, effectively using multimedia and ensuring accessibly comes with a responsibility to address various factors. Take a look at some of these resources on video accessibility.

Check out Nicolas Errera’s site. It includes playback controls for a beautiful background video, meaning it plays on click and can also be paused. The site also incorporates a subtle animation that indicates how far into the video you are.

The great thing about multimedia experiences is that they work in so many different areas. Take our example below. This snapshot is from Black Yearbook, a crowdfunded book put together by Adraint Bereal and his friends. The book shows what it's like to be an African American student attending predominantly white schools.

The site has full playback controls that are clearly visible on all videos. Additionally, there are beautifully shot cinematography cuts from one scene to the next at the beginning of the design and a hypnotic soundtrack playing in the background. It gives the feeling of a movie trailer which will likely draw the website visitor in and keep them curious enough to want to know more. 

If you're more inclined to do something out of the ordinary, the MSCHF is a perfect example.
The infamous company sticks to an out-there design that straddles the line of brutalism. It has an almost absurdist design that combines stark typography, SMS text messages, and other elements.

Augmented reality (AR) experiences

Relatively new in the design world is AR. As a part of multimedia experiences, AR has come a long way from games like Grand Theft Auto and Pokémon. Several emerging technologies like the WebXR API and software made by Wayfair Technologies have opened this realm up for almost everybody.

Jeep, for example, impressively uses AR on its “Build & Price a Jeep” web page. If you hate stepping foot into car dealerships, this AR experience makes it a more manageable and pressure-free experience. More and more eCommerce and retail websites are realizing the power of AR and are using it to help sell their products and empower potential customers in the buying process.

A focus on grain

Static grids and flat chunky blocks of solid color tend to suck the personality out of a web design. Fortunately, adding a bit of grainy textures has a softening effect and can give the design a more natural feel.

Take this design from Studio Gusto, for example. The site uses lo-fi design elements for a bit of an edge that feels more natural than the smooth perfection that's commonplace in many web designs. In fact, the graininess adds a certain level of beauty to the overall design.

A focus on muted colors

Sometimes less is more, and just like grains can add a natural feel to a design, so can muted colors.‍

Here Magic Theater Studio uses a light color palette, accompanied by dark blocks of color. This pattern makes for a pleasant distinct contrast between sections of this web design. The muted colors present a perfect backdrop to the hand-drawn styled illustrations and text. In the background, we noticed a slightly buzzing grain that's almost invisible and a subtle distortion to the light and dark backgrounds, giving the design an authentic, almost alive look.

Another example we felt necessary to discuss is this marketing portfolio from Bobby Rowe. It is a celebration of color and features funny but informative writing about the work he does. Seasoned designers know how hard it can be to create a web design that's well-rounded in its awesomeness, but for us, Bobby Rowe did an excellent job of it with this web design. It has a nice variety of subdued and bold colors.

Designs based on preference

Boy, are we glad that web development has got so many personalized offerings for users now. Gone are the days where every website looked almost identical. Nowadays, you can have different elements like uniquely-tailored designs, a toggle between dark/light mode, and other ways of changing a site's appearance and navigation.

Developments in software, algorithms, and especially new design practices have made the internet much more exciting. The web is now more interactive, drawing away from the passive user experience of the past. We hope that the future will bring even more of a focus on meeting the tastes, wants, and needs of people navigating through websites.

Gaussian blur

Gaussian blur is popular for many reasons, one of them being that it's excellent for providing a swirl of soft focus to gradients and images. While this effect has been around for a while, we saw designers using this in more prominent spaces in web designs in 2021.

Look at how Moment House utilized gaussian blur on their homepage. Instead of starting with a hero image, they chose a pleasing gaussian blur of color, giving an atmospheric feel and blends seamlessly into the Los Angeles cityscape photo that follows it. It perfectly radiates the lens of golden light and haze that the city is usually viewed through.

On Monograph Communication’s website, we see gaussian bur used in the background in a soft blend of red, purple, and blue. The effect is striking and provides a nice contrast between the straight lines and bold typography that overlays it.

In the following example below, I am Tamara takes the same approach on the UX portfolio by throwing a bit of gaussian blur into the background.

Lastly, Goodbooks has used the integration of a vapor-like bubble and the gaussian blur. The effect has stunning results making it feel like something that's hidden behind a white screen. The shape shifts and revolves, but we never fully see what it is. This is such a good visual anchor and draws attention to the call to action below it to check out their top recommended books.

We're pretty pleased to see how new designers are twisting the gaussian blur into something new and exciting.

Scrollytelling

Storytelling is as old as time itself, and in design, we've seen a growing trend in designers telling stories through web experiences in the form of visual storytelling or scrollytelling. The purpose is to heighten the story visually in a way that hooks users into its narrative.

To use scrollytelling in design effectively, the following tips should be implemented:

Utilize only a tiny area for motion.
Provide interactions only on the user's terms, so things like obvious playback controls to play / pause/stop interactions and motions are a must.
Ensure that any scrollytelling elements help to emphasize the story rather than distracting from important text.

Dark mode

Dark mode is back with a band, so cue up AC DC's "Back in Black" because of dark mode. In 2021 we saw more designers embracing the dark mode aesthetic. Mainly the black provides the perfect dark backdrop to make design elements pop from the screen.

Obys Agency created a beautiful tribute to fashion designer Peter Lindbergh, putting together a subtly textured black background with a beautiful serif typeface in the example below. So if black is your thing, don't be scared to go dark.

Cartoon illustrations

Not so long ago, websites were just a bunch of text with a few images and graphics. Thankfully, web design has evolved, with designers now creating work that connects with people more personally.

In 2021, cartoon illustrations were quite popular and transformed websites, giving them a bit of humanity. There are several sources out there from brilliant artists designing fantastic cartoon illustrations. Cartoon illustrations have so much to offer in terms of creativity and personalizing a brand.

We found Blush’s platform to be a great example of how custom character illustrations can be tastefully used.

We hope that we'll see a growing cast of characters throughout web designs in the coming year going forward.

Geometric grids

Simplistic but with a lot of flexibility, geometric grids can be integrated into a design. We saw geometric grids gaining traction in 2021. They are a great way to structure a layout, offering a clean and bold finished look.

Hudson Gavin and Martin use blocks both for content as well as navigational elements. We particularly love the big squares of color that are fun to navigate through and work so well in keeping the user's attention.

Keep in mind that geometric grids don’t always have to be in a uniform arrangement. Look at the Flowmingo website; they use a more asymmetrical geometric grid in conjunction with squares and lines as the foundation of their layout. The thicker-weighted lines emphasize the square shapes throughout.

If you love a bit of a lighter touch, this lovely arrangement of crisp lines and squares in this geometric grid layout for the cosmetic company Skin Labs is a great example.

Every designer should have geometric grids in their arsenal of tools. They give the site a solid structure and offer a straightforward presentation.

Custom cursors

Probably one of the most underutilized aspects of web design is cursors. Most content boosts a plain and boring arrow. So it's a pleasant surprise when a designer takes the extra step and takes such an insignificant part of a website and turns it into something remarkable. In our books, this is quite an achievement.

In the Hudson Gavin and Martin example above, we just talked about how they implemented geometric grids. On the same design, we see that they also have this off-the-wall bold black cursor.

Another perfect example is the Pen Tool website which takes their circular cursor one step further and includes animation and text blending together, resulting in an almost psychedelic effect.

You can also check out this morphing circular cursor from Büro. It changes its appearance depending on what design element it’s hovering over.

We really hope to see more original and unique takes on what a cursor can be.