1 Graphic Design Graphic Design John Stasko John Stasko Spring 2007 Spring 2007 This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Al Badre, Jim Foley, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: January 2007. 2 6750-Spr ‘07 Agenda Agenda • • Typography Typography • • Color Color • • Icons Icons 2 3 6750-Spr ‘07 Your Screen? Your Screen? 4 6750-Spr ‘07 Typography Typography • • Readability Readability – – How easy is it to read a lot of text How easy is it to read a lot of text • • Legibility Legibility – – How easy is it to recognize a short burst of How easy is it to recognize a short burst of text text • • Typeface = font Typeface = font (not really, but close enough) (not really, but close enough) 3 5 6750-Spr ‘07 Wow Wow Yuk 6 6750-Spr ‘07 Typography Typography • • Serif font Serif font - - readability readability • • Sans serif font Sans serif font - - legibility legibility – – (both are variable spaced) (both are variable spaced) • • Monospace Monospace font font 4 7 6750-Spr ‘07 Fonts Fonts • • Serif Serif – – Times, Times, Bookman Bookman • • Sans serif Sans serif – – Tahoma, Tahoma, Arial Arial • • Decorative Decorative – – Comic Sans Comic Sans • • Script Script • • Monspaced Monspaced – – Courier, Courier, Lucida Lucida 8 6750-Spr ‘07 Case Case • • Characters and symbols should be easily Characters and symbols should be easily noticeable and distinguishable noticeable and distinguishable – – Avoid heavy use of all upper case Avoid heavy use of all upper case – – Studies have found that mixed case Studies have found that mixed case promotes faster reading promotes faster reading HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT’S ALL IN CAPITALS AND YOU NEVER GET A REST How much fun is it to read all this text when it’s all in capitals and you never get a rest 5 9 6750-Spr ‘07 Typography Typography • • Guidelines Guidelines – – Use serif for long, extended text; sans serif Use serif for long, extended text; sans serif for “headlines” for “headlines” – – Use 1 Use 1 - - 2 fonts/typefaces (3 max) 2 fonts/typefaces (3 max) – – Use of normal, italics, bold is OK Use of normal, italics, bold is OK – – Never use bold, italics, capitals for large Never use bold, italics, capitals for large sections of text sections of text – – Use 1 Use 1 - - 3 point sizes max 3 point sizes max – – Be careful of text to background color issues Be careful of text to background color issues 10 6750-Spr ‘07 More Wow More Wow 6 11 6750-Spr ‘07 Font Control Font Control 12 6750-Spr ‘07 Example Example CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA AND DECATUR COME AND ENJOY SEPTEMBER 19-24 Crafts and Games Arts Festival Of Atlanta and Decatur September 19-24 Come and Enjoy! Which do you prefer? Which do you prefer? Applies lots of these principles Applies lots of these principles 7 13 6750-Spr ‘07 Color Color • • We see the world via a We see the world via a reflective reflective color color model model – – Light strikes a surface and is reflected to our Light strikes a surface and is reflected to our eyes eyes Properties of surface dictate color Properties of surface dictate color – – Subtractive Subtractive color model color model - - Cyan Magenta Cyan Magenta Yellow primaries Yellow primaries • • Colors on display follow the Colors on display follow the emitted emitted model model – – Additive Additive color model color model - - Red Green Blue Red Green Blue primaries primaries 14 6750-Spr ‘07 • • Hue Hue – – basic color, pigment basic color, pigment • • Saturation Saturation – – relative purity, brightness, relative purity, brightness, or intensity of a color or intensity of a color • • Value Value – – lightness or darkness of a lightness or darkness of a color color • • Most commonly Most commonly - - used used model model Characterizing Color Characterizing Color - - HSV Model HSV Model Image from: Adventures in HSV Space , Darrin Cardani, dcardani@buena.com 8 15 6750-Spr ‘07 • • Hue Hue – – Wavelength (red, green, yellow, blue) Wavelength (red, green, yellow, blue) – – Spectrum (VIBGYOR) Spectrum (VIBGYOR) • • Saturation Saturation – – Pastel versus strong (baby blue, sky blue, royal blue) Pastel versus strong (baby blue, sky blue, royal blue) • • Value Value – – amount of energy (white, light gray, dark gray, black) amount of energy (white, light gray, dark gray, black) – – Usually V = 0.299*R + 0.587*G + 0.114*B Usually V = 0.299*R + 0.587*G + 0.114*B HSV Color Model HSV Color Model 16 6750-Spr ‘07 HSV Color Space HSV Color Space • • Typical color selection tools Typical color selection tools 9 17 6750-Spr ‘07 Color Color • • On monitors, typically RGB scheme On monitors, typically RGB scheme – – 0 0 - - 255 value each red, green, blue 255 value each red, green, blue – – Brightness is typically Brightness is typically 0.299*R + 0.587*G + 0.114*B 0.299*R + 0.587*G + 0.114*B – – R: 170 G:43 B: 211 R: 170 G:43 B: 211 18 6750-Spr ‘07 Color Color • • Use it for a purpose, not to just add Use it for a purpose, not to just add some color in some color in 10 19 6750-Spr ‘07 Color Guidelines Color Guidelines • • Display color images on black Display color images on black background background • • Choose bright foreground color (white, Choose bright foreground color (white, bold green,…) bold green,…) • • Avoid brown and green as background Avoid brown and green as background colors colors • • Be sure Be sure fg fg colors contrast in both colors contrast in both brightness and hue with brightness and hue with bg bg colors colors 20 6750-Spr ‘07 Color Guidelines Color Guidelines • • Use color sparingly Use color sparingly Design in b/w then Design in b/w then add color where appropriate add color where appropriate • • Use color to draw attention, Use color to draw attention, communicate organization, to indicate communicate organization, to indicate status, to establish relationships status, to establish relationships • • Avoid using color in non Avoid using color in non - - task related task related ways ways • • (experiment coming next) (experiment coming next) [...]... interpret? – Too many – Not unique 6750-Spr ‘07 38 19 Icon Design • Relies on drawing ability – hire someone to do it (there are standards and ways to critique icon design) • Avoid meaningless, gratuitous use of icons • Too many icons quickly become illegible 6750-Spr ‘07 39 Icon Design • Design task Curvy road ahead 1-way street 6750-Spr ‘07 40 20 Icon Design Guidelines • Represent object or action in a... level) • Why not? 6750-Spr ‘07 43 Icon Design What do each of these signify? Almost always want to accompany your icons by a text label Observation: Icon design has partially moved from symbolic to artistic 6750-Spr ‘07 44 22 What do These Icons Mean? Icons should be recognizable, memorable, and discriminable 6750-Spr ‘07 45 What do These Icons Mean? Answers Any use of a graphics alphabet? From Window’s... • Color palette – set of colors used on one screen • Choose color palette from HSV space by varying and two of H, S, and V • Don’t vary hue, saturation and brightness at the same time • Unless want continuous tone or ‘artsy’ effect, best to use only 4-6 colors per screen 6750-Spr ‘07 27 Color Suites/Palettes • Designers often pick a palette of 4 or 5 colors Professional Monochromatic Southwestern 6750-Spr... print 46 23 It’s All About Design 6750-Spr ‘07 47 HW 2 • Observing everyday interactions (ATM) • Watch usage and report on context, task analysis, problems, … • Brief report (3 pages or less) • Due Tuesday 20th 6750-Spr ‘07 48 24 Project Part 1 • Discuss • Any interesting findings and/or analysis? • What were the most challenging parts? 6750-Spr ‘07 49 Project Part 2 • Design alternatives (many!)... challenging parts? 6750-Spr ‘07 49 Project Part 2 • Design alternatives (many!) • No working system • Drawings, sketches, mock-ups, etc • What not to do • Critique each design (strengths, weaknesses) – What in part 1 leads to this design? 6750-Spr ‘07 50 25 Upcoming • Handling errors & help • Prototyping & UI Software 6750-Spr ‘07 51 26 ... 6750-Spr ‘07 39 Icon Design • Design task Curvy road ahead 1-way street 6750-Spr ‘07 40 20 Icon Design Guidelines • Represent object or action in a familiar and recognizable manner 6750-Spr ‘07 41 Icon Design Guidelines • Make the selected icon clearly distinguishable from surrounding unselected icons • Make each icon distinctive • Make each icon stand out from background • Make icons harmonious members... (Eastern Ch.) a representation in painting, enamel, etc of some sacred personage, as Christ or a saint or angel, itself venerated as sacred 3 (Logic) a sign or representation which stands for its object by virtue of a resemblance or analogy to it Also, eikon, ikon [t L, t Gk.: m eikon likeness, image] – eikon, ikon Syn 2 See image Syn image 6750-Spr ‘07 35 Icons • Icons might or might not “look like” . 1 Graphic Design Graphic Design John Stasko John Stasko Spring 2007 Spring 2007 This material has been developed by Georgia Tech HCI. illegible Too many icons quickly become illegible 40 6750-Spr ‘07 Icon Design Icon Design • • Design task Design task Curvy road ahead Curvy road ahead 1 1 - - way