Design Lessons & Trends

2021 Website Design Trends

Designer Using Laptop

Website design trends evolve constantly, driven by technology adoption, shifting aesthetic preferences, and the desire to stand out. Here’s a list of web design trends that have grown on us this year. Keep reading for inspiration on how you can utilize colors, shapes, and layouts to refresh or redesign your website and brand.

FYI the images in the examples below are clickable and will open in a new window.

1. GRADIENTS

Solid colors, color blocking, and “flat design” have been extremely popular for many years. But now, gradients are making a comeback in powerful ways. Gradients can be used subtly to add visual interest, in a dramatic and playful way, or as a “pop” to draw the eye to a specific element on the page, such as a call-to-action.

Subtle Gradients

We used a two-tone gradient across the top of select interior pages to give Sherman & Howard’s site a modern, innovative feel (click to view site):

Sherman Howard Services Page with Gradient

Dramatic Gradients

Adobe uses a multiple color gradient for a fun, playful, splash page:

Adobe welcome page with a multi-color gradientGradient “Pop”

Spotify effectively uses a gradient to draw attention to the call-to-action band at the bottom of the page to encourage sign-ups:

Spotify gradient call-to-action band

2. DARK MODE

If you have ever used Google Maps at dusk, you’ve seen all the colors change from bright, light colors to a dark theme, which is easier to view at night. Dark mode is trending in website design as an alternative to bright whites, no matter the time of day. Dark backgrounds can feel soothing and sophisticated or techy and edgy depending on how they are used.

Dark Mode for Subtle Background

YouTube Music (below) and Spotify (above) as well as many other streaming services use dark mode to make the colorful image options sing as the visual focus.

YouTube Music dark mode

Dark Mode for Emphasis

Most of Intel’s website pages are bright white. The shift to the dark navy background differentiates this product page from the rest of Intel’s site and offerings:

Intel Arc navy blue dark mode

Partial Dark Mode

On Critchfield, we combined both white and charcoal backgrounds throughout the site for a modern, sophisticated look:

Critchfield bio page

 

3. COMFORTABLE COLORS

If you have found yourself looking at screens constantly since the start of the pandemic, you are not alone. Staring at a bright white screen can be glaring. That said, it is not surprising web designers are re-evaluating background color palettes. Beiges, light grays, and pastels are more comfortable on the eyes.

 

Beige Color Palette

Bellroy website with beige background

Gray Neutral Color Palette

Crisp website with gray background

Pastel Color Palettes

Apple has a splash page to promote AirPods to college students. The variety of pastel color backgrounds are easy on the eyes and give the page a youthful feeling:

Apple Airpods for College page with pastel backgrounds

Mailchimp updated its homepage with bands of pastel and neutral colors. It seems like Mailchimp is constantly iterating its site design and is at the forefront of website trends. (You might remember their last homepage design that made waves with bold, custom illustrations. They are still using the illustrations further down the homepage and throughout the site):Mailchimp homepage with pastel colors

On the Grimes & Company website, we designed the pages with a mix of white, light blue, and beige backgrounds that give the site a calming feel.

Grimes & Company service page

 

4. WHITE SPACE

White space (also known as negative space) is the space between elements on a page. Sites can push the amount of white space to extremes. The minimalism of extreme white space provides a sense of sophistication and enables the limited words and graphics to be the star of the show.

White Space for Visual Focus

Google’s parent company, Alphabet, effectively uses white space to focus attention on the headline “G is for Google.” The contrast between the starkness of the vast white background and the playful 3D-looking letter blocks is what makes this page memorable. Don’t be fooled by the brevity of the text. They have a lot more to say, but it is hidden under the “more” link:

Alphabet homepage

On Zalkind, Duncan & Bernstein, we used white space to make the headline pop off the homepage for a striking and memorable design. The word “rising” also automatically animates to further draw attention to the headline:

Zalkind Homepage

White Space for Navigation

The use of white space on Sasaki’s homepage creates a clear visual hierarchy. The simplicity helps users make choices of how to interact with the site after seeing the large logo and tagline. Site visitors can click the main navigation to jump to an interior page, use the prominent site search to find something specific, or scroll down to keep exploring and see links to a variety of pages:

Sasaki homepage

 

5. BREAKING THE GRID

Do you remember when every website had images and videos that filled the screen? We certainly do. Sites all started to look the same “above the fold.” In response to that, brands are finding ways to break the mold to be more memorable. Incorporating white space with unusual grids creates striking looks.

Rectangular Assymmetrical Layout

Lyft layers rectangular images to the right. They are also using white space to focus attention on the words and navigation options:

Lyft homepage

Circular Assymmetrical Layout

We designed Cirtronics with circles, bold typography, and white space for a fresh, techy look:

Cirtronics homepage

Angled Graphic Layouts

Stripe uses angled background elements to break the grid throughout the homepage and draw the eye downward to keep scrolling:

Stripe homepage

We designed LPA|A with subtle angles to increase the visual interest. Angles are used throughout the design: the header images include a dark angled overlay, an angled light gray background cuts across the body of the pages, and the footer is a slanted gray block:

LPA|A Core Values page

Typographic Layout

While Square does use a full bleed image at the top of the homepage, they have broken the anticipated grid with the headline. The words are carefully placed around the face of the featured person:

Square homepage

6. ORGANIC SHAPES

Organic shapes are unexpected and whimsical, and shaping up as an eye-catching new trend as a result. Sites use organic shapes in obvious as well as subtle ways.

Obvious Organic Shapes

Removement

Winc homepage

Subtle Organic Shapes

Zoom includes a gray background blob to add depth:

Zoom homepage

 

7. Animation

On-page animation has also become a very common trend as it helps create a user experience that draws users into the site. Some animations happen immediately and others are triggered, typically by scrolling down the page or hovering your cursor over page elements. Keep your eyes peeled for our follow-up article defining different types of animation trends with examples.

 

In Conclusion

It is important to always continue adapting and modernizing your website. By implementing any of the trends we’ve highlighted here, your site can look more relevant, modern, and engaging to your clients and prospects.

Extra Credit

Do you have a favorite trend from the list above? Did you notice that some of the sites we’ve featured exhibit multiple website trends? Test your new knowledge by scrolling through the list again or look for these trends as you surf the web in your daily travels.

 

In Your Inbox