Palawan State University Computer Studies – UI/UX Design Study Notes 1

COLORs in UI/UX DESIGN

Color use is important for creating a positive image for your customers, that’s why color
plays a leading role in interface design. It stimulates all senses by delivering a message
instantaneously like no other method of communication.
In this study, we are going to discuss the impact of colors on UX and UI design, and, as a consequence,
the perception of the whole product or service.

Why is color important in UI and UX design?

The decision-making process takes around 90 seconds after the initial interaction with products or
interfaces we see. Moreover, the study found that approximately 62-90 percent of the assessment is
based on colors alone. Therefore, well-considered colors use can contribute not only to distinguishing
products from rivals but also to shaping customers' emotions –positive or negative–and hence,
attitudes towards certain products.

Color is more than just an esthetical element. For example, choosing between a dark or light UI affects
not only the attractiveness of your web and mobile designs but also the usability level.

From a strategic point of view, visual appearance affects consumer purchasing decisions, as it was
mentioned. As a result, some businesses are incorporating colors for UI design into their marketing
strategies to achieve better results.

How does color affect users?

Designers can use color to influence how users think and behave towards a brand, and how they
perceive some details. And this is why designers and product owners need to understand the meaning
of different colors. There is no doubt that colors can stimulate our brain chemistry and generate
feelings accordingly.

The results can be physical, as well as mental. The green and blue colors that are the most common
in nature can provide better healing for the stressed-out mind. This is why blue, for example, is
commonly used in mental therapy for reducing stress.

Color, however, is too dependent on personal experiences to translate universally into particular
feelings. Some shades or tones can give very different meanings. Research shows that individual colors
may be oppositely perceived due to personal preferences, experiences, upbringings, cultural
differences, and context.

Additionally, predicting user reactions to color appropriateness is far more important than the
individual color itself when it comes to picking the right palette for the interface.

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 2

Color components
Everybody knows what a color wheel is, but to understand the meaning of this model, it's important
to distinguish the components that comprise the visual nature of color. According to the Munsell
System, colors contain three dimensions:

Hue - describes the pure spectrum color: red,

yellow, purple, blue, etc. Hue is a degree on the
color wheel (from 0 to 360o) where 0 (or 360) is
red, 120 is green, 240 is blue.

Chroma, or saturation, may be defined as the

dominance of the hue. Pure colors are fully
saturated. Chroma is also a percentage value: 0%
means a shade of gray and 100% is the full color.

Value, or lightness, shows the overall intensity.

It is the only component of color that may exist
by itself. Lightness is measured as a percentage:
0% is black, 100% is white.

Starting with a base color, the color palette for the design project is developed by gradually picking
other colors that form a visual harmony with the base. Playing around with a color's value (hue,
chroma) helps to fine-tune the contrast, creating a sense of balance.

It's also important to consider two different color types when selecting a palette: tangible colors (the
surface of objects) and the others that are formed by light. Both types produce two models of color
BS Information Technology: Prepared by: Demy Dizon
 Palawan State University Computer Studies – UI/UX Design Study Notes 3

that shape the color wheel: additive and subtractive. The additive color model considers the primary
colors: red, blue, and green, so it is also known as the RGB color system.

Cyan, magenta, yellow, and key-black is a subtractive color model called CMYK. Unlike RGB, the
mixture of CMYK base colors creates pure black while the absence of all is 100% white, therefore it’s
commonly used in printing. RGB color scheme, on the contrary, is widely used in digital projects,
especially while designing websites or mobile apps.

Best practices in UX design

User experience is a conglomeration of activities that seek to optimize a product for effective and
enjoyable use. The overall feel of the interface is the subject of UX design. Concerning colors, certain
points and rules should always be considered while developing a user-friendly app.

Blind awareness
Different forms of color blindness affect about 8 percent of men and 0.5 percent of women. People
with red/green blindness have trouble distinguishing reds, greens, and yellows with similar values. For
this reason, we recommend using special tools to check the functionality of your website or app. You
can download the color blindness simulator for Windows, Mac, and Linux from Color Oracle or you
can upload images to Coblis to check them by nine color vision types.

The same rule can be used in input forms for better user experience. Users who cannot see the red
characters can face some difficulties if they receive an error message similar to 'Please, correct the
fields highlighted in red'. It is better not to refer to the particular color and give a more specific
description such as, ‘Please, re-enter your email address and phone number’.

The impact of color combinations on readability

Each color has a value based on its color wheel location, which determines how well it works with
other colors. Overlaying colors at opposite ends of the color wheel can make reading easier, especially
for users reading something from a phone screen in bright light. On the other hand, placing text above
backgrounds with similar color values can complicate reading.

There are some color combinations (bright red/blue or red/green) which you should avoid when
designing a color scheme for your website. Have you ever seen a static image with some colors floating
in front of the screen while the other sinks back into it? The effect is known as chronotropisms. This
phenomenon creates an illusion of depth in a picture or text, and pretty often it can cause a negative
effect among users.

Colors in micro interactions

Dan Saffer, designer and author of the book ‘Micro interactions: Designing with Details’ said that
micro-interactions as contained product moments that revolve around a single use case. They are the
types of interactions that we hardly notice until they are there. When designing a web or mobile app,
interactions such as hover and active states should be included in the context of colors. For example,

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 4

by changing the saturation level of the button basic color and making it more transparent or, on the
contrary, bright, designers make the app more interactive and intuitive to use.

The importance of A/B testing

A/B test plays an equally important role in UX design as in marketing. Color plays an informative role
and help users to navigate the app. If app colors are too uniform and customers have trouble finding
the primary action on each screen, then you can try to subtly change the shade of various elements.
If that doesn't work, then you can change the color entirely, and conduct A/B test to confirm if a
change of color is necessary to improve navigation.

Best practices in UI design

While UX design determines how the interface works and how customers interact with it, the
responsibility for its visuals lies with UI design. The user interface design focuses on the product's
look— how each product feature should be presented, including buttons, inputs, text, pictures,
checkboxes, and any visual interface elements that people interact with. Colors play one of the most
important roles in this process.

Connection with the brand

Some studies revealed that our brains prefer recognizable brands immediately, making color an
important element when creating a brand identity. It can help your product or service to stand out by
choosing the right color. For example, if a company has bright corporate colors applied to the logo
and branded items, applying the same colors on its website or mobile app is always a good idea. This
is how the design creates consistency of visual solutions that connect all communication channels of
the company as well as enhances brand awareness.

Balanced color combinations

Color schemes work best if the quantities of colors used for the design are not equal. More interest is
generated by a variety of proportions, and you can set the mood and energy level of a design layout
simply by choosing colors that play an emphatic or accentuating role.

One of the most famous examples to follow is the rule of 60:30:10. It is a simple theory for creating a
well-balanced and visually interesting color palettes. One color (usually something quite neutral)
makes up 60% of the palette. The extra color reflects 30 percent of the palette. And then a third color
for the remaining 10 percent of the design is used as an accent. This method makes it much easier for
designers to start experimenting with unconventional color palettes without going too far in an
industry or brand outside the expected norms.

In addition to the proportion described above, there are also palettes based on the color wheel which
offer further color suggestions, for example, monochromatic, analogous, complementary, split-
complementary, triad, and rectangle.

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 5

Contrast and accents

Color contrast is a crucial component of any visual composition. It brings individuality to each element
of the UI and makes them all noticeable. User interfaces featuring only one color sometimes may look
elegant and minimalistic but have fewer chances of attracting attention. At the same time, high
contrasting levels of color may not always work well. If the content and background colors contrast
too much with each other (like red on blue, for example), the text may be hard to read or scan.

In addition to primary colors, each app and web page needs a couple of accent colors to communicate
different messages to the user. For example, you can highlight a new feature with an eye-grabbing
color like yellow, pink, or teal. You might also need colors to highlight various semantic states, such as
red to show an error, yellow for a warning message, or green to highlight a positive outcome.

Tools for inspiration and choosing your palette

To complement our guide about colors in UX/UI, we also encourage you to experiment with online
tools that can simplify the task of creating a unique color scheme and bring you inspiration. Here are
some of them:

Adobe Color CC - allows using a color wheel to create a color scheme. The created scheme
can be easily exported into Adobe Photoshop. This tool also provides a wide range of color
combinations from the creative community.

Coolors.co - a fast and easy tool that also helps designers with generating color palettes. With
Colors, users can export and save the generated color palette as PDF, PNG, SVG, and other
formats. Moreover, Colors has its own app for Android or iOS, as well as Adobe Photoshop
and Adobe Illustrator plugin.

Dribble Colors - generally, Dribble is one of the most famous places for UI inspiration. Also, it
has a tool for searching by colors. If you want to do visual research on how particular color
was used by other designers in ready projects, go to their page, and select a desirable color.

Behance - the leading online platform to showcase and discover creative work across
industries. Behance users upload their work in the form of profiles comprised of projects -
groups of images, videos, and other digital content with a related theme or process. As a
bonus: here you can find a UIG portfolio with the latest projects and become a part of our
community.

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 6

Custom Colour themes for your product

Things to note before providing multiple Colour themes for your product’s UI

If you’re a designer coming up with a product from scratch you would’ve definitely come across at
least one of these,

Let’s go with white Colour. It will look Clean, modern and give more white space(?!).
I’m definitely going to do a dark theme for this!
Umm. Both the white and blue looks good. Let the users decide!
Night mode or dark theme?
and much more…

Providing custom Colour themes or coming up with a single good looking Colour theme for your
product is not an easy task for a designer. There are numerous important things to consider before
you decide to give those three to four extra Colour themes for your product. This article gives an idea
about some of those stuffs you need to keep in mind when coming up with multiple Colour theme for
your next app.

Brand Identity
Your product should define
your brand. You cannot choose
a theme that is completely
contrary to what your brand
feels and convey. Facebook is
one best example where they
stick to their brand value across
all platforms. The solid blue,
when you think about
Facebook forms the brand
identity because all the
2.5billion users see the same
Colour all over the world.

(Scalability is another factor — which is discussed below). Imagine if users are allowed to choose their
favorite Colour for Facebook (like how Orkut used to be). ❌

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 7

B2B and B2C

The next important thing is to know the nature of your product. If your product is B2B (Business to
Business), the end user is going to see what the other business you offer the product to wants the
users to see. i.e., the business who is going to use your product for their users, will be needing to
customize the UI according to their brand identity. In such cases, providing options to customize the
user interface becomes an added advantage. One good example of B2B is Intercom, (which lets you
use your website’s Colour theme for their product ).

B2C (Business to Consumer) is where you get to decide what the end users want to see. Slack handles
theming for users very well. It has a few prebuilt themes which looks pretty neat and also lets the user
to build a custom theme from it. So, both people who use for business can build a custom theme that
adheres to their branding and the individuals can build whatever they like.

B2C (Business to Consumer) is where you get to decide what the end users want to see. Slack handles
theming for users very well. It has a few prebuilt themes which looks pretty neat and also lets the user
to build a custom theme from it. So, both people who use for business can build a custom theme that
adheres to their branding and the individuals can build whatever they like.

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 8

The interesting concept in slack is, you can share the theme you built with the channel and others can
apply it on a single click .

One more great example of B2B and B2C is Twitter (see the dark mode section to know more!)

Understanding Your User Group

Understanding the core user group of your product is very important since that helps in crafting the
experience for the end user. Majority of the messaging and chat apps which target teenagers give
some funky colour themes to attract user groups . Some examples are hike and telegram, where
they give much varied multiple colour themes to choose from. If the user group is elderly people or
your product is more business oriented, you must reconsider giving out funky or playful themes for
your app.

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 9

Scalability
Scaling your product for a large user base is going to be a necessity, with which comes the difficulty in
providing multiple themes for such a varied user group . Facebook for example has over two billion
users using the app and they cannot check multiple Colour themes and fonts for such a huge number
of users. (different languages, devices, etc.) Hence, it is a difficult thing to implement when coming to
give Colour themes for product that is well established and has a very large user base. Google products
such as Gmail, follows the same suit where it does not allow the users to change the entire theme of
their product. Instead, it gives you an option where you can change the background image (and
nothing else ) and they match the texts and contrast depending on the theme/image you use.
(There are however third-party extensions that you can add to your browser to change the look and
feel of Gmail )

The Dark/Night Mode

Providing night/dark mode mainly depends on the type of product you provide. If the users are going
to see a lot of content throughout the day and night, you might need to consider having a dark/night
mode to improve usability and for better reading of the content at low light . This has been an
increasing trend with popular apps that deal with content and data giving night mode for its users.
One such hit was twitter’s night mode (who uses the normal mode now, anyway! )

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 10

Interestingly twitter also allows the users to customize how other people wants to see their page .
Which is a great advantage to represent their branding. You can take this as another example of how
to handle both the end user and the business’s needs on providing customization to the app UI.

Medium, also supports a night mode

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 11

The Conclusion & The Complexities

There are definitely much more things to note before deciding on providing themes for your app or
study. More than that, as a designer there are definitely many pain points one must go through when
coming up with such themes.

Never design for multiple themes at the same time. Coming up with a MVP should be the goal,
not coming up with something that has an option to change colors.

Never give too much to the users. Have control over the design.

Given the option to customize only when it is absolutely necessary, do not give themes for the
sake of giving it.

Keep studying on how users use your product and tweak the themes accordingly. If the users
are not using a particular Colour theme, go ahead and remove it or modify it.

There is always going to be new features which will be added to your product at a later stage.
Have that in mind when designing multiple themes, so that it can fit in in the future as well.

Users are lazy. Unless you give them something to change, they won’t change it. (There are a
very few exceptions though, who ask for it.)

10 colors, 5 fonts give you 10x5=50 combinations . The higher the customization, higher
your design workload will be. Less is simple

Designing multiple themes always is a headache but it’s definitely better to have a very good
interface with one theme than a modest one with plenty of themes. After all, if code is clear,
it is most probably easier to implement any feature, especially theming, whenever you want.

BS Information Technology: Prepared by: Demy Dizon

 Palawan State University Computer Studies – UI/UX Design Study Notes 12

According to some
studies, here’s a small
survey carried out to
find what the users
want in their apps.

--- Thank you and Good luck with your quiz and final exercises ---

BS Information Technology: Prepared by: Demy Dizon