Following the latest UI design trends and being on point is often considered 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 the most stable design tends. 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 design 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 for 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. 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.
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.
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. 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 gradient in UI, 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 trends. The new gradients are not afraid of experimentation or even flat colors. One of the leaders of the trend, Spotify, made a signature out of using bold duotones with a distinct gradient in all parts of their branding. And others have followed.
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 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
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 web site’s narration. Today animation is not just some entertainment effect but a carefully selected and timed elements that become 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 a user experience, performance is a 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. Explaining UX process by creating animated metaphor
But no matter what UI design trends are closer to you, it’s important to make them your own. Trends come and go, but the impression you build stays. And in the sea of choices, best is to find the one that reflects your brand’s identity. There’s one design trend that will probably won’t go out of style – it’s 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.