Tricky UI Design Trends
Tags: ux, ui, webdesign
Published: 2018-01-31 12:57:33

---
title: "Tricky UI Design Trends"
published: true
tags: ux, ui, webdesign
canonical_url: https://blog.pixetic.com/tricky-design-trends/
---

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](https://material.io/), 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](https://dropbox.design/) 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](https://www.amazon.com/Interaction-Color-50th-Anniversary-Edition/dp/0300179359/?pldnSite=1): _“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.

![design trends](https://blog.pixetic.com/wp-content/uploads/2018/04/vibrating-colors.png "design trends")


<center><a href="https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621" target="_blank" rel="nofollow noopener noreferrer" data-wpel-link="external">Dangerous bright color combinations</a></center>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.


![UI design trends](https://blog.pixetic.com/wp-content/uploads/2018/04/color-blindness.png "design trends")

<center><a href="https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621" target="_blank" rel="nofollow noopener noreferrer" data-wpel-link="external">The same color combinations as seen by colorblind</a></center>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.

<center><strong>Bright and expressive but not harming usability</strong></center> ![design trends](https://blog.pixetic.com/wp-content/uploads/2018/04/1200x400-colour-1.jpg "design trends")

<center><a href="https://pixetic.com/" target="_blank" rel="noopener noreferrer" data-wpel-link="ignore">by Pixetic Design Agency</a></center>


## Narrating with Animations

Animations are fun plus they give numerous opportunities to your web design. And according to [this website’s analysis](https://ihatetomatoes.net/web-animation-trends/), 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](https://www.nationalgeographic.com/magazine/2016/05/yellowstone-national-parks-bears-video/).

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.

<center><strong>A simple story about complex things. Explaining UX process by creating animated metaphor</strong></center> ![design trends](https://blog.pixetic.com/wp-content/uploads/2018/04/ezgif.com-video-to-gif-1-1.gif)

<center><a href="https://pixetic.com/" target="_blank" rel="noopener noreferrer" data-wpel-link="ignore">by Pixetic Web Design Agency</a></center>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.

<center><a href="https://pixetic.com/" target="_blank" rel="noopener noreferrer" data-wpel-link="ignore">Check out more works by Pixetic Web Design Agency</a></center>


The post [Tricky UI Design Trends and How to Use Them](https://blog.pixetic.com/tricky-design-trends/) appeared first on [Digital Design Agency Pixetic](https://pixetic.com/).