Web designing trends to be followed in 2021.
1. Retro fonts
We’ve seen many old things become cool again, and then in turn become even more uncool. Think handlebar mustaches and mom jeans. Irony has a short shelf life.
Retro fonts have experienced this same ebb and flow in their popularity, and many designs featuring vintage typography haven’t aged well.
However, throwback typography has gone through a bit of a resurgence. We’re not seeing the same tired fonts. Rather, stylization and a bit of artistry are reimagining what retro fonts can be.
We see this merging of old and new on the page for Spotify’s Carnival promotion. Instead of feeling stale and cliche, they breathe new life into traditional bold fonts with a bit of experimentation. This is a good example of taking traditional fonts and giving them a bit of a cool and modern spin, while maintaining legibility.
2. Parallax scroll animations
Parallax scroll effects have been a trend in website design for years, and in 2021 we hope to see more subtle and creative explorations of what can be accomplished with parallax.
Remember that too much movement in parallax effects can be harmful to people with vestibular disorders because the illusion of depth and movement can cause disorientation and dizziness. Here are some guidelines we see more designers taking into account to ensure they incorporate parallax minimally and without causing harm:
Don’t let parallax effects distract from important information
Don’t make it harder for the user to complete an important task
Keep the number of parallax effects to a minimum
Minimize the amount of parallax movement within each instance
Constraining parallax effects within a small area of the screen
Include an option for users to turn off parallax effects
3. Horizontal scrolling
Previously regarded as a web design faux-pas, horizontal scroll is having a comeback.
We’re seeing more web designers continuing to experiment with horizontal scroll. Those who do it best break the pattern not for the sake of being different but as a practical way to disclose secondary information progressively, like in an image gallery.
Designers employing horizontal scroll successfully in 2021 will keep in mind these considerations:
Don’t force users to navigate through horizontal content: allow alternate ways to navigate, like arrow buttons with clear labels
Use clear visual cues to indicate where content uses horizontal scroll, and don’t hide these cues behind hovers
Be thoughtful about what content would benefit from being displayed in a horizontal scroll — a photo gallery is a good contender as horizontal scroll would show users a small preview, and allow them the option to view more or keep moving down the page
Avoid requiring horizontal scroll for text that needs to be read
4. 3D visuals everywhere
With the advent of higher resolution screens, 3D design has come a long way from the blocky and beveled edges of Geocities. We’ve been seeing high-quality 3D visuals weaved seamlessly into web designs. Instead of being garish distractions, they’re adding to the overall user experience.
The creative agency Sennep throws in dashes of depth with 3D elements throughout their website. There’s a nice sense of harmony here between all of the design elements. This is a perfect example of how in more minimalist layouts, 3D can make an ever bigger impression.
5. Multimedia experiences
With most people having access to faster internet speeds multimedia web experiences are popping up everywhere. Bringing together visuals, text, video, and audio makes for a rich user experience.
Successful designs in 2021 will use constraint with multimedia experiences:
Prioritize simplicity, like when combining motion and audio. Too much going on can be distracting or overwhelming to people with cognitive disorders.
Use different media formats thoughtfully as a way to maximize accessibility of content.
Include closed captioning and transcripts for all pre-recorded multimedia.
Include alt text for images, and accompany complex images with longer descriptive text.
Ensure that all text is made with HTML rather than rendered inside images.
Avoid autoplaying video or motion content: instead, provide a clear “play” button that affords the user the option to play and pause the content.
6. Augmented reality (AR) experiences
And with multimedia experiences, let’s not forget all of the amazing immersive experiences using augmented reality (AR). AR means more now than just hunting for Pokémon on your Apple or Android mobile device. New technologies like the WebXR API and software made by Wayfair Technologies have opened this realm up for almost everybody.
Jeep utilizes AR for this “Build & Price a Jeep” page. For those who hate stepping foot into car dealerships, this makes for a breezy and pressure free experience. More retail and ecommerce websites are tapping into the power of AR to help sell their products, and empower potential customers in the buying process.
7. A focus on grain
Rigid grids and flat blocks of solid color can really drain the personality from a web design. Grainy textures can give them a more natural feel.
We see the beauty of graininess in this website for Studio Gusto. It uses lo-fi design elements for a rougher user experience that feels more natural than the slick perfection that’s commonplace in many web designs.
8. A focus on muted colors
Just like grains can give a design a more natural feel, so can subdued colors.
Magic Theater Studio, uses a light color palette, along with dark blocks of green, making for a distinct contrast between sections of this web design. These muted colors are the perfect backdrop to the hand-drawn styled text and illustrations. In the background, there’s a slightly buzzing grain that’s almost indiscernible, and a subtle distortion to the light and dark backgrounds, making the design feel very much alive.
9. Designs based on preference
Web development has made great strides in offering more personalized experiences. This can be anything from including a toggle between dark/light mode and other ways of changing a site’s appearance and navigation to offering content custom-tailored to one’s taste like the custom playlists generated by Spotify.
New design practices and algorithms are making the internet less of a passive user experience and more user-centered. The future will bring even more of a focus on meeting the needs, wants, and tastes of those navigating through websites.
10. Gaussian blur
Gaussian blur works so well in providing a swirl of soft focus to images and gradients. This effect has been around for a while, but designers have been using this in more prominent spaces in web designs.
Moment House begins their homepage not with a hero image, but with a pleasing gaussian blur of color. This lends an atmospheric feel and ties directly into the Los Angeles cityscape photo that follows it. It perfectly captures the lens of golden light and haze that Los Angeles is viewed through.
We've seen a growing trend in designers telling stories through web experiences. This is where scrollytelling comes in — visual storytelling that heightens the story and hooks you into its narrative.
The best applications of scrollytelling practice restraint:
Keep motion within a small area.
Provide interactions on the user’s terms: provide obvious playback controls to play / pause / stop interactions and motions.
Make sure that any scrollytelling elements help to emphasize the story, rather than distracting from important text.
12. Dark mode
Cue up AC DC’s “Back in Black” because dark mode is hitting more screens in 2021. More designers are embracing the dark mode aesthetic, with black providing the perfect dark backdrop to make design elements pop from the screen.
In the example below, Obys Agency designed a beautiful tribute to fashion designer Peter Lindbergh, pairing a subtly textured black background with a beautiful serif typeface.
13. Cartoon illustrations
There was a time not that long ago when websites were just text and a few images or graphics. Web design has evolved, with designers now creating work that connects with people on a more personal level. Cartoon illustrations have gained popularity as a way of transforming websites with a healthy dash of humanity.
14. Geometric grids
Grids are simple but have a lot of flexibility in how they can be integrated into a design. Geometric grids are gaining traction as a way to structure a layout, with a clean and bold look.
15. Custom cursors
Cursors are probably one of the most overlooked aspects of web design, with most of us content with a plain old arrow. When a designer can take this insignificant part of a website and turn it into something cool, this is quite the achievement.
16. Scrolling cards
We’ve been excited to see scrolling cards becoming integral parts of designs. Whether scrolling horizontally or vertically, they add snappy action to a website and are a great way to present information.
17. Color-less design
Sparse white makes for a clean design, and any elements that have color get even more attention.
Offering audio as an integral part of a design removes accessibility barriers for those with visual impairments, and also benefits those who prefer to listen to a large chunk of text on a website,
19. Web inspired by print
With digital technology replacing so much that were once physical objects, there has been a rebirth of old media. The popularity of vinyl albums is proof that people want to experience something that isn’t just a bunch of zeros and ones.
Layouts that get their inspiration from print fulfill people’s desire to connect with something in the real world. Magazine style layouts and other elements of traditional graphic design provide a link to the tactile experience of print on paper.
20. Design systems for consistency
Design systems are powerful. By using a CMS to create repeatable layouts and related collections, it’s easy to make updates or edits as well as to create duplicate websites fast. Whether they’re being used on a small scale, or for a bigger one, they’re useful for any organization in creating and managing their designs.
21. No code
No code doesn’t mean the complete elimination of code. Programmers and developers will always be important. No code signifies opening up these areas of expertise to those who would otherwise be exempt. It lets anyone with an idea or vision create.
Through no code, designers get to become front-end developers. Writers get to become web designers. And small business owners get to jump into the world of ecommerce. Whoever you are, no code empowers you to become something more. It removes the dividing lines between non-designers, those who only design, and those who are developers. It brings people together in collaboration.