8 web design trends in 2020
Each year, our team works on dozens of different websites, but in order to be successful, we study hundreds more. As a result, we are very engaged with the most current trends. Additionally, we understand when a design isn’t a trend, and instead is just a one-off website.
Now that we’re nearly halfway through the year, we’re going to share with you 8 trends that have emerged in the web design world and that will be fundamental to the visual and UX success of sites that are built in 2020.
1. Abstract illustration
Custom abstract illustrations present a balance between photography and iconography and merge art with design. Bright colors and abstract shapes create an attractive and unique imagery.
Spotify’s fun pet playlist creator asks a few questions about your favorite furry friend, then creates a playlist that he or she will like just as much as you. The bright and bold abstract illustrations create a childlike innocence on the page. Sure, anyone could manually create a playlist that they think their pet would like, but this puts a friendlier and more fun interface on top of the process. You can apply it on your website to help make complex actions or ideas more welcoming to visitors.
2. Geometric design
One overarching design trend we’ve been talking about for the last decade is simplification. We’ve seen interfaces evolve from skeuomorphism (imitating real-world items on the screen, like when your iPhone’s Notes app used to look like a drawn moleskin notebook.) to more simplistic digital designs. Geometric design is an extension of that idea, taking plain otherwise simple shapes and intentionally combining them to build a story that is, in design terms, still very simple.
Typeform is a webapp for creating surverys, forms, and interaction models with a heavy emphasis on design. Scrolling through their homepage, you’ll quickly see the entire page is an homage to geographic design, with various shapes zooming in and out and resizing as you scroll. This makes the page feel alive, much more so than classic static scrolling, and it makes the visitor want to keep reading down the page. If someone wants to stay on the site longer, you can see how this design idea can benefit other sites such as yours as well.
3. Accessibility
We’ve devoted entire articles to the issue of accessibility. While you might not consider an accessible website to be within the design discipline, it really is a design problem and, as lawsuits directed at inaccessible sites continue to rise, it’s a problem worth considering as part of any site project. Even without the threat of lawsuits, it’s common knowledge that people of various age groups and backgrounds are increasingly using the internet on a daily basis, and building inclusive online experiences is the right thing to do.
4. Immersive experiences
Immersive experiences help a web visitor to better understand a concept, such as a product and its features, in a visually engaging and exciting way. Apple’s product page for their new 16” MacBook Pro, for example, shows the laptop opening as the user scrolls down the page, helping them to experientially imagine their own MacBook computer.
Apple
Immersive design need not be that involved or, indeed, expensive to create though. A subtly animated logo, a chart that fills in and out as you scroll making it easier to read, or a parallax image effect could all be other examples of immersive design.
5. Dark Mode
“Dark Mode” has become very popular in iOS and Android and is increasingly popular as an option on desktop OSes as well. Although it is very possible, most websites aren’t built with multiple “themes” for light and dark mode and instead stick with one design. Increasingly, in a bid to match these newly popular OS themes, sites are choosing to default to dark.
Of all the trends on this list, I think this one may prove to be the most short-term “hypebeast.” What I mean is that dark mode is enormously popular now for new sites and will likely continue to be for at least the remainder of 2020, but it can be a polarizing design choice, with large bodies of text in particular becoming difficult to read. It is important to balance the black with images that are bright or other pops of color. This is a very difficult line to balance.
One example of a site that does dark mode particularly well in our view is Richland Real Estate of Dubai. While the overwhelming theme of the design is decidedly dark, it’s not black. The photos still have color and the dark tints let the bold beige buttons pop. Additionally, clicking the CTAs to read more load a more traditionally white back with black text for the copy-heavy body pages. This is a great best practice to aspire to, because it’s generally easier to read black text on a white background.
Another example of dark mode that works well and that you may be familiar with is Spotify. Spotify’s app feels right at home on mobile OSes with dark mode set, and its website adheres to the same scheme. The system works because there are numerous elements, including their famous lime green logo as well as album art designs, that provide bursts of color to break up the blackness of the app itself.
6. Bold, vibrant colors
Speaking of bursts of color, this is in and of itself a trend, regardless of whether it’s used in concert with black mode. What we really mean when we say “vibrant colors” is usually a pair of several pairs of very saturated colors placed next to each other.
7. Isometric illustration
Isometric illustrations allow designers to show off different perspectives of their image from new and unique angles that make the subject more interesting. For conveying complex ideas, isometric illustration makes it possible to show more details with less clutter by introducing a simple 3D space.
Mixpanel
Mixpanel, an analytics platform, uses isometric illustration to fill their landing page with an engaging design that fits into the page’s focus on behavioral analytics by literally showing the “common thread” that binds distinct ideas together. It’s exactly what they try to convey in their text, where they mention that teams can build reports that monitor KPIs across multiple dimensions.
Use isometric illustration on your site as a modern way to both fill space and convey complex ideas.
8. Photography with graphics
You may have noticed that our list includes relatively few examples of photography. That’s not to say that actual camera-taken images aren’t in vogue this year; there will always be a place for photos. But a modern twist is to combine those photos with graphics in a way that makes both more engaging.
Concepts that are definitively out
From time to time we speak with clients that have a vision for their website design that they would like us to execute on. These visions are typically based on outdated design ideas and techniques that don’t lend themselves to modern website user experiences.
Slideshows: The 2000s decade ended with slideshows being one of the single biggest web trends, but ten years later, nary is one to be seen. There are many problems with slideshows, but perhaps chief among them is that you don’t know how fast to change the slide. If you change it too slowly, your visitors may never see all the slides; but if you change it too quickly it may change while someone is in the middle of reading the copy or examining the imagery, which could annoy them or hide the button that you would have loved for them to click on.
Feature Mosaics: This design, sometimes called “Metro,” was popularized by Microsoft in Windows 8. You may remember the series of “tiles” with information and basic images going across the screen; outside of Windows this idea translated to websites as well. It was heiled as the next generation of slideshows; essentially, designers began extracting the slides and placing them all on the page at one time in a “metro” design. This solved the timing concerns, since now you could see everything all at once. But it was also the antithesis of simple, as these design systems are meant to show lots of information at one time. As Windows 8 was generally heralded as a failure, the design system it brought with it was quickly thrown by the wayside and today sites built with this design risk being dead on arrival.
The Small Footer: Once upon a time, website footers featured a copyright date and perhaps a phone number or email address. Today’s footers are big and can easily fill up an entire screen fold. Why has the footer expanded? The idea is that if a website visitor makes it all the way to the bottom of the page, they shouldn’t be simply abandoned; instead, the site should continue trying to engage those visitors even more. They’re clearly interested…they scrolled all the way down there! That’s why today we have footers that feature newsletter signups, universal calls to action, and links to the most important prospect pages on the site.
Conclusion
Unfortunately, digital design tends to age more poorly than design for other media. This is because technology in general changes at a more rapid pace. While we keep our pulse on the latest design trends, like the eight we shared in this article, it’s of course also important to recognize that just because any given trend is popular in general doesn’t mean it should be applied without question to your site or project in particular. Indeed some of these trends don’t complement and would directly interfere with each other. It’s important to remember that design is really about solving a problem. In the case of your website, consider what you want your users to do while they’re visiting, then use design to make that task list as simple to complete as is possible.
Interested in updating your site with the latest design solutions? Let Empower Ideas help! Shoot us a note or schedule a complimentary strategy call so we can get going right away.
