Brand and identity
IS 403: User Interface Design
Shaun Kane
Admin
• Today:
– Identity
– Q1 and A4 back (with a few small exceptions)
• Thursday:
– Some comments on interaction design
– Q2 review
Reprise: Kuler
Today: identity!
What is identity?
• Brand identity
• Corporate identity
• What distinguishes you from everyone
else
How do we create identity?
•
•
•
•
•
•
Slogan
Color (specific shades)
Color schemes
Shapes / logo (Olympics, Coca Cola, Nike)
Fonts / typefaces (Harry Potter)
“Logo type”
Use visuals to communicate.
Use visuals to communicate.
“Brand”
Outsider Opinion
Organizational Behavior
Self-image
Visual
Identity
Brand Diagram
Logo
BP Logo
Aspects of a good visual
identity:
Simple, easy to remember
Unique (!blue)
Color matters
Meaning
Accurate:
they will know what you are
Uniqueness:
they won’t confuse you with others
Credibility:
they will take you seriously
Credibility:
they will take you seriously
Flexible but Consistent:
they can identify your materials in any medium
Case Study:
UMBC
What makes UMBC identity?
• Mascot (in various forms)
• Colors: black and gold
• Dog head
Short Exercise:
Let’s work on the identity for our
project sites
Work on your own site (but with a
partner)
Logo, color scheme
Exercise: Part Two
Write down six words (adjectives)
that would be associated with your
client’s brand.
Case studies
Myspace
Walmart and Target
Games
Next time
• Project workshop
Q1
100
96 96
90
83 83 83
85
86 86
88
89 89
81 81
80
74 74 74
75
69 69
70
67
60
0
5
10
15
20
The rest of the course
•
•
•
•
Still 5 assignments and 2 quizzes left
Resubmit assignments
Extra credit slots
Improvement counts
Today
•
•
•
•
Sync up on schedule, assignments
Kaitlyn: Reading summary
More about color
Color activity
WHY STUDY COLOR?
Cultural Significance of Colors
• http://www.1stwebdesigner.com/design/col
ors-web-design-right-combination/
Color and Mood
• http://www.infoplease.com/spot/colors1.html
•
•
Black
Black is the color of authority and power. It is popular in fashion because it makes people
appear thinner. It is also stylish and timeless. Black also implies submission. Priests wear
black to signify submission to God. Some fashion experts say a woman wearing black
implies submission to men. Black outfits can also be overpowering, or make the wearer
seem aloof or evil. Villains, such as Dracula, often wear black.
•
•
Yellow
Cheerful sunny yellow is an attention getter. While it is considered an optimistic color,
people lose their tempers more often in yellow rooms, and babies will cry more. It is the
most difficult color for the eye to take in, so it can be overpowering if overused. Yellow
enhances concentration, hence its use for legal pads. It also speeds metabolism.
•
•
Purple
The color of royalty, purple connotes luxury, wealth, and sophistication. It is also feminine
and romantic. However, because it is rare in nature, purple can appear artificial.
Color Theory
The artist’s model: primary
colors
The Secondary Colors
Tertiary Colors
An artist’s color wheel
Color Schemes
RGB vs. HSB
RGB Scheme
• What is the RGB scheme?
• Where do you use it?
RGB Scheme
• An additive color system, since you add light
from the primary colors to make new colors.
• The values for Red, Green, and Blue may be
specified in percent (0–100); or in a scale
from 0–255 (decimal) or 00–FF (hex)—where
255 or FF = 100%.
• Remember: higher numbers mean more of
each color of light.
•
More is lighter, less is darker!
RGB Scheme
•
•
•
•
Red = (255,0,0)
Green = (0,255,0)
Blue = (0,0,255)
Magenta = (255,0,255)
• Yellow = (255,255,0)
• What’s #ff00ff?
HSB Scheme
• This scheme is a device-independent way
to describe color
•
Hue
•
Saturation
•
Brightness
HSB Model
HSB Model
•
Hue is the actual color. Measured in
angular degrees counter- clockwise
around the cone starting and ending at
red = 0 or 360 (yellow = 60, green =
120, etc.).
•
Saturation is the purity of the color,
measured in percent from the center of
the cone (0) to the surface (100).At 0%
saturation, hue is meaningless.
•
Brightness is measured in percent
from black (0) to white (100).At 0%
brightness, both hue and saturation
are meaningless.
More about saturation
• White, black, and grays are 0% saturated
• A color becomes more saturated as it moves
away from gray to a pure color
• A pure (fully-saturated) color, in RGB terms,
is:
• Only red, green, or blue, or
• Only yellow (= red + green), or
• Only magenta (= red + blue)
• A saturated color can have a range of
brightnesses
Vary saturation, constant
brightness
Vary brightness, constant
saturation
Useful Guidelines
ADAPTED FROM “UNIVERSAL PRINCIPLES OF
DESIGN: 100 WAYS TO ENHANCE USABILITY,
INFLUENCE PERCEPTION, INCREASE APPEAL,
MAKE BETTER DESIGN DECISIONS AND
TEACH THROUGH DESIGN”
How Many Colors?
• Limit the palette to what the eye can
process at one glance
• Don’t use more than 5 colors
Color Blindness
• Don’t use color as the only way to distinguish
information
• User is not
like me
• vischeck.com
Color Combinations
Color Combinations
• Create aesthetic color combinations!
• Use adjacent colors on the color wheel
(analogous)
• Use opposing colors on the color wheel
(complementary)
• Use colors at the corners of a symmetrical
polygon (triadic and quadratic)
• Use color combinations found in nature
Monochromatic
• 1 Hue, possibly in different values
• Looks clean and elegant
• Monochromatic colors go well together,
producing a soothing effect.
Monochromatic
Blues
Reds
Complementary
• 2 Complementary Hues
• (opposites on color wheel)
• Tricky to use in large doses, but work well
when you want something to stand out.
• Really bad for text
Complementary
Red and Green
Orange and Blue
Triadic
• 3 colors at corners of
equilateral
triangle
• Often vibrant, even if you use
pale or unsaturated versions of
your hues.
• Colors should be carefully
balanced - let one color dominate
and use the two others for
accent.
A triadic can shout . . .
...or whisper ...
. . . or speak conversationally . . .
Analogous
• 3-5 adjacent hues
• Use to create serene and comfortable
designs. Often found in nature and are
harmonious and pleasing to the eye.
• Make sure you have enough contrast
when choosing an analogous color
scheme.
• Choose one color to dominate, a
second to support. The third color is
used (along with black, white or gray)
as an accent.
Analogous
Blue, Green, Yellow
Split Complementary
• Variation of complementary scheme.
• Uses a base color and the two colors
adjacent to its complement.
• This color scheme has the same
strong visual contrast as the
complementary color scheme, but has
less tension.
• Split-complimentary color scheme is
often a good choice for beginners.
Useful Tools
• http://www.colorsontheweb.com/colorwizard.asp
• http://kuler.adobe.com
• http://vischeck.com (for color blindness)
Using color effectively
Background/Foreground
•
Use warmer colors for foreground
element
•
Use cooler colors for background
elements
Grouping Elements
• Light gray is a safe color to use for grouping
elements without competing with other
colors
• White may also
be OK
Using Saturation Wisely
• Use saturated colors (pure hues) when you want to
attract attention
• Use desaturated colors when performance and efficiency
are the priority
• Desaturated, bright colors are perceived as friendly and
professional
• Desaturated, dark colors are perceived as serious and
professional
• Saturated colors are perceived as more exciting and
dynamic
• Be careful when combining saturated colors! They can
visually interfere with each other and cause fatigue
Symbolism
• There is no substantive evidence
supporting general effects of color on
emotion and mood. However…
• Verify the meaning of colors and color
combinations for a particular target
audience prior to use
• More about this in The Power of Color by
Morton Walker, 1991.
Highlighting
•
Color is a potentially effective
highlighting technique
•
Should be used sparingly and only with
other highlighting techniques
• Such as bold or maybe changing type
•
Highlight using a few desaturated
colors that are clearly distinct from one
another
Interference Effects
• Break mental models and cause user to either make mistakes
or take longer to understand
• Stroop Inference
Contrast of Light and Dark
• Dark Colors come
forward
• Light colors stay in
the back
• True for both
grayscale and color
• Use high contrast
when you want to
make a loud
statement
Branding
What brand is this?
What brand is this?
Branding
Branding
Branding: Blue
Branding Blue
Branding Blue
Interested in more advice?
• http://www.tigercolor.com/color-lab/colortheory/color-theory-intro.htm
• http://speckyboy.com/2010/05/19/beginner
s-guide-to-using-the-power-of-color-inweb-design/
• http://desource.uvu.edu/dgm/2740/in/steinj
a/lessons/03/l03_06.html
Color schemes in the wild
• Let’s do some color exploration
Colors from nature
• Look behind (and around) you!
Color activity
• Let’s pick a new color scheme for the
UMBC home page
– Analogous
– Complementary
– Triadic