the most popular web design trends and styles of 2020
歡迎使用 WordP
Here are the most popular web design trends and styles of 2020:
- Forward-thinking custom illustrations
- In-your-face Interstitials
- Random Shapes
- Hamburger (Mobile) Menus on Desktop
- 3D Design Elements
- Tightening Integration Between Social Media and Website
- The End of Autoplaying Media with Sound
- Dark Mode
Let’s take a look at each of these in detail.
1. Forward-thinking Illustrations
Custom illustrations have taken the web by storm over the past few years. Businesses of all sorts – but, especially SaaS businesses – have embraced this trend with gusto.
Why? Because illustrations are a great way to make complex things more understandable, the intangible tangible, and the vague specific.
Businesses today are using illustrations on their websites to explain complex concepts, draw viewer focus in a mindful way, and create unique visual brand identities. That’s nothing new in 2020.
But, you should keep your eye on these two new illustration trends this year…
Animated Illustrations
Was that a little movement you caught out of the corner of your eye? Better look over there!
Our eyes are hardwired to notice movement. Historically, it’s helped to keep us alive. And, in 2020, web designers are capitalizing on this default human setting.
Animated illustrations are one of the newest trends being used to direct viewer attention within web designs. You’ll see these petite animations on sites all over the web.
Some animated illustrations are merely still graphics that jiggle, while other illustrated animations are more thoughtful and complex. When used to their fullest capacity, animated illustrations can tell stories, explain concepts, or help viewers navigate a website.
This example from Zibbet.com demonstrates the concept behind their service – easily selling handmade goods on multiple platforms.
Best of all, like all illustrations, animated illustrations can be custom-designed to visually represent your specific brand. So, the possibilities are pretty limitless – as long as you’re working with an illustrator who truly understands your business and brand identity.
But, be sure to use these animations wisely. Poor placement could draw your audience’s eye to the wrong place – causing more harm than good.
If your business offers a product or service that needs a bit of explaining to help customers see the value, then an animated illustration that does just that will be a great upgrade to your website.
Hand-drawn Illustrations
Slick digital graphics used to wow us. But, they’ve lost some of their luster through the familiarity of seeing them every day.
Today, in the sea of polished sameness, hand-drawn illustrations stand out. And their popularity is on the rise in 2020, both in web design and in 2020 logo design trends.
Project management platform Basecamp has been at the forefront of hand-drawn illustration for years. The current iteration of their website uses hand-written notations overlaid over screenshots to help explain how their service works and highlight certain features. These call-outs are visually unique on the page and stand out as a result.
Marketing automation platform MailChimp also uses distinctive hand-drawn illustrations in their web design. You’ll notice that the visual style is completely different from Basecamp’s, helping to demonstrate the versatility of this illustration style.
Is your brand playful? Rustic? Unpretentious? Hand-drawn illustrations can be many things. Consider embracing this trend if you’re looking for a fresh way to draw focus through your website and create a unique visual brand.
2. In-your-face Interstitials
Pop-ups are back.
And, if we’re truly honest, they never really left. But, they’ve certainly grown more brazen.
Today’s pop-ups are called interstitials. Some marketers use this web design tool responsibly and in helpful circumstances. For instance… If you’ve spent a great deal of time on a page, an interstitial may pop up as your cursor moves toward the navigation bar inviting you to learn more about the product before making a choice.
Other websites bombard you with an interstitial message before you’ve even made it to the homepage. These interstitials appear as soon as you navigate to a site and often invite you to sign up for their email list in order to receive a discount off your first purchase.
FREE BRAND IDENTITY GUIDEUnlock the secret to faster business growth. Get the free guide now.EMAIL ADDRESS
While most people love a good discount, having one shoved in your face before you’re even given a chance to see what you came here to see… that’s not so great.
Pop-ups… fine, interstitials… aren’t ever really going to disappear from web design entirely. But, we hope to see web designers using them more tactfully in 2020.
3. Random Shapes
Image courtesy of Stellar.com
For better or for worse, we’re in the midst of a 1980s/1990s renaissance. The 80s and 90s fashion influence has stormed the runways. And, floating neon and pastel-colored shapes have crept into our web design.
These shapes generally take two different forms – amorphous blobs (see above) and geometric shapes (see below).
These irregular organic forms (or geometric shapes) often float freely on a page. When used well within an overall design, they frame other content and/or direct the viewer’s eye through the design.
They’re playful and abstract. So, if your brand also shares those qualities, it may be worth considering incorporating them into your web design.
But, these playful blobs strike us as highly likely to date themselves – and your website design – fairly quickly. So ensure this style really aligns with your brand before jumping on this shapely bandwagon.
4. Hamburger (Mobile) Menus on Desktop Web Designs
Hamburger menu icons make smart use of the limited space available on tiny (or not-so-tiny-anymore) mobile screens.
And, in an attempt to make users’ mobile and desktop experience more consistent, we see web designers in 2020 embracing the hamburger menu for desktop designs as well.
It’s true that consistent user experience is vitally important. But, it shouldn’t come at the price of ease-of-use.
The problem with this trend is that the tiny hamburger menu icon (a simple stack of three lines) gets lost on larger screens – creating a poor user experience when viewers can’t find what they’re looking for.
The Nielsen Norman Group found that only 27% of users actually click on a hamburger menu on a desktop. That’s about half as often as users click on a visible navigation menu on the desktop.
Web designers should continue to strive to create a consistent user experience across devices. However, it has to be executed in a way that works on all devices. We admit that this can be a challenge. But, adding a tiny hamburger menu to your homepage, despite being trendy, is likely to do more harm than good.
5. 3D Design Elements
In an effort to break free from the flat illustration style running rampant across recent web design, some businesses are using 3D modeling on their websites in 2020.
These 3D elements appear to leap off the web page. So, they’re very effective at drawing attention.
The eye-catching 3D model above represents the kind of complex network you can build through Post for Rent’s influencer marketing platform. It’s both visually engaging and communicates an important concept for the business.
Or, take Salesforce’s current homepage for example…
Salesforce’s mascot – a little toddler in a raccoon suit – stands out vividly as a 3D model against the flat illustrations behind it. This draws the eye very effectively to the copy “Starting at $25 per month” (arguably an important point in their marketing).
These 3D renderings can communicate just as effectively as illustrations. And, they stand out from the flat graphics we’ve become used to, capturing our attention. We anticipate that skilled designers with the ability to create these 3D designs will run with this trend in 2020.
6. Tightening Integration Between Social Media and Website
You’ve probably heard that brand consistency is important.
And it is.
Trust grows when people meet your brand again and again – and it presents the same face each time. This is why you’ll see more businesses creating stronger visual links between their social media presence and their actual website in 2020. Consistency is critical to strong brand identity.
Sure it’s important to use the same branded color palette across your website, social media accounts and mobile app (if you have one). And, yes, you want to use the same company logo and brand graphics throughout your web presence as well.
Notice how Osmia’s social media content matches the overall look of their website…
But, we anticipate that 2020 will show a deeper level of blending between social media and websites – it’s already started. For example, wellness cosmetics brand Osmia Organics does a great job with this.
If you visit Osmia’s website you’ll find a collage of actual Instagram content featuring pictures of their founder, Dr. Sarah Villafranco, her dogs, and – of course – their products. These pics are featured in a section right on the homepage titled “Follow Us On Instagram.” The collage is interactive – allowing you to read more by clicking the pictures. And, it looks right at home on their website.
That, of course, means that Osmia has successfully synced their brand voice and appearance across both their website and their Instagram account. This kind of consistency reassures users that what you see is what you get. It also entices users to follow Osmia on Instagram and build a deeper relationship with the company. Brilliant.
In 2020, consider how you can incorporate elements of your social media presence into your web design. And, if you find you lack any social media content that would feel at home on your website, ask yourself if your social media content is appropriately on-brand.
7. The End of Autoplaying Media with Sound
We would never include autoplaying video with audio, so here’s a cute bunny nibbling a leaf, instead.
There are certain online practices that were at one point excusable but are now completely beyond the pale.
Autoplaying media with sound is one of those practices that should never, everoccur. And, having to track down hidden video with audio is even worse.
It’s true that video is very engaging online media. People would prefer to watch than read any day. However, when video sound starts automatically as soon as a webpage loads, that is unacceptable.
People use their screened devices everywhere – at home, at work, on the bus, at the grocery store, in the library. Everywhere.
No one wants to be startled by audio they weren’t expecting. And, we’ve all experienced the nightmare of trying to track down the source of unexpected audio in a quiet place. The frantic scrolling, the rage clicking, the cursing… you know what I’m talking about.
This practice has fortunately been on the decline. We think that 2020 will be the year that all web designers finally say goodbye to autoplaying media with sound.
8. Dark Mode
Image courtesy of Medium.com
Headache sufferers and victims of eyestrain voiced a collective celebratory cheer in 2018 when Apple’s Mojave OS debuted with a dark mode.
Dark mode essentially inverts the usual light/dark scheme seen on a monitor. Rather than dark text and images on a light background, dark mode features light text and images on a dark background.
So, if you’re prone to screen-related headaches, dark mode is a pretty big deal. And, when an industry-leader like Apple steps up to champion your cause, that’s a victory.
Since Apple launched Mojave, Google Chrome has also debuted its own dark mode. As others scramble to follow the two industry giants, the trend is picking up steam.
And, with debates raging about whether the various available dark modes are really dark enough, there’s no question that people are passionate about their dark mode.
2020 is sure to deliver many more websites, browsers, mobile apps, and web platforms embracing dark mode. Could this be a new web design best practice? Only time will tell.
Trends May Be Trendy, But…
Web design trends are only as important as their ability to authentically represent your brand online.
As we’ve mentioned before,
75% of consumers judge the credibility and trustworthiness of your business from your website’s design.
Today’s web visitors are sharper and more judgmental than ever. And, they’re only growing more so, as the generations who have grown up with internet access take on a larger and larger percentage of the population.
Today’s customers can see past meaningless trends. So, make sure you’re making web design choices that support good user experience and your brand.
Focus on good design.
After all, good design is good business.