5 techniques for fine-tuning UX with color

Default avatar.
February 14, 2017
5 techniques for fine-tuning UX with color.

Color is one of the key elements in any design system. On websites or in apps, color can be used in a variety of ways: sometimes color can be used to create a focal point through contrast or through limiting the color to a selected spot; color can also help establish hierarchy and therefore influence where a user looks. In this article, we’ll talk about how to use color strategically.

1. Creating a focus point through proportions

A good example of color proportions is the design of Viporte. As you scroll down on their home page, each section is decorated with a large letter in the center. The letter is filled with a beautiful color before the sections’ animations kick in. The color of the different images which animate in are related to the color of the letters. The focal point is most certainly on the center of the sections thanks in part to the focused use of color. Proportions vary — sometimes there is a little color and sometimes there is a lot of it. Either way, proportions are used to draw attention into a focal point. If the color was more evident all over the place within each section, the focal point wouldn’t be as clear. 001

2. Catching attention through contrast

Another thing that color can manipulate is contrast. When the colors of the overall design are calm or mellow, adding a contrasting color will draw a lot of attention to the images. That’s exactly what’s happening within the design of Thinx. On the homepage, the overall color scheme of the interface is actually black and white. Yet, the design relies heavily on numerous photos. Especially at the top of the home page, the photos of the underwear feature a dark red background. Compared to everything else on the page, that’s pretty bold. Without a doubt, the thing that stands out here is the dark red. The red has a much higher contrast against the black and white color scheme. I like using Thinx as an example because it goes to show that bright and neon colors are not the only ones suitable for drawing someone’s attention through contrast. It really is just a balancing act of two colors which will let one of them really stand out. 002

3. Using color to create UX patterns

The best way to create visual patterns is through consistency. Patterns, in turn, create relationships a user can get used to having. It’s the same way users are used to certina icons being related to certain actions, i.e a trash can means delete. Colors are a lot more subjective because every website or app can make their own meaning for colors. Let’s take the relationship with the color blue on Underbelly’s portfolio website. It’s a simple example and it’s perfect to make my point. Anything clickable on Underbelly’s website is blue. Having used the website for a few seconds, it becomes clear quickly that their links are blue. And that’s how you create patterns through color. Patterns are good because they allow users and visitors to easily recognize something. The easier recognition becomes, the less people think and by now we all know how happy that makes Steve Krug. 003

4. Creating hierarchy through color

Another thing color can be good for is setting up a hierarchy. On Skore’s product page, just about every section has an elements of green to it. Not only is the green repetitive — which creates a recognizable pattern — it also helps distinguish the important parts of any given section. Often times it’s easy to explain hierarchy through size such font size. But the intensity of a color, as well as mount a color in use can be great in setting a hierarchy as well. In the example of Skore, the green has good contrast with the gray text and the white background. It stands out. Additionally, their color scheme does not rely on other accent colors making the green primary. All of that contributes to each section’s way to displaying hierarchy. Therefore, the green color helps guide user’s eyes towards the important elements providing a nice hierarchy within each section. The green elements tell a user where to look first. 004

5. Utilizing similarities of color

Off all the different things we do with color as designers, we mostly use it and reuse it in order to keep consistency in place within the design. Let’s take a look at InVision’s End of the Year landing page. At the top of the page there is a pink and violet gradient used as a background image. Further down the page the pink and violet are used for the button colors too. Additionally, the landing page reuses white over the pink and purple colored backgrounds. It also reuses the black and gray text color over the white backgrounds. If the colors were different each time, it would not look as great. 005 Let’s take a look at another example, specifically Co-motion. On their homepage, the creative studio uses a few different colors. But they are all similar enough in theirs tone to provide a cohesive flow. In this example, there is nothing that stands out specifically which can also be a good aim. In this case, the emphasis with color is made on a good and cohesive flow of the page, where you are trying to keep the user engaged and scrolling. 006


Color can be a great tool in helping to achieve various design goals. Color can help to define and establish a hierarchy and to provide a focus point. Color emphasis comes in various forms. Either way, working with color can be a whole lot of fun. Influencing where a visitor’s or user’s eyes are going can be easier with the help of a strategic color scheme.

Paula Borowska

Paula is a freelance web designer who documents her travels with photos and words. She works with small companies to help them create products that change the lives for their customers all in the hopes of gaining more customers and retaining their current ones longer.

Read Next

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…