There will be a significant shift in the way people use the web in the year 2023, as shown by these 21 emerging trends in web design.
Thank you for joining us for another year of web design trends. There’s a lot to look forward to in 2023, from antique typography to the rapidly expanding “no coding” trend.
Take a look at our recent post: 22 web design trends for the year 2023.
In 2022, things weren’t easy. We’re all a little agitated from the constant use of hand sanitizer, uncomfortable Zoom sessions, and the impending fear of the unknown. Although the conditions were difficult at times, we all persevered in our efforts to go ahead. Learning new design abilities has become a common pastime for many of us. Sourdough bread was also on the menu. Adaptation is a learned talent.
For inspiration, we followed the ever-changing digital trends. Trendsdesgine’s Brand Studio team and a few other designers helped us compile a detailed list of web design trends we anticipate seeing until the year 2023. Read on for the full list! In addition to inspiring you, we hope this list will change your perspective on online accessibility.
21 modern web design trends for 2023
Listed below are 21 web design trends that will also assist make the year 2023 a little brighter, as well.
1. Retro fonts
Many ancient items have resurfaced in fashion, only to fall out of favour again and again. Put on your best handlebar moustache and your most comfortable pair of mum jeans. The shelf life of irony is brief.
The popularity of retro typefaces has suffered a similar ebb and flow, and many designs based on antique typography haven’t stood the test of time.
However, there has been a renaissance in retro typography. Fonts aren’t the same as they used to be. Retro typefaces are being reimagined with a combination of style and craftsmanship.
On Spotify’s Carnival promotion page, we find this blend of old and modern. With a little bit of creativity, they give conventional strong typefaces a fresh look and feel. While keeping readability, this is an excellent example of modernising old typefaces.
For the event planning firm Goliath Entertainment, this website has a retro-futuristic feel about it. Bold typeface pays homage to the past while being firmly rooted in the present.
We’re excited to see what inventive typographic reimaginings we’ll see in 2023.
2. Parallax scroll animations
Scrolling in slow motion
Website designers have been using parallax scroll effects for years, and in 2023, we expect to see even more subtle and inventive uses of parallax.
People with vestibular issues should be aware that the illusion of depth and movement may create confusion and dizziness if parallax effects are used excessively. To guarantee that parallax is used in a way that doesn’t affect the user experience, designers are following these guidelines:
Avoid being distracted by the appearance of parallax.
Allowing the user to execute a crucial job should not be complicated.
Minimize the use of parallax effects.
Keep each instance’s parallax movement to a minimum
Restricting parallax effects to a certain region of the screen
Allow users to disable the parallax effect.
Parallax effects are used on Alice Lee’s portfolio site to bring her illustrations to life. The hero’s mobility is restricted to a narrow area, and it’s all within the scope of his abilities. A wonderful example of how to use parallax in a controlled and deliberate manner.
A parallax motion doesn’t have to traverse the screen in a big move to be effective. Also, we’ve seen uses that are more subtle. This effect is so subtle on this Green Meadow website that it’s virtually unnoticeable. Nevertheless, the contrast created by this gradual unmasking of words makes each new block of text stand out.
Using parallax scroll quietly, rather than as a showy effect, is something we’re looking forwards to seeing more of in the next year.
3. The ability to scroll horizontally.
Horizontal scrolling, formerly viewed as a web design faux pas, is making a return.
More site designers are experimenting with horizontal scrolling these days. Breaking from the norm is not a matter of being unusual, but rather a practical method for gradually revealing extraneous information, such as in an image gallery.
In 2023, effective horizontal scroll designers will bear these things in mind:
Don’t make people scroll horizontally; instead, provide options like arrow buttons with descriptive labelling.
Do not conceal horizontal scrolling material with hovers and provide obvious visual clues instead.
A picture gallery is a fantastic example of a material that would benefit from being shown in a horizontal scroll; it would provide a tiny preview and give the viewer the choice to see more or continue scrolling down the page.
Text that has to be read should not be scrolled horizontally if possible.
While designing our own Designer feature page, we took use of a picture’s vast size by using some horizontal scrolling to bring in more important portions of the image to go along with the narrative.
When you click on the home page’s principal button, you’ll be sent to the featured works page, which features an easy-to-read hint next to the button. The featured photographs are highlighted with a well-paced scroll motion that isn’t too lengthy.
When it comes to showcasing huge images of their work, McBride Design employs horizontal scrolling. To make it apparent that the website will scroll horizontally, they provide a clear indication in the bottom right corner.
4. Everywhere, 3D visuals
Since Geocities’ blocky and bevelled edges were replaced with sharper, higher-resolution displays, 3D design has progressed dramatically. We’ve seen a rise in the use of high-quality 3D graphics in web design. Instead of being obtrusive eyesores, they really enhance the user’s overall impression of the application.
Sennep, a design firm, uses 3D components to give its website a sense of depth. All of the design aspects work well together to create a cohesive whole. An illustration of how 3D may create a stronger effect in more minimalist layouts is seen in this example.
A funny and stylish hero animation by Yaya placed 3D at the forefront of their site.
You can see, for instance, a bright layout with plenty of three-dimensional forms and drop shadows as well as gradients and layered components from the presentation software business Pitch below. This design is brought to life by the use of 3D components.
Any website would benefit from the addition of 3D features since they give the page a feeling of depth and individuality.
5. Multimedia-based experiences.
Multimedia online experiences are cropping up all over the place as more people get access to better internet connections. Users benefit from a more complete experience when they can access information in a variety of different media formats, including text, video, and audio.
Constrained multimedia experiences will be key to success in 2023, according to the experts.
When integrating motion and sound, keep things simple. People with cognitive problems may get distracted or overwhelmed by too much going on.
Use a variety of media types to make your material more accessible.
Ensure that all pre-recorded multimedia is provided with closed captions and transcripts.
Include alternative text for photos and more informative language to go along with more complicated images.
Rather than having text displayed within pictures, make sure it’s entirely written in HTML.
The user should be able to play and stop video and motion content by providing a clear “play” button.
In order to make the most of multimedia, educators must take a number of considerations into account. Here are some other resources on video accessibility.
When you visit Nicolas Errera’s website, you’ll find a lovely background film that plays when you click on it, as well as buttons for pausing it. In addition, there is a subtle animation that shows you how far you have progressed in the film.
There are a plethora of applications for multimedia experiences. We can view a screenshot of the Black Yearbook in the image below. To demonstrate what it’s like to be an African American kid in a largely white school, Adrain Bereal and his pals created a crowdfunded book. All videos include easy access to all of the available playback options. At the beginning of the design, a hypnotic melody plays in the background while beautiful cinematography transitions between scenes with a cinematic sense. When you read this introduction, you’ll be eager to discover more about the book and the movement that inspired it.
MSCHF, the notorious business behind several viral web-based drops, will complete off our collection of unusual multimedia instances. With an almost absurdist approach to design, MSCHF’s out-there style crosses the border between brutalism and post-modernism.
6. Experiences using augmented reality
Let’s not forget about the incredible immersive experiences made possible by augmented reality while discussing multimodal encounters (AR). AR (augmented reality) is becoming more than simply a way to search for Pokémon on your smartphone or tablet. The WebXR API and software developed by Wayfair Technologies, for example, have made this domain accessible to a much broader audience.
This “Build & Price a Jeep” website from Jeep makes use of augmented reality. This is a great alternative for those who don’t like going into vehicle dealerships since it’s stress-free and easy. AR is increasingly being used by retail and e-commerce websites to boost sales and give consumers more control over the purchasing process.
7. Grain being the primary emphasis
The individuality of a website may be drained away by using rigid grids and flat blocks of solid colour. Their natural appearance may be enhanced by the use of textured grain.
This website for Studio Gusto shows the beauty of graininess. In contrast to the glossy perfection seen in many online designs, it employs low-fi design components to provide a harsher user experience.
8. A preference for subdued tones
Subdued hues, like grains, may provide a more organic vibe to a design.
The bright colour scheme of Magic Theater Studio’s website is offset with dark green blocks, creating a striking visual contrast. The hand-drawn styled text and pictures are well complemented by these subdued hues. Gritty roughness and light/dark backdrop distortion add to the design’s sense of movement, making it seem more alive than it is.
As you’ll see in Bobby Rowe’s marketing portfolio below, he’s a fan of colour and has a sense of humour about his work. An excellent website design might be difficult to come up with, but Bobby Rowe does just that with this one. There’s a good mix of more subtle and more vibrant hues.
9. It’s all about what people like.
Personalization on the web has come a long way in the last few years. It might be as simple as allowing users to choose between bright and dark mode, or it could be more complex, like Spotify’s bespoke playlists, which are tuned to a user’s preferences.
The internet is becoming less of a passive experience and more user-centred as a result of new design approaches and algorithms. People who use the internet are becoming more aware of what they want and how they want it.
10. A Gaussian haze effect
Images and gradients benefit greatly from Gaussian blur’s ability to create a swirling, soft focus effect. Designers have been employing this effect in increasingly prominent places in web designs for a time now.
On its site, Moment House doesn’t utilise a hero picture at all, instead opting for a colourful gaussian blur. This creates a moody backdrop for the Los Angeles cityscape photograph that follows. Los Angeles is seen through the lens of golden haze and light.
Monograph Communications is surrounded by a gaussian blur. The contrast between the soft red, purple, and blue merging and the crisp, strong type that sits on top of it is striking.
The UX Portfolio The person that I am Tamara uses the same technique to add a gaussian blur to the backdrop of her images.
A gaussian blurry vapour bubble is included in Goodbooks. Despite the fact that the screenshot below doesn’t do this justice, it has the sensation of something that’s concealed behind a white screen. Despite our best efforts, we are never able to truly comprehend what the form is. Makes the call to action to check out their top 12 suggested books stand out much more with this amazing visual anchor.
While gaussian blur has been around since it’s always exciting to see it re-invented by designers for their own purposes.
We’ve witnessed an increase in the use of online experiences to communicate stories among designers. Here, scroll telling comes in: visual storytelling that enhances the plot and draws you into the narrative
The ideal use of scroll telling is when it is used in moderation.
Avoid moving too far from the centre of the room.
The user should be able to play, pause, and stop interactions and gestures using simple playback controls.
Use scroll-telling components to enhance the tale rather than detract from it, rather than obstructing the text.
Small, delicate animations and stunning drawings adorn our own Online Design Art History site, which tells the tale of how art history inspires web design.
12. Dimming the lights
In 2023, more TVs will include a dark mode, so put on AC DC’s “Back in Black.” The dark mode approach is becoming more popular among designers since black serves as the ideal dark background against which to display design components that explode off the screen.
This gorgeous memorial to fashion designer Peter Lindbergh was created by Obys Agency, which used a subtly-textured black backdrop with beautiful serif typography.
13. Cartoon images
Websites used to consist just of text with a few pictures or graphics. With the evolution of the internet, web design has become more personal. The use of cartoon drawings to provide a human touch to websites has grown in popularity.
There are a plethora of resources and talented cartoonists to choose from. Vijay Verma has a beautiful series of bespoke character drawings available on Blush.
Cartoon drawings may be a great source of inspiration and personality for a company. This year, we expect to see an increasing number of characters on websites.
14. Matrix systems in geometry
Grids are easy to use, yet they provide a wide range of options for how they might be used in a design. Geometric grids are becoming more popular as a technique to organise a design in a manner that is both simple and striking.
Hudson Gavin and Martin’s design incorporates both navigational and content features in the form of block elements. A great way to retain your focus is by navigating among the large squares of colour.
When it comes to geometric grids, you don’t have to adhere to a predetermined layout. Flowing, on the other hand, employs an uneven geometric grid based on squares and lines. The square forms are emphasised by thicker lines.
For a lighter touch, we have this geometric grid layout for the cosmetic brand Skin Labs, which has squares and sharp lines.
Geometric grids are essential to every web designer’s toolset because they provide a strong framework and clear presentation.
15. Custom cursors
Most of us are happy with a simple arrow as our cursor, despite how important they are in web design. It’s quite an accomplishment for a designer to transform even the most inconsequential aspect of a website into something visually appealing.
Earlier, we discussed how HGM Legal makes use of geometric grids, but their bold black cursor is as outlandish.
Animation and text combine to create an almost psychedelic look in the Pen Tool’s circular cursor.
Consider Büro’s “morphing circular cursor,” which changes appearance according to the design element it is hovering over when it is used.
16. Using cards to scroll
In recent months, we’ve been pleased to see scrolling cards become a vital feature of designs. They are an excellent method to show content on a website, whether horizontally or vertically.
Ofcina’s website features a vibrant colour palette for its scrolling cards.
There have been card layouts around for a long time, and we appreciate watching them evolve in new ways.
17. Color-less design
Using just a few shades of white allows for a more modern look, and any colour accents stand out even more.
Hovering over the black-and-white images of the Latinx designers changes them to full colour, giving this design for Latinxs Who Design a bright and airy feel.
Micro-interactions, animations, and other dynamic features can make even a simple, flat design interesting.
The User Experience Database has a colour-free style, making it simple to read.
Visually impaired people and others who prefer to read rather than listen to benefit from the inclusion of audio in a website’s design, which reduces accessibility hurdles.
Some of the highlighted pieces in The New York Times have accompanying audio, and it’s very well done.
More audio choices on websites are something we’d want to see in the future so that users have more freedom in how they consume material.
19. print-inspired web design
There has been a renaissance of traditional media as digital technology has replaced many physical artefacts. One of the reasons vinyl records are so popular is because it provides a tangible experience that can’t be replicated on a computer.
If you want to connect with your audience, use layouts that draw inspiration from print. Traditional graphic design components, such as magazine layouts and other aspects, establish a connection to the physical experience of printing on paper.
20. Systems should be designed to provide uniformity and repeatability
Design systems have a lot of sways. Repeatable layouts and linked collections may be created using a CMS to speed up updates and the creation of new websites. Any company may benefit from their utilisation, regardless of whether it’s a little one or a large one.
A number of helpful applications have also been created to streamline design system procedures. Zero height serves as a hub for work management and collaboration. Figma has a variety of design system features, including templates. No matter how big or small your design system is, Webflow’s CMS collection can power it.
21. No code
The absence of code does not imply the total abolition of code. There will always be a need for programmers and developers. The absence of a code indicates that certain areas of knowledge are now available to persons who would otherwise be ineligible. Those having an idea or a dream may use it to make it happen.
Designers may become front-end developers without writing a single line of code. Writers may become web designers. Additionally, small company owners may now enter the online shopping arena. No matter who you are, there is no code that can help you become greater. It eliminates the distinctions between designers and non-designers, as well as between designers and developers. It encourages people to work together.
No code platforms, and design classes that educate about them, have been a joy to witness come to fruition in recent years. 2023 will be a great year for the no-code movement.
In 2023, we have high hopes.
As web design evolves and the no-code movement gains traction, it’s wonderful to watch.
We’re excited to see what you come up with in the next year, too. Submit a new piece of art for consideration in our showcase and don’t forget to join our active and friendly discussion board community.
Happy New Year, and keep up the good work!