Visual trends that UI designers should keep an eye on
Is it neumorphism? Is it isometric illustrations? Let’s take a look at three design trends in 2020 that may come to shape our day-to-day digital experiences.
The recent plethora of software and tools — Sketch, Figma, Adobe’s Creative Cloud, Cinema 4D, Redshift, etc.— is making design accessible to more and more people, and enabling designers to translate and emphasize their vision in any shape or form.
I can see these trends not only sticking but being used together in creative ways across the web and in many mobile applications. If used correctly, the combination of 3D illustrations, animations, and custom assets can provide users with an elegant flow. These are three trends that not only go well together but also individually.
3D Illustrations
Thanks to several Instagram experiments conducted by 3D enthusiasts, 3D became increasingly popular in 2019. 2020, however, will be an even bigger year for 3D illustration in design.
The prevalence of 3D illustrations is primarily because of more powerful tools such as OctaneRender, RedShift, etc. as well as cheaper graphics and video cards.
More powerful software and cheaper cards are allowing artists from different domains to experiment with 3D designs.
There are a million ways of conceptualizing flat design into 3D. I can see designers reimagining old ideas to form new experiments in the following ways:
- Illustrations for SMBs, corporates, and hi-tech (AI, machine learning, big data, etc.) and IT-related companies
- Illustrations and animations for children
- Geometric primitives (prims) for experimental illustrations
A few years ago, a web designer’s toolkit wouldn’t have consisted of any 3D software. Today’s designers, on the other hand, are learning illustration, photography, Cinema4D, animation, etc.
Designers have come a long way and I love to see them slowly maturing into superheroes!
Animations
In today’s fast-paced technological era, animation and motion graphic trends have certainly retained their pace. Recent advancements — many which were once considered impossible — in the 3D technology space have opened the doors to extraordinary possibilities.
2019 showcased a trend of 2D and 3D blends, empowering designers to add an extra layer of information in their art. Designers could now start creating more intricate objects and patterns by leveraging the combination of both 2D and 3D. This trend of using 2D and 3D in a fluid motion has allowed designers to create more realistic visuals and will certainly continue this year.
In 2019 we noticed web animations being used in imaginative ways. A key example is Apple’s AirPods Pro page:
2020 will undoubtedly witness an increase in transitions and scene-builds on the web, mainly due to exciting, new JavaScript libraries such as ScrollMagic. js, Three.js, Anime.js, Mo.js, Velocity, Scroll Reveal and so forth.
I created my personal website using ScrollMagic, which is extremely light, yet powerful. Despite heavily relying on this library, I was able to achieve excellent web performance:
Tools like SwiftUI will also empower iOS designers to code animations with tremendous ease. Here’s an animation that I created using SwiftUI in less than ten minutes:
Such libraries and tools allow for complex 2D and 3D animations with good performance. Designers have started to create remarkable visuals, which developers can now easily code, in extremely creative ways.
Animations can seem like a shiny new toy, but we need to tread with caution. Overdoing animations can not only hurt the user experience but also performance.
Custom vs. Stock Images
Late 2019 witnessed a surge in custom illustrations, especially in commercial design. This trend has indeed carried over to 2020.
Although a couple of years back, it was hard to persuade clients to adopt illustrations tailored to their business or industry, it has now become the industry standard.
Stock images usually apply to generic objects, those that are easy to visualize. With the rise of AI, blockchain, big data, and machine learning, custom illustrations have become the de facto of modern web and UI design.
Skeuomorphism — the design concept of making items represented resemble their real-world counterparts — was a prominent trend when the iPhone first launched. It has since faded into oblivion. Nowadays, skeuomorphism is used in game design and/or rich media.
Designers realized that simple and easy-to-understand styles do a much better job of narrating a story. Clean styles also empower designers to frame unique illustrations.
So, What’s Going to Stick?
The only thing I’m sure about is being unsure. My predictions are based on mere observations, analyzing thousands of websites, designs, illustrations, etc.
There’s currently a huge craze around neumorphism (soft UI), which is good for small apps like Music Player or Calculator. To achieve a neumorphic effect, all you need to do is tweak three shades of the same color to your liking:
- The light shade for the top left corner drop shadow
- The medium shade for the background and color of the shape
- The dark shade for the bottom right drop shadow
I recently created a concept for a Neumorphic Music Streaming Service based on the technique I’ve described above:
Neumorphism is in its nascent stages, so I cannot be certain that it will stick. We need to allow it to grow and be incorporated into real-world applications.
For now, neumorphism isn’t a replacement for the flat design trend; it’s simply an addition.
Gradients were also a fad back in the day. Many were unsure whether they will stick. But, today gradients graciously fit into UI design, providing elegant UX.
I’m eager to see what trends designers adopt this year and how they combine several techniques to provide stellar user experiences.
