I love web design.
Like, would do it in my free time if no one paid me, love it.
Honestly, I love design in general.
I remember being a little boy taking bike rides with my mom. Every once in a while we’d stop at a house and she would say, “Christopher, if you could change anything about this house what would it be?”
My little 9-year-old mind would conjure up new colors, room add-ons, and landscaping upgrades. We’d sit for a while looking at the house bouncing ideas off of one another.
That stuck with me throughout my whole life. It made me aware of the designs around me. And, it helped me to see beyond what I was seeing.
It made me love the idea of taking something and making it look better or function better or be more useful.
It also helped me love looking for and finding trends.
So, when I’ve got a spare minute you can often find me scrolling through Pinterest saving designs that catch my attention or line up with what I’m seeing from the design world.
Top Design Trends for 2020
So, with that in mind, I thought this would be a good time to talk about some trends I’m seeing in Web Design for 2020.
It’s probably important to realize that trends are hardly ever universal.
That means that what will be a trend for one section of society will not be a trend for another.
Think about fashion, for instance. Imagine an 80-year-old lady dressed like a VSCO Girl.
Or a 19-year-old kid dressed like Mr. Rogers.
Neither of those scenarios quite works because the trend doesn’t fit the person.
In other words, there is no one size fits all. As a web designer, you’ll need to adjust your designs to fit your audience.
The best thing to do is to approach every website build through the lens of the people you’re building the site for.
BUT, I’ve always found that it’s good to use trends as a starting point for a lot of projects. AND, it’s good to use trends to communicate to clients what you’re thinking in general.
They’ll have a better idea of what you’re talking about AND you could easily grab an image somewhere online to show them what you mean.
So, here are some great web design trend predictions for 2020 that will help you modernize you or your clients site.
1. Color Palettes
There’s not one solid rule about which colors you can pick and which to stay away from.
But there are some general rules that can help guide you.
For instance, complementary colors are typically used very subtly.
Before we get too deep, let’s chat a bit about color theory:
Complementary colors are those that would be on the opposite side of the color wheel from one another. For instance, Red & Green would be considered complementary colors.
There are also analogous colors. Those would be colors that are right next to one another on the color wheel. So, for Red, it’d be Vermillion and Magenta.
Most sites have one main color. And, they use a complementary color or even one that’s drastically different from the main color to make things stand out.
Check out this screenshot of StoryBrand.
They use the red notification bar at the top to stand out. But, the rest of the colors are pretty analogous.
Of course, you can break the rules with this but in general, it’s good practice.
If I’m building a site for a younger demographic I will typically utilize more complementary colors.
For instance, this is a design I built for a campaign directed toward high school students.
There isn’t really a color palette here 😂Just big, bold and bright. But, this is what fits best for the demographic.
I love playing around with color palettes on Coolors. If you haven’t used it yet I highly suggest you check it out.
And it’s also fun to track Pantone’s color of the year.
Font’s are another thing that can quickly date a website.
As with colors, the font-family you choose will be highly dependent upon your audience.
Again, before we dive too deep into the conversation let’s clarify some font concepts
Serif vs. Sans Serif
A Serif font has an almost decorative finish to the edges of the letter. While a Sans Serif font has a clean finish to its edges.
I remember using Arial for my papers in grade school and thinking it really made my paper look modern 😂
There isn’t really a more or less modern standard these days when it comes to Serif or Sans Serif. They are both used in the latest web design trends.
For a younger audience, big and bold fonts work really well for 2020. You’ll also see some pretty drastic manipulation. Making waves out of the fonts or changing the perspective is something I see a lot:
I also see a lot of outlined text for a site that’s more directed toward a younger demographic:
Minimal Sans Serif
In contrast to that is the minimal Sans Serif font. This would be best used for an older demographic (now we’re not talking super old…maybe 30’s – 40s) and for companies with a more serious brand.
You’ll notice in a lot of these that letter-spacing is essential. Typically, I find that a lot of the headers have at least a few pixels of letter spacing and the body font has less.
Finally, a general practice amongst all types of sites is using a mix of font pairings. You’ll see, for instance, the headers are Serif and the body font is a Sans Serif.
But, I’ve also seen headings that are handwritten or scripts mixed with a sans serif body.
Obviously, this has a much more feminine feel with an artistic flair. For instance, I see A LOT of photographer websites that use this font pairing.
A trend I see a lot lately that I absolutely love is Serif fonts that are pushed to the extreme almost like a mix between Blackletter which is what old printing presses used or calligraphy and a modern Serif font.
You’ll see a lot of repetition in type as well which really helps to bring attention to the font.
If you love fonts as much as I do go check out Typewolf. There are great articles on the latest trends and interviews with popular designers.
3. White Space
In contrast to the design style of the mid-’90s a lot of the latest designs are much more minimal and utilize a ton more white space.
I think this is a response to the amount of online advertising we take in as digital consumers.
When people hit a website they don’t want to feel suffocated by the amount of design or elements on a page because their everyday lives are filled with so much visual noise.
Who knows how long this trend will stay around. I’ve seen some designs lately that were much busier
But, you’ll notice how the space is used to intentionally pull your eyes towards what they are wanting to be highlighted.
This can be an effective strategy for conversion as well. If for instance, you are wanting a user to click a certain button make sure that it’s not surrounded by a lot of busy design.
Make it stand out with white space.
Minimalism and a large use of white space was a tough one for me as a young designer.
I tended to overcompensate with bad design by adding more and more until it felt right. It took a while to cultivate an eye for keeping my designs minimal but still stylistic and not downright boring.
4. Lines & Shapes
A trend that is actually quite easy to implement is the use of lines and shapes.
You’ll see this a ton in SaaS (Software as a Service) websites. But, using boxes or lines to highlight or in tandem to images is pretty widely used.
This is a pretty simple way to make a boring design come to life.
I’ve also used it to draw attention away from less than quality images I get from clients. It’s amazing how much adding a square behind a photo can make a photo shot on an iPhone look a bit more sophisticated.
But again, be careful to not drown out white space by overusing shapes in your design.
Use them where they enhance the design and in a way that leads the user somewhere.
5. Less Images
This trend is very much in line with white space but I felt like it needed its own category because of how much it diverges from past trends.
It wasn’t too long ago that big images spread across the full width of a website ruled the land.
Then you’d add a parallax effect to it and you were REALLY cooking.
It was 100% acceptable for every single section to have a different full-width background image set to a parallax effect.
Which feels like being pummeled with a series of really big waves in the ocean. Wasn’t a fan. Can you tell?
As a backlash, the design trends have swung the opposite way.
Now, even the hero takes a minimal approach and only occupies a small portion of space.
Big, full-width images won’t go fully out of style. But, they will be less dominant in the online world.
To be clear, we’re not talking about your run of the mill Disney level illustrations here.
We’re talking about basically flat, very minimal drawings of people and everyday things. IE an office, a grocery store or even a SaaS dashboard.
This is all stuff that can be done fairly easily if you know your way around Adobe Illustrator.
But, even if you don’t, there are a ton of free online resources that are giving away these little trendy gems.
InVision’s very own Humaaans, for instance.
You can mix and match a set of people parts until the cows come home. And, believe me, I see these guys everywhere.
Why not! They’re free and they’re popular.
But, you get extra points if you know your way around a pencil and can draw these puppies from scratch.
I’ve had clients literally ask me if I’ve had experience with designing these little faceless people.
At the end of the day, good design is good design. Sometimes it follows these rules and sometimes it breaks all of these rules.
It’s funny to me how when something breaks the rules but it strikes a chord with people it’s called innovative and labeled as “breaking genre barriers.”
But, if another design breaks the rules but no one likes it then it’s just bad design. Oh well.
Ultimately, my encouragement for anyone learning is to study the trends and master what everyone is doing before they start blazing their own trail.
You’ve got to remember that Picasso didn’t just paint the abstract pieces he’s famous for right from the get-go. He studied the classics, mastered his technique and then started bending the rules.
The same is true for my daughter learning guitar. She’s not starting out by writing her own music. She’s learning “Mary Had a Little Lamb” and then moving on to bigger things.
The same is true for anyone learning design.
Learn what everyone else is doing. Copy them.
Then start making adjustments.
Eventually, you’ll be the one setting the trends.
Another great blog that I follow has talked about some design trends as well. I’ve been a fan of the content from Toptal for a while now and would encourage you to check it out as well.