The concept of using muted colors in your design certainly isn’t new. When you are comparing it to the vivid colors trend that we have almost everywhere, it surely seems something new.
Any modern UX designer knows that the minimalist, flat trend has been picking up steam over the past few years.
There are companies from the likes of Microsoft, Apple and Twitter, and they’re all taking advantage of this emerging style when they’re designing their digital products.
The flat design goes hand in hand with the minimalist approach.
The flat design will eliminate depth by not using shading and gradient, and favors one-dimensional geometry.
The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.
However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.
Making things too simple has actually had the opposite effect to what was required, and users find it more difficult to figure out where they can click, and why.
Thankfully, there’s a third trend to help this. Muted colors have picked up some steam as well.
Muted color schemes are everywhere in print advertising. However, in a print campaign, you don’t need a minimalist design or a flat effect, because the user isn’t interacting with a piece of paper, but instead they only need to look.
However, the muted color palette has actually taken on a new role aside from its primary one in the functional UX practices.
If you try to find a muted colors definition, you’ll find that the best answer to the “What are muted colors” question lies in the fact that these colors represent the modern, efficiency and progressiveness.
They convey to the viewer that whatever substance they’re looking at, is relevant, and not out of date. For example, you can see muted color in Drake’s “Hotline Bling” video.
These colors and muted pastels were very intentional, and they speak to the modern day culture and the masses. They also signify something of the moment. Being much easier to look at than harsh, sharp colors, they’re very conceptually fashionable too.
Nowadays, UX designers should know that their color choices are actually their design choices, and color can indicate a lot, just like flow, content, usability and function.
Choosing between a vibrant green or muted tones of green can make the difference between the user staying on the site, and leaving instantly. Just like the way a clunky UI can seem a bit analog, those bright, vibrant colors may look like a blast from the past.
Muted colors appear like they do because of:
- Lower value
- Lower saturation
- Mixing with adjacent colors
- Combination of any of the above
There are variations of the flat colors palette that you’ve seen thousands of times, and oftentimes they just don’t fit with the design aesthetic you’re aiming for. Even when everything else appeals to it.
This is where a muted color option can do wonders, as when you use it with a flat aesthetic, it’s a classic, polished look that is different enough for it to stand out from all other flat projects.
But, what is a muted color palette?
For the purposes of this conversation, it’s any hue that is highly saturated and adding a tone, tint or shade to make it subdued and less bright. You often get a softer, calmer color as a result that is easier to work with, as well as match to the overall design.
“Color” is actually a very imprecise term that we use daily. It consists of three main components, namely hue, saturation and value.
If you have a balloon where the equator is the hue on a 360-degrees, the vertical axis is the value, and the horizontal is the saturation, the colors can be visualized on the inside volume.
There are some other concepts that can help with this question, such as “shading” and “tinting”. For example, mixing any color with black is known as “shading”, and results in a bit more muted color.
However, adding white to a color is known as “tinting”, and results in a brighter color. However, not all colors can get bright or dark, such as yellow for example. Making it darker will turn it into brown.
Tints in muted colors
Adding white to a color, or tinting, gives you a color that is significantly lighter than the original, and usually known as a pastel. They can range from almost white, to a bit lighter than the fully saturated color.
Their feel is lighter, softer, and gives you a more soothing aesthetic compared to the bolder, brighter options.
They’re very popular with illustrations and also work wonders on photos. They will fall away from the main aesthetic, and they’re most commonly used when you have another focal point as opposed to the main aesthetic.
Shades in muted colors
Shades, on the other hand, make the color appear heavier to the eye, and range from an almost black color, to a touch darker than the original one. They work well in a variety of environments, especially when used with less black.
There are projects that are really dark and have a lot of black which come with readability problems unless you execute them exceptionally well. People often incorrectly assume that shades must look black, but when you’re evolving one of the traditional flat design schemes’ colors, this is not the case.
Tones in muted colors
Combining black and white with a color to make it appear softer gives you tones. Most colors are actually made using tones, as they’re complex colors with an almost universal appeal.
This is due to the fact that they pull from a few different parts of the color spectrum, and this is why tones are the first choice of artists and designers for most of their projects.
Ending thoughts on muted colors
Regardless of whether you’re branching out from some traditional flat design colors, picking one of the color techniques above isn’t your only choice. You can combine shades, tints and tones to create something that is different and absolutely engaging.
The lesson with these simple studies is that you can’t be caught up having to use a “by the book” trend. Use a different kind of technique to make your own trend. The color palette and changing it can be wonderful, and you can still get a flat design.
If you liked this article about muted colors, you should check out these as well:
- Photography Website: Design, Ideas, How to Create One
- Sports Websites Design: Tips, Inspiration, and Best Practices/li>
- Restaurant Websites Design: Tips, Inspiration, and Best Practices/li>
The post Muted Colors: Definition and How to Use Them In Websites and Apps appeared first on Design your way.
Source: http://ift.tt/2iWgdqf
No comments:
Post a Comment