Twenty 2020 Web Design Trends.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Let’s kick off the new decade with twenty 2020 web design trends. This year continues to “break the rules” with broken grid layouts, background headlines, and horizontal scrolling. Other trends from previous years grow bigger this year. Serif type, gradients, and background videos are still popular, for example. One interesting illustration trend I’ve noticed: people with tiny heads and big, big limbs! Read on for the full list of 20 web design trends for 2020 and 50+ live examples in the wild.

Full List of Twenty 2020 Web Design Trends:

Typography

  1. Big Type
  2. Serif Type
  3. Background Headlines
  4. Outlined Type

Color

  1. Gradients
  2. Gen Z Yellow
  3. Accented Monochrome

Graphics

  1. Brutalism
  2. Background Video
  3. HTML5 Animation
  4. Branded Iconography

Illustration

  1. Hand-drawn
  2. Mixing Photos with Vectors
  3. Tiny Heads and Big, Big Limbs

Layout

  1. Broken Grid
  2. Split Screen
  3. Footer Design

Navigation

  1. Horizontal Scrolling
  2. Full-Screen Menus
  3. Hamburger Icons

Typography Breaks Loose in 2020 Web Design Trends

The new decade starts with several trends in typography that seem to reverse what was being done before. Typography trends for 2020 include: big type, serif type, background headlines, and outlined type.

Big Type

Font sizes grow even bigger. Larger type is easier to read, regardless of screen size. Specifically, 16+ px is an effective font size for body copy. Headlines, too, are dominating screen space.

Screenshot. HUGE Inc.'s website opens with a bold, black "Hello." on a minimalist white background.
Credit: Huge Inc.
Screenshot. Giant Spoon home page with large, white sans-serif type on a blue background. Big type is an upcoming 2020 web design trend.
Credit: Giant Spoon.
Screenshot. Nextiva's homepage uses large sans-serif type to make headlines pop.
Credit: Nextiva.

Serif Type

Expect to see lots of serif type in 2020 web design trends. Popular serif choices like Roboto Slab, Playfair Display, and Cormorant continue to make appearances. New, brutalist fonts explore function outside comfort; they can be just as jarring as it is fun. (See brutalist websites here.) Triangle serifs seem to be particularly popular.

Screenshot. The website of Yes& features several 2020 web design trends, including big type, serif fonts, broken grid and overlapping elements, and background headlines.
Credit: Yes&.
Screenshot. Rally Interactive uses large serif headlines; and some of them are rotated vertically as background design elements.
Credit: Rally Interactive.
Screenshot. Bold and fashionable, the SBJCT Journal website design employs large, fashion photos with big serif type, and a simple red and peach color scheme.
Credit: SBJCT Journal.

Background Headlines

Another unexpected typography trend is background headlines. Obviously, the traditional prominence of headlines makes them easy for users to scan and read. However, 2020 web design trends unexpectedly see headlines in the background. They can be faint; they can be stand-out but covered with parallax content; they can break out the grid layout.

Screenshot. The Artemis Ward website shows neon headlines in the layout background, an unexpected twist in 2020 design trends.
Credit: Artemis Ward.
Screenshot. A snapshot of the homepage web design for Quirk showcases another 2020 web design trend: background headlines, like "News & Press" here.
Credit: Quirk.

Outlined Type

Joining background headlines in unexpected trends is outlined type. This sort of typography tends to occur as headlines, because the larger font size minimizes any decreased legibility. Like background headlines, outline type yields attention to other web design elements.

Screenshot. The website for Union uses several web design trends for 2020, such as background headlines and serif fonts.
Credit: Union.
Screenshot. Like the prodigal website, The Outline's news site, The Future, heads off with an outlined headline.
Credit: The Future | The Outline.
Screenshot. WeWork Now opens its website highlighting CTAs by filling in outlined headlines into solid black.
Credit: WeWork Now.

A World of Color for 2020

Gradients

Colorful gradients occupied web design trends for the past few years, and 2020 web design trends continue the same. Vibrant, saturated gradients appear in illustrative graphics as well as backgrounds, image overlays, buttons, labels, and even headlines.

Screenshot. The colorful sales engagement conference website of Unleash 2020 repeats a purple-pink gradient through its logo, icons, backgrounds, and photos.
Credit: Unleash 2020.
Screenshot. Colorful, gradient lighting and backgrounds make the team portraits of Taco Bell Design vibrant and fresh.
Credit: Taco Bell Design.

Gen Z Yellow

Where Millennial pink kept popping up over websites the past decade, Gen Z’s coming of age bring Gen Z yellow to 2020. While Gen Z yellow isn’t exactly precise, these yellows tend to be bold, commanding, and optimistic.

Screenshot. Gen Z Yellow is another example of 2020 web design trends, like this yellow-flooded hero image for Wolff Olins.
Credit: Wolff Olins.
Screenshot. A screen of Gen Z yellow dominates the opening background video of Designit.
Credit: Designit.
Screenshot. Sonder & Tell opens their website with a simple question in black, serif type on a rich yellow background.
Credit: Sonder & Tell.

Accented Monochrome Schemes

On the other hand, monochrome color schemes with a single accent color are also appearing in 2020 web design trends. Where colorful gradients, clashing brutalism, and bold Gen Z yellow dominate with color, accented monochrome mutes color and favors content.

Screenshot. Gen Z Yellow appears as an accent to the otherwise monochrome website of W&Co.
Credit: W&Co.
Screenshot. The minimalist website of 15 Finches accents a pale peach with a brilliant pop of blue. A few design elements also overlap, such as the page title typing right over the hero image, a style characteristic of the broken grid layout trend.
Credit: 15 Finches.
Screenshot. The Qualtrics XM website is an example of an accented monochrome color scheme. The layouts are grayscale except for a colorful green-to-blue gradient.
Credit: Qualtrics XM.
Screenshot. Monoline illustrations and a pink-accented monochrome color scheme characterize the Lemonade website.
Credit: Lemonade.

Graphics

Brutalism

I discussed brutalism earlier in Takeaways from Your Favorite Graphic Design Trends, but it’s still relevant for 2020.

Originally, brutalism appeared austere and utilitarian. Brutalist architecture provides clear example. Unlike “normal” design, this kind of brutalism seeks to remove anything non-functional and eliminate decoration. It’s effective UX. Nielsen Norman Group’s study on zig-zag layouts demonstrated “users prefer to ignore decorative images” anyway.

Today, brutalist web design primarily explores raw, unpolished aesthetic. However, decoration is allowed, if not, well, overdone in maximalist fashion (maximalism is another trend explored in Takeaways).

Overall, most people find brutalist web designs ugly. Nevertheless, don’t take brutalism at face value. Like the other takeaways from popular design trends, brutalism teaches designers to recognize necessity and function. By examining under- or over-loaded web design examples, designers can identify strategic gaps in their own websites.

Screenshot. Maximalist and brutalist, the website design for The Outline exemplifies several 2020 web design trends at once.
Credit: The Outline.
Screenshot. The portfolio of Jerome Harris is orange, pink, functional, and Brutalist.
Credit: JWH.
Screenshot. A site that's shamelessly brutalist is the Yale School of Art. In the background even plays the meme of the raccoon who didn't look what the world had to offer and returns underground, pulling the manhole cover behind him.
Credit: Yale School of Art.
Screenshot. The above-the-fold hero video for Karl Anders is brutalist, jarring, and eye-catching.
Credit: Karl Anders.

Background Video

Video has been here to stay. Background videos are popular tools to communicate “a lot” in “a little.” They offer an inside-look from a perspective users quickly relate to. Furthermore, the movement feels natural and dynamic—a great way to liven up an otherwise static web design.

Screenshot. The hero background videos for Australian restaurant Junction Moama showcase various attractions.
Credit: Junction Moama (link plays audio).
Screenshot. Big photos dominate the Ibex website, as well as large type and bold gradients that reveal themselves on hover.
Credit: Ibex.
Screenshot. ISL's website opens with a collage of background videos. This accented monochrome layout also breaks out into broken grid.
Credit: ISL.

HTML5 Web Animation

Background videos aren’t the only dynamic image trend: HTML5 allows designers to animate web content natively, right within the web browser itself. Web animations range from simple to complex. Nevertheless, this 2020 web design trend is useful to support main content or illustrate more complex ideas.

Animated screenshot. The page load and above-the-fold animations for Webeffectual are right on point with 2020 web design trends.
Credit: Web Effectual.

Web Effectual uses SVG animation.

Animated screenshot. Slack uses simple HTML animation to move the logos and icons are several apps they support behind a primary CTA.
Credit: Slack.

Slack uses HTML5/CSS3 animation.

Animated Screenshot. General Design Company uses a simple opacity transformation to show then hide the names of big links.
Credit: General Design Company.

General Design Company uses JavaScript plugin ScrollMagic.

Branded Iconography

Custom, branded icons are website are becoming commonplace. Since web designers continuously strive to remove stock photography from their designs, branded icons became another way for brands to express authenticity and attention to detail. Many are animated as well.

Screenshot. Yes I'm a Designer's website illustrates its services with shaded monoline icons.
Credit: Yes I’m a Designer.
Screenshot. A clipping of custom, hand-drawn iconography from the homepage of Deeplocal.
Credit: Deeplocal.

Illustration

Hand-drawn

In the continuing search for the authentic, hand-drawn illustrations offer a solution. They are easy to customize to one’s brand. Furthermore, hand-drawn communicates the hands-on approach a business has with its customers. While this 2020 web design trend isn’t for everyone, it’s a creative trend worth exploring.

Screenshot. Wild Side Co. embeds inky, freeform, hand-drawn illustrations guiding users through their site.
Credit: Wild Side Co.
Screenshot. Hand-drawn illustrations form a collage to tell SNAPSOUND's story.
Credit: SNAPSOUND.
Screenshot. Dropbox's sign in webpage opens with a playful, abstract illustration of people working together to build something.
Credit: Dropbox.
Screenshot. The wedding website for Daniela Covarrubias and Moe Amaya features abstract floral shapes, thin condensed serif fonts, and feminine pastel colors.
Credit: Daniela Covarrubias and Moe Amaya.

Mixing Photos with Vectors

Similar to 2019’s trends, 2020 web design trends are boldly mixing photos with vector graphics for artistic collages. Before, these two opposing looks came across as clashing. Today, the collage look is in and the eclectic nature of this combination seeks to unite worldly objects with abstract concepts.

Credit: Huge Inc.
Credit: Huge Inc.
Screenshot. Buck Design place photographs of KFC chicken within a hand-drawn, animated world.
Credit: Buck.
Screenshot. The Russian website of Coffee Cava opens with an interactive hero image describing all the ingredients that go into their coffees. Vector artworks of milk and sugar mix with photos of the coffee cup, coffee beans, and spices.
Credit: Coffee Cava.

Tiny Heads and Big, Big Limbs

I haven’t seen this illustration trend in any list for upcoming trends. Yet, this portrait style of illustration is appearing all over websites, Pinterest, and Dribble. This sort of reverse anime-style portrait draws attention to what the subjects are doing. The organic, freeform body proportions also create a friendly appearance.

Screenshot. The Nextiva login screen illustrates two women high-fiving through a mobile video chat.
Credit: Nextiva.
Screenshot. Oscar Health Insurance showcases several colorful people illustrations. They're friendly, organic, and have tiny heads compared to the rest of their bodies.
Credit: Oscar Health Insurance.
Screenshot. Lydia Hill shares an illustration of a pink-haired woman with a disproportionately sized head on Dribble. This style of illustration will be a big 2020 web design trend.
Credit: Lydia Hill on Dribble.
Screenshot. Renn Qin shares a collection of tiny-headed women in colorful textured illustrations.
Credit: Renn Qin on Bēhance.

Layout

Broken Grid

One of the most exciting 2020 web design trends is broken grid. Although a trend from previous years, advancements in visual builders like Gutenberg and Elementor have made broken grid layouts more accessible. I particularly see a lot of this trend in Asian website design, but the U.S. is starting to break out of its grid structure too.

Screenshot. IDEO CoLab also has several web design trends for 2020. A simple animated pattern brings life to a video background hero image. Big type headlines pop. Various elements overlap each other in a broken grid layout. It's very trendy.
Credit: IDEO CoLab.
Screenshot: The Japanese website design The Ringo restaurant uses a broken grid layout. The areas in which text changes color from black to white when overlapping a photo are particularly striking.
Credit: The Ringo.

Split Screen

Split screen web design challenges the popular hero image layout that has dominated much of web design layouts. (Get inspired by these hero image alternatives and other above-the-fold web layouts here!) Web designers use split screen to provide targeted calls to action or backup one clear call to action with supporting graphics.

Screenshot. The blog at Adelante Shoe Co. uses split screen to navigate through articles. It works because the line lengths are much easier to read.
Credit: Adelante Shoe Co.
Screenshot. Locomotive's split screen web layout is very minimal in approach, but its simplicity is relaxing and refreshing.
Credit: Locomotive.
Screenshot. The Media Monks website opens with a split screen design that splits five-ways.
Credit: Media Monks.
Screenshot. Liquid Agency opens with a split screen design.
Credit: Liquid Agency.
Screenshot. One trend for 2020 web design is split screen, like this website for Point Studio which displays work sample names to the left with large graphics to the right.
Credit: Point Studio.
Screenshot. Lingo uses a split-screen that allows users to scroll through the features of their Design System Manager app while keeping app screenshots fixed to the left.
Credit: Lingo.

Footer Design

Web designers are giving footers in web designs more attention at last (pun intended?). Users often visit footers for important contact information, site maps, or specific topics not covered in a broad navbar. Since contact info is one of the top three pieces of information users seek (and often find lacking!), and moving contact to the footer reduces clutter above the fold, designing attractive footers grows in priority.

Screenshot. The white and airy footer of The Theoni Collection looks soft and feminine.
Credit: The Theoni Collection.
Screenshot. The footer of BASIC's website is an edgy white-on-text with plenty of negative space for breathability.
Credit: BASIC.
Screenshot. The footer at Sketch is simple. Branded colors compose the headlines, while dark gray copy sits on a clean white background. The minimalist approach here highlights the free trial and newsletter sign-up CTAs.
Credit: Sketch.
Screenshot. The footer of Lemonade uses a muted pale-gray-dark-gray footer. Icons help break up the text.
Credit: Lemonade.

Horizontal Scrolling

Although horizontal scrolling has traditional been a no-no in web design, today’s digital natives are growing more familiar with horizontal scrolling and side-swiping thanks to popular mobile gestures. The trick to succeeding in layouts with horizontal scrolling is overcoming the illusion of completeness so that users know there’s more to see.

Screenshot. The Oglivy homepage loads an animated slideshow....that runs horizontally. Horizontal scrolling one of the 2020 web design trends.
Credit: Oglivy.
Screenshot. The portfolio of Juanmi Marquez uses both a left sidebar layout as well as horizontal scrolling, allowing users to browse with keyboard or finger swipe.
Credit: Juanmi Marquez.

Full-Screen Menus

Another web design trend that mobile introduced to web design at large is the full-screen menu. Like the big typography trend above, larger type is always easier to read. A larger hyperlink is also easier to click or tap. However, there’s no magic number or “best” number of links. Don’t overwhelm users with choices, but do place the most important and popular destinations in an easy to find place.

Screenshot. The portfolio website of Matt Steel uses a clean full-screen menu with big red hyperlinks on a solid navy background.
Credit: Matt Steel.
Screenshot. The website for Dogstudio adds an illustrative approach to their full-screen menu: big hyperlinks appear beside a 3D rendering of their canine mascot.
Credit: Dogstudio.
Screenshot. The full-screen menu for Made By We uses another 2020 web design trend: a colorful gradient overlay.
Credit: Made By We.

Hamburger Icons

Web designers loved the hamburger icon navigation strategy, since it neatly tucks away a bulky menu where content needs greater space and weight in small screen sizes. However, web designers started bringing this trend to desktops as well for a more minimal look.

Nonetheless, although this trend is popular, do keep in mind that users find hidden navigation frustrating.