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
- Big Type
- Serif Type
- Background Headlines
- Outlined Type
Color
- Gradients
- Gen Z Yellow
- Accented Monochrome
Graphics
- Brutalism
- Background Video
- HTML5 Animation
- Branded Iconography
Illustration
- Hand-drawn
- Mixing Photos with Vectors
- Tiny Heads and Big, Big Limbs
Layout
- Broken Grid
- Split Screen
- Footer Design
Navigation
- Horizontal Scrolling
- Full-Screen Menus
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Web Effectual uses SVG animation.
Slack uses HTML5/CSS3 animation.
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.
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.
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.
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.
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.
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.
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.
Navigation
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.
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.
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.
