1. Brand and identity IS 403: User Interface Design Shaun Kane

2. Admin Today: –Identity –Q1 and A4 back (with a few small exceptions) Thursday: –Some comments on interaction design –Q2 review

3. Reprise: Kuler

4. Today: identity!

5. What is identity? Brand identity Corporate identity What distinguishes you from everyone else

7. How do we create identity? Slogan Color (specific shades) Color schemes Shapes / logo (Olympics, Coca Cola, Nike) Fonts / typefaces (Harry Potter) “Logo type”

9. Use visuals to communicate.

10. control minds

15. Brand Diagram “Brand” Outsider Opinion Organizational Behavior Self-image Visual Identity Logo

18. BP Logo

19. Aspects of a good visual identity: Simple, easy to remember Unique (!blue) Color matters Meaning

20. Accurate: they will know what you are

21. Uniqueness: they won’t confuse you with others

22. Credibility: they will take you seriously

24. Flexible but Consistent: they can identify your materials in any medium

25. Case Study: UMBC

26. What makes UMBC identity? Mascot (in various forms) Colors: black and gold Dog head

30. Short Exercise: Let’s work on the identity for our project sites Work on your own site (but with a partner) Logo, color scheme

31. Exercise: Part Two Write down six words (adjectives) that would be associated with your client’s brand.

32. Case studies

33. Myspace

34. Walmart and Target

35. Games

37. Next time Project workshop

38. Q1

39. The rest of the course Still 5 assignments and 2 quizzes left Resubmit assignments Extra credit slots Improvement counts

40. Today Sync up on schedule, assignments Kaitlyn: Reading summary More about color Color activity

41. WHY STUDY COLOR?

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/

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.

44. Color Theory

45. The artist’s model: primary colors

46. The Secondary Colors

47. Tertiary Colors

48. An artist’s color wheel

49. Color Schemes RGB vs. HSB

50. RGB Scheme What is the RGB scheme? Where do you use it?

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 (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!

52. 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?

53. HSB Scheme This scheme is a device-independent way to describe color Hue Saturation Brightness

54. HSB Model

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.

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

57. Vary saturation, constant brightness

58. Vary brightness, constant saturation

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”

60. How Many Colors? Limit the palette to what the eye can process at one glance Don’t use more than 5 colors

61. Color Blindness Don’t use color as the only way to distinguish information User is not like me vischeck.com

62. Color Combinations

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

64. Monochromatic 1 Hue, possibly in different values Looks clean and elegant Monochromatic colors go well together, producing a soothing effect.

65. Monochromatic Reds Blues

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

67. Complementary Red and Green Orange and Blue

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.

69. A triadic can shout...

70. ...or whisper...

71. ... or speak conversationally...

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.

73. Analogous Blue, Green, Yellow

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.

75. Useful Tools http://www.colorsontheweb.com/colorwizard.asp http://kuler.adobe.com http://vischeck.com (for color blindness)

76. Using color effectively

77. Background/Foreground Use warmer colors for foreground element Use cooler colors for background elements

78. Grouping Elements Light gray is a safe color to use for grouping elements without competing with other colors White may also be OK

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

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.

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

82. Interference Effects Break mental models and cause user to either make mistakes or take longer to understand Stroop Inference

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

84. Branding

85. What brand is this?

87. Branding

89. Branding: Blue

90. Branding Blue

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

93. Color schemes in the wild Let’s do some color exploration

94. Colors from nature Look behind (and around) you!

95. Color activity Let’s pick a new color scheme for the UMBC home page –Analogous –Complementary –Triadic