Brand and identity IS 403: User Interface Design Shaun
Kane
Slide 2
Admin Today: Identity Q1 and A4 back (with a few small
exceptions) Thursday: Some comments on interaction design Q2
review
Slide 3
Reprise: Kuler
Slide 4
Today: identity!
Slide 5
What is identity? Brand identity Corporate identity What
distinguishes you from everyone else
Slide 6
Slide 7
How do we create identity? Slogan Color (specific shades) Color
schemes Shapes / logo (Olympics, Coca Cola, Nike) Fonts / typefaces
(Harry Potter) Logo type
Aspects of a good visual identity: Simple, easy to remember
Unique (!blue) Color matters Meaning
Slide 20
Accurate: they will know what you are
Slide 21
Uniqueness: they wont confuse you with others
Slide 22
Credibility: they will take you seriously
Slide 23
Slide 24
Flexible but Consistent: they can identify your materials in
any medium
Slide 25
Case Study: UMBC
Slide 26
What makes UMBC identity? Mascot (in various forms) Colors:
black and gold Dog head
Slide 27
Slide 28
Slide 29
Slide 30
Short Exercise: Lets work on the identity for our project sites
Work on your own site (but with a partner) Logo, color scheme
Slide 31
Exercise: Part Two Write down six words (adjectives) that would
be associated with your clients brand.
Slide 32
Case studies
Slide 33
Myspace
Slide 34
Walmart and Target
Slide 35
Games
Slide 36
Slide 37
Next time Project workshop
Slide 38
Q1
Slide 39
The rest of the course Still 5 assignments and 2 quizzes left
Resubmit assignments Extra credit slots Improvement counts
Slide 40
Today Sync up on schedule, assignments Kaitlyn: Reading summary
More about color Color activity
Slide 41
WHY STUDY COLOR?
Slide 42
Cultural Significance of Colors
http://www.1stwebdesigner.com/design/col
ors-web-design-right-combination/http://www.1stwebdesigner.com/design/col
ors-web-design-right-combination/
Slide 43
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.Dracula 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.
Slide 44
Color Theory
Slide 45
The artists model: primary colors
Slide 46
The Secondary Colors
Slide 47
Tertiary Colors
Slide 48
An artists color wheel
Slide 49
Color Schemes RGB vs. HSB
Slide 50
RGB Scheme What is the RGB scheme? Where do you use it?
Slide 51
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 (0100); or in a scale from
0255 (decimal) or 00FF (hex)where 255 or FF = 100%. Remember:
higher numbers mean more of each color of light. More is lighter,
less is darker!
Slide 52
RGB Scheme Red = (255,0,0) Green = (0,255,0) Blue = (0,0,255)
Magenta = (255,0,255) Yellow = (255,255,0) Whats #ff00ff?
Slide 53
HSB Scheme This scheme is a device-independent way to describe
color Hue Saturation Brightness
Slide 54
HSB Model
Slide 55
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.
Slide 56
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
Slide 57
Vary saturation, constant brightness
Slide 58
Vary brightness, constant saturation
Slide 59
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
Slide 60
How Many Colors? Limit the palette to what the eye can process
at one glance Dont use more than 5 colors
Slide 61
Color Blindness Dont use color as the only way to distinguish
information User is not like me vischeck.com
Slide 62
Color Combinations
Slide 63
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
Slide 64
Monochromatic 1 Hue, possibly in different values Looks clean
and elegant Monochromatic colors go well together, producing a
soothing effect.
Slide 65
Monochromatic Reds Blues
Slide 66
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
Slide 67
Complementary Red and Green Orange and Blue
Slide 68
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.
Slide 69
A triadic can shout...
Slide 70
...or whisper...
Slide 71
... or speak conversationally...
Slide 72
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.
Slide 73
Analogous Blue, Green, Yellow
Slide 74
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.
Slide 75
Useful Tools http://www.colorsontheweb.com/colorwizard.asp
http://kuler.adobe.com http://vischeck.com (for color
blindness)
Slide 76
Using color effectively
Slide 77
Background/Foreground Use warmer colors for foreground element
Use cooler colors for background elements
Slide 78
Grouping Elements Light gray is a safe color to use for
grouping elements without competing with other colors White may
also be OK
Slide 79
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
Slide 80
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.
Slide 81
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
Slide 82
Interference Effects Break mental models and cause user to
either make mistakes or take longer to understand Stroop
Inference
Slide 83
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
Slide 84
Branding
Slide 85
What brand is this?
Slide 86
Slide 87
Branding
Slide 88
Slide 89
Branding: Blue
Slide 90
Branding Blue
Slide 91
Slide 92
Interested in more advice?
http://www.tigercolor.com/color-lab/color-
theory/color-theory-intro.htmhttp://www.tigercolor.com/color-lab/color-
theory/color-theory-intro.htm
http://speckyboy.com/2010/05/19/beginner
s-guide-to-using-the-power-of-color-in-
web-design/http://speckyboy.com/2010/05/19/beginner
s-guide-to-using-the-power-of-color-in- web-design/
http://desource.uvu.edu/dgm/2740/in/steinj
a/lessons/03/l03_06.htmlhttp://desource.uvu.edu/dgm/2740/in/steinj
a/lessons/03/l03_06.html
Slide 93
Color schemes in the wild Lets do some color exploration
Slide 94
Colors from nature Look behind (and around) you!
Slide 95
Color activity Lets pick a new color scheme for the UMBC home
page Analogous Complementary Triadic
