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.

A beautiful tribute to late fashion photographer Peter Lindberg uses dark mode and a simple black and white photo of the photographer.

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.

There are so many sources out there and artists crafting fantastic cartoon illustrations. Blush is a great platform to find custom character illustrations, like this great set from Vijay Verma.

Blush's illustration platform features various customizable character illustrations.

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.

Hudson Gavin and Martin's website uses thick black strokes to separate different blocks of content.

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.

Flowmingo's home page uses strokes around most elements for a stylized effect.

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.

Skin Labs' ecommerce site uses a simple grid to clearly display their different products.

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. 

Hudson Gavin and Martin's home page adds interest with a bold black circle cursor.

The Pen Tool takes their circular cursor one step further, with animation and text coming together for an almost psychedelic effect.

The Pen Tool's bright and color website uses a large black cursor for a funky effect.

Or check out this morphing circular cursor from Büro, that changes its appearance depending on what design element it’s hovering over.

Buro's website uses a lot of negative space, and a large circular white cursor adds to the visual interest.

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.

Ofcina's websiteuses large fields of color and a scrolling, stacking card effect.

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.

Latinxs Who Design's simple black and white design puts the focus on the people featured.

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.

The User Experience Database pairs friendly illustrations with a clean layout.

7. Audio

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. 

The New York Times' website includes an audio feature for their article "Does Palantir See Too Much?"

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.

Home Run Studio's editorial-inspired layout works well for their page about risographs.

The example above from Home Run Studio, and the one below for Foundamour, both take inspiration from print, giving them a familiarity and connection to publishing.

Foudamour's website features a large photo of a cake, reminiscent of a magazine layout.

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.

Saasly's style guide is made in Webflow and includes color swatches, typography, and icons.
Style guide from Saasly

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.

Alice Lee's home page uses subtle parallax scroll to bring one of her illustrations to life.

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.

Green Meadow's website uses parallax animation to progressively reveal different sections of text.

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. 

0
Would love your thoughts, please comment.x
()
x