UI design trends for 2021

by
Patrik Svoboda
5.3.2021

Over the last year, we have noticed some interesting trends that quickly became very popular among designers. In the real world, however, they may not be so popular for reasons such as expensive implementation, unsatisfactory UX or narrow scope, which means that we will only see them exceptionally. Let's take a look at the trends that we will most probably find in design portfolios as well as in real projects in 2021.

Dark mode

Have you already seen dark mode in your favorite app? Probably yes, because more and more applications or even entire operating systems turn dark in low-light, especially in the nighttime. At least on the iPhone, you can encounter this on a regular basis. Dark mode is gaining in popularity among brands as well as users for the following reasons.

More and more people are spending their free time on computers or mobile phones, even at night. As a response to that, developers found out that low-light interfaces with dark background color help with eye relief and contribute to better work experience. They also reduce headaches, increase visibility in low light situations and save battery life if you have a device with an OLED screen. Dark mode is also widely used in applications where safety is the highest priority. For example, while driving we need to concentrate on that specific activity and don't want to be blinded by the bright light coming from our navigation.

Dark mode
Source: Dribbble

3D elements

3D graphic elements don't compete with 2D illustrations, they complement each other and visually enrich the website. 3D allows simulations of processes, movement of objects and interesting visualization. Both static and animated 3D graphics help brands show difficult processes, entertain users and overall improve user's engagement. Developers work currently with 3D graphics by rendering images and implementing them on websites in common formats such as PNG, png, or in new formats such as WebP. There are more and more web presentations that work directly with 3D objects, but they are still too challenging for some devices. It is only a matter of time when web presentations or even applications will be designed completely in 3D space, as Bruno Simon shows on his website.

Dark mode
Source: Dribbble
3D Elements
Source: Dribbble

Animations

Users interact with websites, they don't just scroll up and down. It's very important to keep the user's attention, especially nowadays with increasing competition in the digital world. When we apply motion to illustrations we make our designs stand out by adding them extra details and personality. They can be very helpful when telling the story about our product or services. Animations can effectively increase user's attention to the intended part of the website but only if they are well performed and have their own hierarchy. Otherwise, poorly executed animations can cause user's confusion and disorientation resulting in his leaving.

Source: Dribbble

Micro interactions

Micro interactions are tiny animations that help increase user's attention, support the storytelling and make designs feel more personalised. They are used by complex applications as well as simple websites. Micro interactions can help websites increase their attractiveness by adding dynamics to the interface and provide users with some entertainment. They create a compromise between useful but slightly boring static websites and too creative websites overwhelmed with animations. It's important to keep a balance between nice and useful and not discourage our users.

Source: Dribbble

Source: Dribbble

Neumorphism

Neumorphism is a reborn design based on skeuomorphism - famous style from the time when digital devices were a novelty. In 2020, neumorphism has been gaining popularity but we could find it in designers' portfolios rather than on websites or in mobile applications. This style is characterized by realistic design elements that seem almost tangible. For example, realistic looking buttons, search bars, text boxes or images and graphics. It is simple and catchy but be careful if your target audience are not designers or people with good vision as many users might not catch this effect. Keep in mind that important elements should always be clearly visible to everyone.

Neumorphism
Source: Dribbble

Other UI design trends

Glassmorphism

Glassmorphism is another visual style gaining popularity, especially thanks to Apple and its Big Sur software update. This effect emphasises light or dark objects, placed on top of colourful backgrounds. It is based on background blur and creates the look of frosted glass.

Source: Dribbble

Geometric shapes

This UI trend is based on using individual shapes to create more complex ones, which leads to a tidy visual structure. They are often mixed to create a mosaic or they can be used to create visual dividers between sections.

Geometric shapes
Source: Dribbble
Geometric shapes
Source: Dribbble

Conclusion

Some trends catch on in the design community, become popular and we automatically feel that we should follow those trends. It is important to keep our eyes open and not just follow blindly. A certain style doesn't have to be suitable for our needs and can cause more problems rather than bring improvements.