UI/UX Design Trends for 2020

Be sure to check out the latest UI/UX design trends for 2023.

#1 Meaningful value

As technologies progress and give designers and developers these insanely powerful tools, the tech culture switches the conversation towards meaning and narrative rather than emotion and sensation.

Falter Inferno by Wild. A depiction of today’s living hell, daring you to take a look in the mirror.

Gestalt theory implies that the whole is greater than the sum of its parts. When we are solving a business problem with design, we are contributing to something bigger than a company’s wellbeing.
Affecting people with products is a responsibility beyond judicial. Social impact is gaining momentum and what the company represents while doing its job is as important as the quality of the product or service. 

Why you do something will be more important than what you do.

#2 Astonishing animation

There is a misconception that complex animation is hardware dependent to the point where it makes no sense to produce it for the mass run by sluggish processors.
Turns out, there are products capable of outperforming industry standards written for slow hardware without relying on hardware manufacturers. GreenSock is such a company. They make plugins and dev tools for interactive animation. Somehow they optimize the process of implementing interactive projects to work on nearly any device “efficiently and buttery smooth.”

Corn. Revolution by Resn on GreenSock.

Motion tells a story better than words. With better tech like TweenMax and WebGL, it will become about putting substance into the animation. For a lot of design companies, us included, it’s an uncharted terrain but it’s cool to finally get quality animation into masses. This will lead to bullshit saturation and an inevitable purge. 

Time to make a move. Literally

#3 Asymmetry & split screen

The block layout is a classic. It reflects an easily digestible flow of information when the concepts have defined boundaries. It caters to the sense of completion and just helps understand the structure better. Blocks mean symmetry. However, there’s an asymmetrical trend that is always there but never makes it to the mainstream. Especially with today’s wide desktop screens.

Baas Amsterdam asymmetrical layout.

We feel like the coming year is when asymmetry makes another comeback. First, everyone is used to dealing with multiple tools all battling for the screen estate. We feel comfortable with split-screen setups and this principle is making its way into single-platform layouts as well.

2019 Annual Digest by Abb-d Choudhury and Sara Scobie.

What was originally a utilitarian approach to give two separate information blocks in one screen, now becomes a visually appealing way to present any type of information just because. The queen of asymmetry in 2019 is Zhenya Rynzhuk. Excited to see her progress. Give her a follow.

Split.

#4 Low-key gradients

The general design trend technology is gearing towards is automation, AI delegation, less is more and everything of that kind. It’s not to write about those anymore. However, the visual elements attributed to that kind of design are making its way into what is still a heavily-human job.

One of those is subtlety in colors, also, simplification and reduction. The idea that is something is smart and automated brings the light and dreamy tinges.

2018 was a year of blue and purple gradients. 2019 is the same but softer. Expecting to see more of that dilution in 2020. 

Doctor fire with water.

#5 Harmonious colors

The colors of 2020 combine “optimism with understatement, a timeless way to lighten up.”
Overall, the colors expected to trend across all the design industries are way more natural than the previous couple of years’ palette.

Doesn’t mean all the colors have to be of the same palette. A bright out of place color element conveys the effect even better. 

Tone it down.

#6 Human writing

The progress of the UX writing trend from the past two years set the standards high for writers in design. The term “UX writing” itself will fade as any product writing for the people is UX writing.

Text does not accompany design, it’s a part of it. Context matters, author matters. Text is as important as what happens after it – the picture is a reader’s mind and their action. Human writing allows a reader to judge, choose, and relate to the product.

There are no magic words.

#7 Blended experiences  

Visuals are stronger than words. Combing fast-loading controlless videos integrated into layouts is a good way to liven up the experience. Content is king and the way it gets delivered plays a huge role in the impact it makes.

Blending the content means building a wholesome experience on your terms. Later, we’ll talk about tailoring the experience based on user’s behavior but the ultimate trend is a website that does not consist of screens, illustrations, and videos. It’s the composition of all.

Anime “OBSOLETE” by JUNNIE.

Build experiences, not construction kits.

#8 Beauty is back  

There’s not a lot to say here. Get this.

“Ensure it feels like it’s made by humans, for humans.” – Stefan Sagmeister

#9 Desveloper  

A designer’s kryptonite is development. Sometimes we design things that are impossible to implement within a specific timeline or budget, or team. Some designers learn to code and become “dangerous” because they know enough to argue but not enough to actually make it. 

This dichotomy has to end in 2020 and because of tools like Webflow, the future is here. Basically, it’s a visual tool that allows you to design whatever you want as long as it can be done in HTML and CSS. Every pixel move is a code change, which makes this approach a perfect way for designers to start coding.

When everything is gearing towards interaction-based design, it gets harder to explain how the interaction should work and look. The importance and the need for a visual tool like that are hard to overstate.

Be a “dangerous” designer. Mingle with code.

#10 Empty space  

When elements fight for attention, none of them is getting enough. When there is a spotlight on one element, it gets all the attention. Depending on the message the UI is delivering, it’s important to give it some space, to let that message sink.  There are micro and macro empty spaces, text and paragraph spaces, they can be active and passive, and all of them scale. There is a pragmatic aspect to it, as we tend to process condensed information longer and with less comprehension.

Surrounding the idea with empty space is a way to make the idea stand out. Now let’s make sure what stands out is worth it.

Nothing is something.

#11 Heavy renders

While it’s hard to imagine a designer whose default behavior does not involve a vector set of icons and an “our advantages” block, the upper crust of the industry is taking it back to simple scenarios and stellar renders.

Stunning Apple AirPods Pro presentation/landing page.

To present a product or a service in 2020 more companies will use super-detailed images of products and people using those products. 
Hi-definition renders emulate a near-tactile experience which is one step away from a purchase. Even though there are possible load time issues, with the right technologies and varying UX in place, things can get ugly. 

So real I can smell it.

#12 Varying UX

Just like there are different types of temperament, there are different types of behavior online. For a long time, we only used to cater to an average user in an average context with an average engagement level.  We are capable of changing the experience for an infinite number of people based on their behavior on sight. Modern analytics allows us to determine who you are dealing with: a just-browsing wanderer, an uncertain lead, or a determined hero. Depending on the amount of time they spend on a screen or the scroll speed, a website behaves differently.

It will take an aggressive stance on user research and might not be an option for service design but brand designers will have the experiences tailored. That means understanding the scene, the mood, and the repercussions of the actions a user is taking. 

Teach your designs to understand context.

#13 Mobile browsing

The PWA movement channels the gap between apps and the mobile web. The same functionality can be accessed in two ways which obliges designers to build consistent UX patterns. 

One of the ways apps and mobile websites are different is the latter need mediation – a browser. 2019 is the year when the first real mobile-first browser, Cake went viral.

Comedian Esther Povitsky demoing the Cake mobile browser.

Technically it’s an app from the AppStore that is set to liberate users from apps. But what it does is provide a familiar app-like experience when using search engines and browsing websites. PWAs are here to stay and with support of mobile-friendly browsers, we can expect more of them to actually hit the market.

Embrace the swipe.

#14 Typographic overlap

It’s the extension of the bold typography trend. The overlapping poster-based headings are an alternative to sound. You can deliver a message in a specific tone with this and in a graphically attractive manner.

Because of the amount of textual information we consume daily, we tend to vocalize lines that stand out. Making them stand out, in this case, is the real challenge.

Largo Studio uses overlapping text to illustrate the video of them working on a project.

Put a word on it.

#15 Other illustrations

By 2020 we’ll have everything illustrated to the point where we are reinventing styles of illustration which are nothing but the dialed-down figments of fine arts regenerated in the digital media. 
This opens a window of opportunities for artists who hate stock illustrations.

With this trend, it all comes down to how you market it. Absurd design is a good example of taking a purely artistic approach to producing content and putting it on the business rails.

Party in the front, business in the back.

#16 Custom navigation

Products that deliver custom experience is the ultimate trend of the coming year. There are proven conversion methods and prerequisites for specific goals but if we think about supporting a brand with powerful visuals, we can utilize all the website assets, navigation being one of them.

 

Navigation can contribute to the effect if it gets logically woven into the story. There are two types of navigation elements: visible and hidden. It’s important to design navigation relying on how the information flows.

 

Navigate the effect, not its residue.

#17 Full-screen visuals

Unfolding the social-media-induced central alignment of content is a challenge on multiple levels. First, the center of the screen is where our eyes naturally gravitate to, second, we play a safer bet by placing significant content in the middle of the page, however there are benefits to utilizing the entire estate of the page. 

Brand Studio website home page is a peephole into a crazy world.  

For a chance to create an immersive experience, it makes sense to show that the screen estate is just a portion of the visible content. This encourages users to explore further and potentially reduces bounce rate.

Shimane Misato from Japan is an interactive full-screen story about something.

The depth of the full-screen experience depends on and can only be limited by the effect you are producing. It makes sense for complicated issues and socially significant problems where it’s important to put a person into the right context. 

Fishing Feed website is taking you into the depth of the fishing industry problem.

Don’t build walls, tear them down.

#18 Data visualization

Because the technologies that make stunning interactive experiences possible are getting more accessible, marketers can build their whole strategies around visual data. To show is better then to tell but if you can tell and show, it’s the ultimate narrative. 

WebGL and 3D is a powerful combo if there is meaningful data to display. Anything that picks data is a source. All we have to do is filter it, find the most impactful ones, and take them for a ride.

This is Autoneum visualization of automobile acoustic management. It’s a science and this certainly makes it look like one.

Data visualization is not only charts and graphs designed into a digestible piece. Depending on what the user may appreciate, we are free to select data sources and present them in a graphic way. 

Visualize what matters, not what’s available.

#19 Uninterrupted UX

Need a product? Click here and visit this page. Need to see more pictures? Click here and scroll. Want some reviews? Click here and check out the bottom section. Wanna buy? Click the cart icon, then go to the Checkout page, bring your credit card, oh but sign up before that, fill 27 text boxes, agree to Terms & Conditions, get an email invoice, track your order, boom it’s here. 

Every step of this process is urging you to doubt your purchase intention and bounce off. Every box you have to fill takes from your time doing something else. The motivation has to be high as a kite to go through a generic buying online procedure. And it can be, because people know how to market things these days.

And what if all a website needed from you to ship a purchase, was your intention. One button to control it all. Mobile is tapping into that by integrating payments into simple gestures and face IDs. The web is yet to see the rise of this trend.

Technology is under an obligation to humanity for being negligent about privacy. The only way to fix it is not by shying away from personal data but actually putting it to use for a better purpose. A user does not have to speculate whether they can entrust you with their personal information. If you are asking for data, it has to be embedded in concrete that it will stay safe. And it’s on us. Our job is to take a user’s intention and turn it into delight. Whatever we are using to do that is okay if it stays within the boundaries of ethics and aligned with the modern requirements of security.

The internet runs on cookies. Without them, it’d turn into shit. Geolocation will be next. Uninterrupted UX starts where sensitive information is touted as a trade sacrament, not a commodity. 

It’s not only about buying. Any user objective has to be treated that way. If you won a battle for attention, you are not allowed to lose the battle for satisfaction.

Don’t interrupt a person who wants to give you their money.

#20 Some dignity

Technological hype train keeps everybody on their toes. In the quest for immediate adulation, we start forgetting what brought us into the industry and that’s years of studying, bumps, bruises, and some sort of expertise earned.  By blindly jumping on the hype train, we neglect that for a handful of Dribbble likes, features and reposts. Design trends are cool but own opinion is better. 

Quick test. Scroll your creative account down one year. How many bottle-cup type things have you found? Guarantee the same will be with the Cybertruck a year from now. If it makes you cringe, most likely it was done for the hype. There’s nothing wrong with making money but designers are remembered for being different. There’s no recipe for success but there is a benefit in looking for it.

I’ll end with Marty Neumeier’s quote from The 46 Rules of Genius: An Innovator’s Guide to Creativity:

“Creativity is the discipline you use when you don’t know the answers when you’re traveling to parts unknown. On this type of journey, missteps are actually steps. Every mistake brings you closer to the solution.”