1. 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.
Don’t be afraid to go dark in 2021 with your own design work.
2. 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.
Cartoon illustrations offer so much in terms of creativity and making a brand more personable. We’re looking forward to seeing a growing cast of characters throughout web designs in the coming year.
3. 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.
This design from Hudson Gavin and Martin uses blocks both for navigational elements and as well as for content. These big squares of color are fun to navigate through and work so well in keeping your attention.
Geometric grids don’t have to be in a uniform arrangement. Flowmingo uses a more asymmetrical geometric grid, but with squares and lines being the foundation of their layout. The thicker weighted lines emphasize the square shapes throughout.
And for a bit of a lighter touch, we get a nice arrangement of squares and crisp lines in this geometric grid layout for the cosmetic company Skin Labs.
Lending a solid structure and straightforward presentation, geometric grids should be in the toolbox for any web designer.
4. 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.
We just talked about HGM Legal and their use of geometric grids, but they also have this off-the-wall bold black cursor.
The Pen Tool takes their circular cursor one step further, with animation and text coming together for an almost psychedelic effect.
Or check out this morphing circular cursor from Büro, that changes its appearance depending on what design element it’s hovering over.
In 2021, we hope to see more original takes on just what a cursor can be.
5. 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.
This website for Ofcina uses an eye-catching array of colors for their scrolling cards.
Card layouts have been around for quite a while and we enjoy seeing them being taken in new scrolling directions.
16. Color-less design
Sparse white makes for a clean design, and any elements that have color get even more attention.
This design for Latinxs Who Design has a lot of white space, with a hover effect that transforms the black and white image of each designer into full color.
Even something like a minimal plain design can still be an engaging experience with micro-interactions, animations, and other dynamic effects.
User Experience Database also takes a color-less design approach, making it minimal and easy to read.
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,
The New York Times does a fantastic job of providing accompanying audio to some of their featured articles.
We’re hoping to see more audio options on websites in the future, giving people a choice in how they want to experience content.
8. 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 styled layouts and other elements of traditional graphic design provide a link to the tactile experience of print on paper.
9. 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.
We’ve also seen seem really useful apps out there developed to make design system workflows even easier. Zeroheight acts as a centralized space to manage tasks and collaborate. Figma offers templates as well as other design systems tools. And Webflow’s CMS collection can power a design system no matter what the size.
10. 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
Alice Lee’s portfolio site uses parallax effects that respond to mouse position to bring her illustration to life. The amount of movement is small and contained within the bounds of the hero. This is a great example of using parallax with constraint and intention.
Not every parallax animation has to make grand gestures across the screen. We’ve also seen more subtle applications. In this web design for Green Meadow, one could almost miss this effect entirely. But this gentle unveiling of text creates enough of a juxtaposition to bring attention to each block of text as it appears.
Next year we’re excited to see parallax scroll used subtly, not for flashy effect but as a tool to emphasize or highlight important bits of content.