Following the latest UI design trends and being on point is often considered a prerequisite in the design community. Every UI designer’s worst fear is being called outdated or irrelevant. So keeping in touch with what’s in and popular makes sense. Technology, fashion, media, and of course usability dictate design trends. Some might go strong for a while, but most have a year or two lifespan. While staying on top of what’s going on in the design community is a must, it’s important to remember that not all design trends are our friends, and following them blindly might not be the best idea.
We want to take a closer look at some hugely popular UI design trends that if misused can easily backfire and harm your design rather than enhance it.
Bolder, brighter, more color
Color is one of the most stable designs trends and allows you to design great-looking websites. A couple of years ago designers preferred neutral and muted color schemes to create clean and sleek futuristic designs. But with the arrival of Material Design, the trend has shifted to brighter tones. Bold hues, muted environments, and bright highlights are all essential to Material Design, and they made their way into one of the most popular UI trends of the year. The arrival of fresh Dropbox redesign only proves that it is still going strong. Brighter accents encourage user interaction and help provide the user experience. They create a statement, an expressive design that is sure to not only grab a user’s attention but have them talking about it.
But on top of their virtues, bold colors are also tricky.
They can make a difference in print design by helping the product to get noticed on the stand and thus making a sale. In UI, on the other hand, other things need to be taken into consideration when seeking a user’s attention, for instance vibrating colors and legibility of text. One of the outcomes of bright, saturated colors us vibrating colors. A renowned color theorist, Josef Albers has warned against their use in his book Interaction of Color:
“This initially exciting effect also feels aggressive and often even uncomfortable to our eyes. One finds it rarely used except for a screaming effect in advertising, and as a result, it is unpleasant, disliked, and avoided.”
Apart from being aggressive and unpleasant, vibrating colors can also damage text legibility and can be even called as “dangerous colors”. When two bright and saturated colors appear next to each other the edge between the colors creates a glowing distortion effect. These blurry vibrating edges are especially dangerous for UI fonts, small icons, and other detailed elements. Not to mention that they simply hard to comprehend for a human eye.
Dangerous bright color combinations
Color blindness
Another aspect to be taken into consideration is color blindness. Below are the same color combinations as seen by colorblind. And if these color choices may hurt the eyes of an average person, a colorblind person simply won’t see anything. Though there are different levels of colorblindness, it should be noted regarding accessibility.
The same color combinations as seen by colorblind
Bright colors can be a powerful tool.
But like almost everything else, they are best when used in moderation. Too many can make your design look flashy, while with too few you run the risk of looking boring. Most top web design companies know that everything in the design should be in balance and approach the application of bright colors wisely. When going for bolder tones, try to stick maximum to three primary colors, the more color you use, the more complicated it is to achieve a balance. The 60-30-10 interior design rule, where 60% is your dominant color, 30% for a secondary color, and 10% – accent, color can work for your interface as well.
Bright and expressive but not harming usability
Gradient is the new black
The use of UI gradients, branding, typography, illustrations, and logos have made a huge comeback and became one of the hottest UI design trends. With Instagram changing their logo from flat to color transition and Spotify adding bright transitions to their UI design, gradients are everywhere.
As a way of defying flat material design a lot of designers opt for experimentation with new ways to use tones. Color transition lets designers create and explore new colors and produce hues never used before. It gives the design a modern, fresh look. Gradients are eye-catching. They grab users’ attention and make them remember a logo, interface, illustration.
But making a comeback doesn’t earn you a place among the biggest UI design trends. The new gradients are not afraid of experimentation or even flat colors. One of the leaders of the design trend, Spotify, made a signature out of using bold duotones with a distinct gradient in all parts of their branding. And others have followed.
Flat colors
Another modern interpretation of gradients is using flat colors. Gradients came back in the era of flat design and naturally it has left a mark. Some of the boldest examples take colors straight from the flat design’s palette making a nice transition between two opposing UI design trends.
Though there are no strict rules on how to use gradients, there are some things worth considering before you start putting them everywhere. Fresh as they may make your UI redesign look, gradients are used a lot these days, often repeating the same color patterns. As with any trends, for a better effect, you make it your own rather than repeat someone else’s ideas. The beauty of gradients is in making things look natural. Just like in nature, objects don’t have one color but are a combination of different tones and shadows, gradients are striving for realism and subtlety. However, color transitions shouldn’t be put in the limelight and grab all the attention. The goal of gradients is to enhance the user experience, not make a point of using one.
Adding color and drawing attention to key elements with a subtle gradient
Narrating with animations as one of the UI design trends
Animations are fun plus they give numerous opportunities to your web design. And according to this website’s analysis, 100% of top award-winning websites use CSS animation. It helps to communicate things, explain how something works or how to do something. But more than that, they are becoming more thought out and used to create a website’s narration. Today animation is not just some entertainment effect but a carefully selected and timed element that becomes a part of the story. One of the best examples of using animations for storytelling is a story of a national park from the bear’s point of view by National Geographic.
As exciting as they are, there are still some downsides worth mentioning. When it comes to user experience, performance is key. And too heavy animations can increase loading time, be jumpy or even not work at all. The purpose of animations is to make user’s tasks easier and quicker to accomplish. But when overused they create the opposite effect and get in the users’ way, instead of helping and guiding them. Another potential threat might come from adding an animation for no reason. When it doesn’t solve a problem, it creates a distraction and confusion.
If you decide to go for animations, do it with meaning. Start by clearly defining why you need to use one, how it can help your users and if it’s in no way will annoy. They also help shape user experience by making it smoother. A good way to incorporate animations into your UI is by using them to tell a story.
A simple story about complex things.
But no matter what UI design trends are closer to you, it’s important to make them your own. Design trends come and go, but the impression you build stays. And in the sea of choices, the best is to find the one that reflects your brand’s identity. There’s one UI design trend that will probably go out of style – it’s the user first. Every aesthetic choice you make should be for the sake of your users, of helping, guiding them, making their experience better and easier. Focus on making your design simpler and more refined in terms of usability, and you will always be on point.