2020 is here, and with it comes a chance to review which UI trends worked last year and which are likely to continue to do so this year. The start of the new year provides an excellent opportunity to look at emerging UI design trends that will continue to grow in popularity.
Staying on top of what’s new in the design industry, what’s useful (or not), and what’s falling out of favor is vital for UI designers who want to be able to offer their clients innovative ideas. Reviewing trends and looking at how they might evolve moving forward is essential to that endeavor.
UI trends 2020 will include storytelling in UI design (instead of thinking about a project solely in terms of UX), 3D graphics and animation, unique microinteractions, dark themes, simplicity, voice interaction, and more.
Storytelling is often only thought of in terms of UX. However, UI designers can also play an essential role in the storytelling process.
Through the use of color, typography, animation, and interaction design, UI designers can implement the stories necessary for good UX.
Google’s Pixel Earbuds landing page is a compelling example of UI storytelling. It guides the visitor through the benefits of the product through thoughtful animations, relatable imagery, and stellar typography to create a positive emotional response.
3D Graphics and Animation
3D graphics and animation aren’t newcomers to UI design. Their frequency has increased in recent years across multiple product categories. VR and AR apps, in particular, have taken advantage of these elements for things like viewing furniture in an actual room. Another common example is the 360-degree product view that has become popular on eCommerce sites.
If a UI design needs to be particularly eye-catching, 3D graphics are an excellent way to accomplish that. Animation adds to the visual appeal. While these effects are more time-consuming than 2D versions and require a specialized skill set, they’re worth the extra resources in cases where they add to the overall user experience.
Microinteractions are an essential element of any good digital product design. Yet, they’re still overlooked by many UI designers and stakeholders.
Microinteractions provide extra insight and feedback to users. They can include things like interaction animations, color changes to show different states, and haptic feedback in mobile apps. Microinteractions can elevate a design from functional to exceptional.
Dark themes have been around for a few years but took off in 2019. Apple did a lot to help that trend along when they released their Mojave update with the ability to automatically default to a dark theme in apps that support it. They also released an update for iOS that offers the same dark mode functionality.
Dark UI themes will continue to grow in 2020. One of the most significant benefits—beyond the visual appeal—is that for some people, dark themes with proper contrast can help eye strain.
One of the latest significant apps to get the dark theme treatment is Gmail, which started rolling out the option back in September. Now that all three major tech giants (Apple, Google, and even Facebook’s mobile app) have jumped on the dark theme bandwagon, this trend is unlikely to disappear in the near future.
Simplicity and minimalism come in and out of fashion in UI design every few years. Right now, they’re in.
Functionality is at the forefront with simple designs. Simplicity is more of a collection of design principles than a single trend. Simple designs often incorporate Gestalt principles, bold typography, minimalist color palettes, and plenty of whitespace.
Simplicity in design isn’t simple to create. It takes confidence on the part of the designer, and every element has to be perfect as there’s nothing to hide questionable design choices. When done well, it creates an elegant, high-quality feeling that people love to use.
Voice interactions were once reserved for the realm of science fiction. Smartphones and mobile apps changed that, making voice interaction not only possible but mainstream. Allowing people to interact with applications via voice commands opens up a world of possibilities for interaction with a product. When a consumer can give voice commands, they can use an app in situations where touch interfaces aren’t safe or practical—such as when driving or following a recipe or tutorial.
Voice interaction isn’t new, but early iterations were clunky and often didn’t work well. In the last couple of years, voice interaction has evolved (usually with AI-powered assistance) to be a practical method of communication with an app. As voice control improves even more, it’s a trend that isn’t likely to go away. Google announced significant upgrades to its Google Assistant feature at I/O 2019 that some speculate could be the start of voice interactions replacing touch interactions almost completely.
UI designers will benefit from familiarizing themselves with how voice interactions work and how they can best integrate them into their products, particularly mobile apps. Eventually, voice interactions may overtake other types of interactions, including on the web.
Typography UI Design Trends
New typography trends pop up every year, and last year was no different. Some of the more prominent UI trends that are likely to continue in 2020 include a return to serif typefaces, not-so-oversized hero text, and layering type with other elements.
When graphical user interface designs first started appearing, serifs were generally frowned upon as hard to read on a screen. Low screen resolutions meant the finer details of letterforms (and small-scale visual details in general) were lost, making many typefaces that traditionally worked well in print look terrible on a computer screen.
As screen resolutions increased, the idea of serifs being hard to read on screen somehow persisted. That’s changed in recent years, and serifs have been popping up all over the place, including in header and hero text, where they were typically less common than their sans-serif and display font counterparts.
It seems like hero text has been getting bigger and bigger every year, often taking up the entire space “above the fold” on a website. That changed in 2019, with smaller (though still prominent) text used over hero and header images. It’s a welcome change that reintroduces whitespace as a valuable part of hero design.
Layering type with graphical elements, either underneath or on top of images (or sometimes both), is another growing trend. Sometimes, text is over- or underlaid with boxed images or colors, while other times, it’s fully integrated with other visual elements.
Looking Ahead at UI Trends 2020
The best UI trends are visually appealing while improving the overall experience and usefulness of a digital product. The trends covered above will continue to evolve, and new ones will likely emerge in 2020.
As larger brands adopt trends, and they become more ubiquitous, they evolve into standards and become part of the digital landscape. This evolution is already happening with trends like dark themes.
In other cases, trends stick around for a few years and then fall by the wayside as better ideas and methods emerge. One example of this is the parallax scrolling UI, which was incredibly popular a couple of years ago but isn’t nearly as prominent coming into 2020.
New trends will emerge in 2020, and some of the ones included here may fade out by the end of the year. Expert UI designers are always looking for better ways to present content, meaning some UI trends 2020 will have virtually disappeared from the digital zeitgeist by 2021.
• • •
Further reading on the Toptal Design Blog:
Understanding the basics
What is storytelling in design thinking?
Storytelling is an important aspect of user testing in the design thinking process, to collect input from people, as well as to connect with them and build empathy. Among UI design trends, storytelling is implemented in a different way, by visually interpreting stories that are functional and captivating to users.
What is a 3D interface?
A 3D interface is one in which a person can interact directly with a 3-dimensional environment (one that includes x, y, and z axes). This UI design trend can include 3-dimensional input devices (most common with video game consoles) or be used via more traditional input devices like a mouse.
What are micro animations?
Micro animations are a modern UI design pattern that uses small, generally functional animations to give people cues in how they’re interacting with an interface. They provide visual feedback to the user to show changes to the interface more clearly. Micro animations can make an interface more intuitive to use.
Why are microinteractions important?
Microinteractions are an important UI design trend that makes a digital product easier to use. They provide people with both positive and negative feedback for actions they’ve performed in an interface and prevent confusion by clarifying that an action within the interface produced a result.
What is typography in UI design?
Typography in UI design includes all of the text-based content within a digital product. It includes all the textual elements of a UI—titles, subtitles, body copy, captions, helper text, menu copy, and more—and when done well, provides visual hierarchy within a modern UI design.