UX and UI Design Trends 2020
mosster
You need only cast your mind back to humbler (and clunkier) web and mobile interfaces to realize how far we’ve come. UI and UX designers are constantly innovating, providing more positive experiences and facilitating more business success as they go.
So what UX and UI trends have we seen so far in 2020, and what more are we headed for this year? Our experts pick seven trends to watch.
1. Subtle Animation
Subtle motion can be a simple way to lift an otherwise tired web page, and recently we’re seeing it more and more in designs for typically dry subject matter (think finance, healthcare, or resourcing services). Of course, it’s important to achieve balance and ensure movement doesn’t dominate or distract on the page.
“In 2019 animation may have been a little overused,” says Stephen Cronin, Envato’s Content Specialist for websites and themes. “Hopefully 2020 will see it used more cleverly, with more subtle animation used to support user engagement and more obvious animation used to draw attention to just one or two calls to action.”
SEEK’s career advice page shows subtle animation in action—using a simple, straightforward idea to add fun and dynamism to an otherwise predictable navigation page.
With a customizable HTML template like Lums by Layerdrops, which includes landing pages, inner pages, a carousel slider, and CSS3 animation, you can start testing out what works.
2. Neumorphism
It’s arrived in a big way in the first few months of 2020, and it continues to get plenty of hype. But what is neumorphism?
First, the word itself: it’s a play on ‘new’ and ‘skeuomorphism’, the latter a term used in UI design to describe design elements that look like their real-life counterparts—for example, your computer’s calculator interface or a floppy disk to represent ‘save’. It was Apple that first championed skeuomorphic designs under the reign of Steve Jobs, before heralding the decline of skeuomorphism as its post-2013 mobile software became progressively more simplified.
“Neumorphism combines the best of flat design and skeuomorphism; we’re talking about clean interfaces, given a big hit of solidity through clever use of highlights and shadows,” writes Jim McCauley on Creative Bloq.
The trend’s heavy use of soft shadow makes for design that is both futuristic and realistic, and it’s bringing a new feel to familiar interfaces. However, the challenge to designers embracing this trend will be in its practicality—as Uyen Vicky Vo writes on UX Collective, neumorphism and accessibility don’t inherently go together.
Experiment with 26 elements included in the Neumorphic UI Kit by cerpow or the super-flexible Neumorphic UI for Smart House by merkulove, both available on Envato Elements.
3. Large Images
Bigger is better and getting better in 2020. While illustration is also still at the fore of website design, where illustration isn’t used, it’s images that are showing up as the main attraction. And they’re being used cleverly—whether as full, subtle backgrounds or as striking centerpieces.
“In 2020, having some sort of image (or background video) on your website is a must, and it’s a case of the larger the better,” says Stephen.
For backgrounds, think minimal design like the tranquil Lana template for ‘coming soon’ pages by Erilisdesign. Or test out something more dynamic, like Rideo by codecarnival, a mountain-biking eCommerce template.
4. Breaking Design Rules
Good news for the anarchists among us: 2020 might be the time to throw the rules out the window.
“Let’s break that grid and go with an asymmetrical layout. Let’s use a wild font that is not as readable. Let’s include hand drawn elements. Let’s put some elements over the top of other ones, obscuring them,” suggests Stephen (wherever it doesn’t significantly affect usability).
This trend is mixed in with emerging design trends like the street art aesthetic and the resurgence of the anti-design Brutalist style (seen in things like Brutalist Bootstrap HTML Template by mp-web on ThemeForest).
“I think this is an important trend,” says Tahlia Giannopoulas, Envato User Experience Designer, “because it challenges beautiful design and pushes people to make something engaging which isn’t conventional.”
5. Variable Fonts
Typographists will rejoice at this tip: never underestimate the right font in your UX design. A variable font is one file that gives you many options—achieving different appearances with options for spacing, weights, and widths, and leading to improved performance and smoother transitions between styles.
“With browser support improving, 2020 could be the year that variable fonts break out and become commonplace in themes and templates,” predicts Stephen.
If you’re keen and ready, try out some new typefaces straight away—like blocky, sans-serif Manufaktur by dafeld or the Victorian-style serif Figuera by Adamfathony.
Unsure where to start or want to go back to the basics first? Variable fonts are explained in more detail, with example fonts and step-by-step instructions on adding variable fonts to a web page, in this how-to guide.
6. Bringing Humanity Back
It’s well established, and everyone (us included) has continued to talk about it—but that’s because the push to return to more human elements in design has set in, and it’s not going anywhere.
“Playful and diverse humans work best,” says Kate McInnes, Envato’s Content Specialist for graphics.
Examples can be seen in the brand identities of the likes of Chobani or in the illustrations used by Mailchimp in place of icons and tired navigation cues (and they’re also drawing on our aforementioned subtle animation trend).
“We’ve seen web design getting slicker and shinier over the years, with a distinct ‘digital’ feel. Now we’re seeing brands bringing humanity back into web design through hand drawn illustrations, icons and fonts, along with the use of textures and grain effects,” says Camilla Anderson, Digital Designer at Envato.
Try templates like Duduk by deTheme or the Ultimate Creative 404 Pages by UserThemes on for size.
7. Branding and Art Direction in UX/UI Design
Ultimately, UI and UX designers are experts in bringing various elements—imagery, text, color, interaction—together as a cohesive design to break down the distance between screen and customer. And increasingly, these skills don’t necessarily come from those with tech backgrounds.
At Google, Jefferson Cheng and Emily Blank, who co-run the Material Design Imagery Program, recently spoke on Google’s approach to pushing the boundaries of typical UX.
“We don’t really prescribe a one-size-fits-all style for all of Google,” said Jefferson. He mentioned that often artists and designers who haven’t worked in tech before have a unique and valuable approach.
“For one of our design sprints we went to the Walt Disney Museum in San Francisco, and I thought it was so fascinating how through a variety of visual, stylistic elements, you can always tell a Disney movie from another animated film,” said Emily Blank in the same interview.
The message here is pretty clear: when it comes to UX and UI, it’s most important to be cohesive, distinctive, and to keep evolving.
