Brand and identity IS 403: User Interface Design Shaun Kane
Preview:
Citation preview
- Slide 1
- 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
- Slide 8
- Slide 9
- Use visuals to communicate.
- Slide 10
- control minds
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Brand Diagram Brand Outsider Opinion Organizational Behavior
Self-image Visual Identity Logo
- Slide 16
- Slide 17
- Slide 18
- BP Logo
- Slide 19
- 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