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.
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.
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.