2020 Web Design Trends You Can Use

bright-collage

This post is full of my favorite 2020 web design predictions for the coming year. Get some inspo to (re)create an amazing website that pushes your brand forward.

Share on pinterest
Share on facebook
Share on twitter
Share on linkedin

The new year is always a good time to think about refreshing your website. I’ve done it several times this past year — it seems to be a common trend among designers to never “finish” their own websites. SO many new ideas to try!

I’m excited about this year’s upcoming web design trends, many of which I’ve been trying to incorporate into my website as well as client sites I’m working on. The goal is to create more appealing, unusual websites that communicate effectively in inventive ways.

Like CNN Style’s feature article on The Louvre Abu Dhabi, which I wrote about last year, we’re seeing brands develop more immersive web experiences with an editorial style: more white space, custom fonts, and interactive elements.

But that’s not all! I’ve curated this list of 2020 web design trends that you can take inspiration from, even if you’re DIYing your own website. Keep reading to see what you can tweak to make a better website in 2020.

Mobile First

Not surprisingly in 2019, 63.4% of the world’s population surfs the web on mobile. So it’s no wonder that Google prefers mobile-first websites, and takes load speed into account in its rankings. That’s why many of the new web layouts that we’re reviewing in this roundup are designed with a mobile-first mindset.

What does it mean to be mobile-first? That means that you’re designing for speed and simplicity, so things like large font sizes, arranging elements in blocks, and simplicity may win out over more complex designs. Complicating things with too much code slows down the desktop experience and many elements won’t transfer to mobile without further development work. So when it doubt, make a simple layout.

 Milskhakeapp’s on top of the trend with mobile-made, Insta websites that transform your Link in Bio. Oh yeah - they use bold type, too! Milskhakeapp’s on top of the trend with mobile-made, Insta websites that transform your Link in Bio. Oh yeah – they use bold type, too!

Bold Typography

Larger is better. We’re seeing bigger, bolder typefaces that don’t hurt your eyes. This is especially true for headings, but some [designer] websites prefer to keep text to a minimum and glam everything up with bold typography and amazing photos.

We’re also seeing more brands stray from free fonts, and instead use custom typefaces to personalize their brand. The more memorable you are, the better, right? I use TypeKit or fonts from Creative Market in many of my designs. But Squarespace has so many options built in that you might not have to look far for that perfect font.

Editorial on the Web

Along with the bold typography, everyone’s going for the editorial look, introducing interesting layouts that you’d expect to see more in print. That’s because more than ever we have a design-conscious audience that’s grown up with tech and loves making gifs and personalizing their feeds. Why not make more personal websites? To capture their attention, designers are making their sites more story-centered instead of “business tech”. Expect to see more asymmetrical layouts, more white space, collages and illustrations, and again, the bold typography.

Split Layouts

Split layouts are another way to create interesting layouts. You can see them everywhere, from e-commerce websites (like Tolv, above) to the new Kinfolk layout. Split layouts are great because they keep you interested, switching between blocks of text and blocks of colors as you scan down the page. It’s easy to highlight text or images through your layout choices and blocks stack well on mobile. This style works particularly well with colorful sites, but we’ve also seen it applied with neutrals. Just keep a wider color palette or use different values of the same hue to make it work.

Solid frames of white space – and color blocks

Even if you don’t employ the split layout, you can call attention to an image by putting a lot of space around it. Sometimes space is white; at other times, it’s colored. But this editorial styling will remain prevalent on fashion-forward sites in 2020, as well as with interior designs, architects, and artists, mostly on portfolio sites. Above are two Squarespace 7.1 templates that give you lots of margin for your designs.

Overlapping type and images

This is something we’ve been seeing for the past few years, but the trend continues to gain popularity in 2020. Why? Anything’s good to break up the monotony of scrolling down a page. This trend also fits well with the large typography movement that I mentioned previously, as big type needs lots of room to breathe.

Warmer Designs Replace Minimalism

Minimalism is still there, especially in the art and beauty spaces. But many brands are adopting a softer, more comfortable look that brings in warmth and a personal connection. This is done through using expressive fonts instead of geometrics (which are still popular for tech websites), more colors or comforting neutrals (the other end of the spectrum), and realistic images (instead of posed stock photos.)

Want a little retro in your layouts? Read my post on 2019’s best vintage and retro fonts to bring some real warmth to your designs.

Dark Interfaces

Dark interfaces are increasingly prevalent, and not just for gamers. Art directors and artists have been making use of this trend for a long time as a way to create contrast and transform their sites from a boring white canvas. Dark interfaces rest the eyes and stand out in a sea of white.

Not sure whether you want dark or light? Why not both? Check out this incredibly inventive solution from https://bensifel.com/

Illustrations and Hand Drawn Elements

From Mailchimp’s cute flapping bird to the flat, colorful vector people that inhabit most tech websites today, illustrations are a great way to make the web more personable. Hand-drawn icons, line art, and animated .gifs are some of the things we’ll be seeing in 2020.

Can’t afford your own custom illustrations? Check out Crello’s selection or, if you prefer a modern flat look, visit Ouch! to download expertly drawn, inventive illustrations in many styles.

 Abetel website from Leto.Website Abetel website from Leto.Website

Mixed Media

Another way to make tech more tangible is through mixed media. In print, this might be mixing oil with pastels and collage art. To translate this look to the digital realm, we’re seeing things like photos mixed with graphics, natural shadow overlays, floating animations, and illustrations decorating blocks of text.  The amazing Abetel website from Leto.Website does this trend to its fullest.

 This colorful  re:store  homepage is anything but minimal. Go down the page to see the scrolling text that’s becoming trendy on fashion sites. This colorful re:store homepage is anything but minimal. Go down the page to see the scrolling text that’s becoming trendy on fashion sites.

More Interactions

As it becomes easier to create interactions with improved technology, you can also expect to see more interactions on-site such as unique mouseover effects, that spooky background image that moves with your mouse, and even animated logos and customized page loading effects. Many of these things aren’t difficult to implement on Squarespace with just a little code. To bring more life into your static pages, visit Ghost plugins for all the latest animations.

Wrapping it Up

2020’s web design trends are using grids, fonts, and animations in new ways. It’s great to see how other designers are pushing the digital boundaries and I can’t wait to work on some projects that are off the grid, so to speak.

Luckily, Squarespace is UP↑ with the trends. Using their new 7.1 platform, you’ll be able to recreate a lot of these looks yourself. So what can you do to make your Squarespace website more immersive (on a small budget?)

  1. Create bold new type and color pairings

  2. Animate your image blocks to bring movement

  3. Customize your site further with CSS: interactive buttons, hover effects, etc.

Does your website use any of these trends? We’d love to see it! Leave a link below.

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Scroll to Top
Read previous post:
A First Look at Squarespace 7.1

Are you as excited as I am for the new Squarespace 7.1 release? I’ve been playing around with it for...

Close