User Experience Design For Mobile Apps & Websites (UI & UX)

Colorful Emotions: Visual

Vibrancy in Web UI Design

Across human history, master painters and other artists have earned

global recognition from their ability to manipulate colors. In the

modern era, the artform now opens up a lot of new commercial and

business applications, first in advertising, and now in web design.

With an almost bottomless depth, the skill of color usage can be

improved and refined endlessly.

We'll explore the fundamentals of color theory and color scheme,

then examine the emotional effects of certain colors.

Color Theory

The topic of color could fill a whole book on its own, so we'll stick to

what's relevant to UI design here. We can break down color theory

into 3 parts with regards to web UI design:

• Contrast – Every shade of color has a set opposite – an “arch-nemesis”

whose contrast is far greater than any other color. You can

use the color wheel below to find each specific color's opposite.

Simply locate the color on the opposite end of the circle.

Complementation – Colors aren't always at odds with each other:
complementary colors accent each other and bring out their best,
the opposite of contrast. These are the colors immediately next
to each other on the color wheel, for example, purple's complements
are blue and pink.

Vibrancy – Each color evokes a specific moods: the brighter
warm colors (red, orange, yellow) tend to energize a user and
make them more alert, while darker cool shades (green, blue,
purple) tend to be more relaxing and tranquil. CNN uses a red
banner in their top navigation to heighten alertness, a color decision
that suits the site's breaking news content.

Color theory in web design is more than just a visual garnish, it can
have game-changing effects on your business. If you don't believe
us, read conversion consultant Jeremy Smith's article explaining
how the psychology of color can expand your business

Vibrancy: Emotional Implications of Color
There's no denying the link between emotions and colors: in fact,
the human race has been documenting the psychological impact of
color since the Middle Ages. Naturally, any web designer wants to
harness this as well, since the right colors create the right moods
and atmosphere for your site.
We've analyzed the advice of the researchers at Vandelay Design
and Smashing Magazine, and filtered it through our own experience
at UXPin.
Please note that different cultures around the world perceive colors
differently. We describe emotional associations that are most
relevant to Western cultures. For a more in-depth look of how different
cultures perceive color, read this thorough piece from Web
Designer Depot.

The most stimulating color, red is so energizing it has been used
to increase blood circulation. Representing passion and power,
red is the color that will attract the most attention, which is why
it is commonly used for warnings and important notices.
Red is very appropriate for the No Way NSA website, whose
purpose is calling alarm to a perceived threat from the NSA. Using
red in the first section of the single-page site is especially
clever because it calls attention to the primary message while
physiologically inducing people to “get out of the danger zone”
by scrolling downwards. This, of course, only makes the user
engage with more content.
However, this could work against you, as red can incite anger,
or at least overstimulation. If you're going for a more relaxed
atmosphere, use it sparingly (or at least in a lighter shade) or
not at all.

As the most muted of the warm colors, orange is uniquely versatile.
As a primary color it can be engaging and energizing, and as
a secondary color it also retains these properties in an unobtrusive
way. Orange also helps to create a sensation of movement
and energy.
Aside from it being part of the brand style, orange works well
with Fanta's lighthearted and cartoonish site. The color shows
creativity while retaining familiarity.

Yellow
Promotes: happiness, enthusiasm, antiquity (darker shades)

Yellow is one of the more versatile colors, depending on the shade.
A bright yellow is the most energetic of the colors, without the
severity of red. Middle shades of yellow give a sense of comfort
while still feeling invigorating. Darker shades (including gold)
can give the impression of antiquity, and lend an air of timelessness,
wisdom, and curiosity.
Colorful Emotions: Visual Vibrancy in Web UI Design 60
In the above example from web design agency Flash Media, the
darker shade of yellow exudes energy, curiosity, and authority.
This makes a lot of sense for a company who thrives on the value
of their consultancy and skills.

Green bridges the gap between warm and cool colors, though
tends to be more of a cool color. This means green has the same
relaxing effects of blue, but still retains some of the energizing
qualities of yellow. As such, it creates a very balanced and stable
atmosphere. Darker shades give off more of the money/affluence
feelings which you can see with Ameritrade above.

Blue
Promotes: calm, safety, openness (lighter shades), reliability (darker
shades)

Like yellow, blue's meaning varies greatly depending on the
shade. All blues are universally relaxing and safe, but the lighter
shades will seem more friendly while the darker ones seem
more somber. Social media sites like Twitter and Facebook take
advantage of light and medium shades, while corporate websites
prefer dark shades' tones of strength and reliability.
Van Vliet & Trap, an event design agency, makes clever use of
dark blue. By using the blue in the flowers in the background, they
visually hint at their expertise in floral design while also exuding
trust and reliability. It makes a lot of sense since they plan high
visibility (and somewhat nerve-wracking) events like weddings.

Purple
Promotes: luxury, romance (lighter shades), mystery (darker shades)

Historically associated with royalty, purple retains the tone of
luxury, even to the point of decadence.
Purples suggests lavishness and wealth in general, making it a
popular choice for fashion and luxury goods (and even chocolate,
like the Cadbury example above). Lighter shades like lavender
(with pink hues) are considered romantic, while darker shades
seem more luxurious and mysterious.
Black
Promotes: power, edginess, sophistication

The strongest of the neutral colors, black exists on almost every
website.
It can take on varying characteristics depending on its supporting
colors, or dominate all of them if used in excess. Its strength
amidst neutrality makes it the color of choice for long blocks of
text, but as a primary color can give the impression of edginess,
sophistication, or even evil.
For most websites, black is used to create an instant feeling of
sophistication and timelessness. The feeling of elegance is especially
strong well when paired with white font and set against
a minimalist layout, as you can see in the “Dream and Reach”
microsite from Bose.
White
Promotes: cleanliness, virtue, simplicity

White is the color most associated with virtue, purity, and innocence
in Western cultures.
Colorful Emotions: Visual Vibrancy in Web UI Design 64
Minimalist and simplistic sites most often use it as a background.
By drawing the least attention of all the colors, white is the best
for accenting the other colors on the page.
This works particularly well for the awwwards-winning website
of artist Kaloian Toshev. The white background draws attention to
his vibrant artwork, while creating an art-gallery aura of elegance.

Gray
Promotes: neutrality, formality, melancholy

While in certain situations it can seem brooding or sad, gray is
nonetheless a popular choice for looking traditional or professional.
However, one of the greatest advantages of gray lies in
varying its hues – changing the shade can give you a customized
mix of properties from white and black, a powerful tool in skillful
hands.
When paired with brighter colors and presented in a flat UI, the
grey background of awwwards feels much more modern than
it does somber.

Beige
Promotes: traits of surrounding colors

Beige is the wildcard of the colors, as its main use is in drawing
out other colors.
On its own, beige is dull, though this can be used to symbolize
humility. However, it will take on the characteristics of the colors
around it, making it an interesting design tool. For these reasons,
beige is almost always a secondary or background color.
Darker shades of beige (like on the Dishoom site) will create an
earthy and almost paper-like texture, while lighter shades feel
fresher. In this case, the lighter shade around the brand name,
which darkens outwards, help create the feeling that the restaurant
is a fresh modern take on earthy cuisine.

Ivory
Promotes: comfort, elegance, simplicity

In terms of emotional response, ivory (and cream) are slight variations
on white.
Ivory is seen as warmer (or less sterile) than white, making it
more comforting while still exuding the same minimalistic and
complementary aspects. Ivory should be used in place of white
to soften the contrast between it and darker colors. For the art
in my coffee site, an orange/brown accent is added to the cream
background (which looks slighly greyish) to create a sense of
warmth.
If you'd like to read more analysis of color and emotion, check
out this piece by 1stWebDesigner which deconstructs color use
from 20 top brands.

Color Scheme
Every site has a color scheme, the primary colors it uses for its main
areas. As we've been discussing, the repeated use of these colors
will affect the user's mind and mood, typically subconsciously, so
choose them well.
While there are lots of different ways to mix colors togethers, we're
going to focus on the 3 most successful, and common, ones:
• Triadic – The triadic is the most basic and balanced of the three
structures. Using vibrancy and complementation, but straying
from the trickier contrast, the triadic structure is the safest and
most reliable scheme. On the 12-step color wheel, select any 3
colors located 120 degrees from each other: one color for the
background, and two for content and navigation.

Compound (Split Complementary) – The next scheme gets a
little trickier to pull off, but can be rewarding if done well. The
concept uses four colors: two contrasting pairs and two complementary
pairs.

Look at how stunning the page for Florida Flourish looks just
based on its colors alone. The red and green contrast together
with the text tags and plants, plus the blue and orange with the
sky atop the desert. At the same time, the red/orange and blue/
green complements really bring the whole view together nicely

Analogous – Lastly there is the analogous scheme, which focuses
exclusively on complementary colors. This one really highlights
the vibrancy of the colors chosen, for example, a red-orange-yellow
analogous scheme will seem very energetic and lively. While
this scheme is relatively easy to pull off, the trick is in deciding
which vibrancy of color to use, as it will be exaggerated.

By using blues, turquoise, and greens for their analogous site,
Blinksale creates a subdued and even safe atmosphere for its
site. Notice how they use the contrasting yellow to draw attention
to their call-to-action.
Photo

What we've just discussed are just the fundamentals of how color
theory can enhance your UI design, but there's no limit to how
in-depth you can go with colors on your site. If you'd like to know
more, you can check out this piece in Smashing Magazine on how
to create your own color palette.
Color Assistance Tools
Thankfully, there are plenty of tools to help you put color theory
into practice. Check out these pre-made color palettes so you don't
need to start from scratch.
• Adobe Color CC – Once known as Kuler, this has been regarded
for a while as one of the most trusted color assistance tools
available.
●
• Paletton – If you're in need of a tool for speed or a simplified
ease-of-use, this minimal tool can help you. Great for beginners.
• Flat UI Color Picker – While for flat UI designs only, this is still
a useful and convenient tool for color selection.

Takeaway
No one's expecting you to be Michelangelo, but a basic understanding
of color usage is solid prerequisite for web design.
As we've just explained, colors carry with them a lot of extra weight
that sometimes goes unnoticed. No matter what colors you choose,
they have a definite influence on the design as a whole – from
communicating contrast or similarity, to evoking precise emotions.

Studies have shown that it only takes users about 1/10th of a second
to form an impression of your site. To keep users engaged, your site
needs to have an instant visual hierarchy that logically structures
all of the elements we've discussed (color, space, contrast, etc.).

Now, let's look at how you can blur your designs to make sure they
communicate as clearly as possible

The Blur Test
At its core, the blur test, as designer Lee Munroe explains, is looking
at a blurred version of your site and see what elements stand out.
If it's not what you want to stand out, it's time to go back and make
some revisions. Looking at a blurry version of your page will reveal
the bare bones of your visual hierarchy, letting you see the layout
with fresh eyes. The actual blurring of the site can be done in Photoshop,
by adding a 5-10 px Gaussian blur on a screenshot.

What stands out for you on Wufoo's homepage? Sign up buttons
and product features are both still prominent, while lesser content

takes second stage. The colors of the buttons pop out against the
background (a contrasting color), while the white space centers
focus on the product features.
Alternative Approaches
If you don't want to blur your design, you could just blur your vision
and stand about 3 feet away from the screen. It's simple, even
sounds a little stupid, but it definitely works.
On the other hand, if your design already lives in the browser, you
can try this quick trick with Chrome.
• Open up your dev tools (F12) in Chrome.
• Navigate to the body element and add -webkit-filter: blur(5px).
You can adjust the blur pixels to your liking, but we recommend
somewhere between 5 to 10 pixels.
Repeating the Process
After your first blur test, you might find that a few tweaks
to visual hierarchy are needed.
In that case, as Lee Munroe suggests, you'd want to look at adjusting
elements such as:

Size
• Contrast
The 5-Second Test for Visual Hierarchy 75
• Color
• Shape
• Spacing & padding
• Orientation & position
Once you're done, repeat your blur test and keep iterating until it
matches the user priorities. If you used the Photoshop or Chrome
trick, you can try again with a 10 pixel blur to test if any unwanted
elements are still sticking out.

Takeaway
More than being creative, a good artist must also consider subtleties
like composition, colors, size, what to include, and – perhaps more
importantly – what to leave out. That's no easy feat, which is why
we hold the masters like da Vinci and Van Gogh in such high regard.
The 3 different blur tests we've described will help ensure that all
the design elements on your page culminates into a single moment of
meaning. Studies have shown that vision is our dominant sense, so
make sure your first impression leaves the right lasting impression.
We hope you've found the tips in this e-book helpful and actionable.
Now, it's time to start designing your interface.