1 / 28

Graphic Design 2 More on the “look & feel”

Graphic Design 2 More on the “look & feel”. Agenda Typography Color Icons Project review Exam review. Your Screen?. Typography. Characters and symbols should be easily noticeable and distinguishable Avoid heavy use of all upper case

lapis
Download Presentation

Graphic Design 2 More on the “look & feel”

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Graphic Design 2More on the “look & feel” Agenda • Typography • Color • Icons • Project review • Exam review CS/PSY 6750

  2. Your Screen? CS/PSY 6750

  3. Typography • Characters and symbols should be easily noticeable and distinguishable • Avoid heavy use of all upper case • Studies have found that mixed case 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 CS/PSY 6750

  4. Typography • Readability • How easy is it to read a lot of text • Legibility • How easy is it to recognize a short burst of text • Typeface = font (not really, but close enough) CS/PSY 6750

  5. Wow Yuk CS/PSY 6750

  6. Typography • Serif font - readability • Sans serif font - legibility • (both are variable spaced) • Monospace font CS/PSY 6750

  7. Serif Times, Bookman Sans serif Tahoma, Arial Decorative Comic Sans Script Script Monspaced Courier, Lucida Fonts CS/PSY 6750

  8. Typography • Guidelines • Use serif for long, extended text; sans serif for “headlines” • Use 1-2 fonts/typefaces (3 max) • Use of normal, italics, bold is OK • Never use bold, italics, capitals for large sections of text • Use 1-3 point sizes max • Be careful of text to background color issues CS/PSY 6750

  9. More Wow CS/PSY 6750

  10. Font Control CS/PSY 6750

  11. Example Which do you prefer? CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA AND DECATUR Crafts and Games Arts Festival Of Atlanta and Decatur SEPTEMBER 19-24 September 19-24 Come and Enjoy! COME AND ENJOY Applies lots of these principles CS/PSY 6750

  12. Color • We see the world via a reflective color model • Light strikes a surface and is reflected to our eyes--Properties of surface dictate color • Printers • Colors on display follow the emitted model • On monitors, typically RGB scheme • 0-255 value each red, green, blue • R: 170 G:43 B: 211 CS/PSY 6750

  13. Color Attributes • Hue • native color, pigment • Saturation • relative purity, brightness, or intensity of a color • Value • lightness or darkness of a color CS/PSY 6750

  14. Color • Use it for a purpose, not to just add some color in CS/PSY 6750

  15. Color Guidelines • Display color images on black background • Choose bright foreground color (white, bold green,…) • Avoid brown and green as background colors • Be sure fg colors contrast in both brightness and hue with bg colors CS/PSY 6750

  16. Color Guidelines • Use color sparingly--Design in b/w then add color where appropriate • Use color to draw attention, communicate organization, to indicate status, to establish relationships • Avoid using color in non-task related ways CS/PSY 6750

  17. Visual Exercise • How many small objects? • How many rectangles? • How many orange objects? CS/PSY 6750

  18. How many... CS/PSY 6750

  19. Visual Exercise • Left: Find the red letter • Right: Find the ‘A’ CS/PSY 6750

  20. Find the... B X P V E F U U W S O A C C B Z L L E K M H I J S R R G N T H T G V V P D Q Q X F O D I V W W K S N X Y Y Z V W K D M S Z R J CS/PSY 6750

  21. Color Guidelines • Color is good for supporting search • Do not use color without some other redundant cue • Color-blindness • Monochrome monitors • Redundant coding enhances performance • Be consistent with color associations from jobs and cultures CS/PSY 6750

  22. Color Guidelines • Limit coding to 8 distinct colors (4 better) • Avoid using saturated blues for text or small, thin lines • Use color on b/w or gray, or b/w on color • To express difference, use high contrast colors (and vice versa) CS/PSY 6750

  23. Red hot, warning, aggression, love Pink female, cute, cotton candy Orange autumn, warm, Halloween Yellow happy, caution, joy Brown warm, fall, dirt, earth Green lush, pastoral, envy Purple royal, sophisticated, Barney Color Associations CS/PSY 6750

  24. Color Suites • Designers often pick a palette of 4 or 5 colors Professional Monochromatic Southwestern CS/PSY 6750

  25. Icon Design • Design task • Represent object or action in a familiar and recognizable manner • Limit number of different icons • Make icon stand out from background CS/PSY 6750

  26. Icon Design • Ensure that singly selected icon is clearly visible when surrounded by unselected ones • Make each icon distinctive • Make icons harmonious members of icon family • Avoid excessive detail CS/PSY 6750

  27. Icon Design What do each of these signify? Almost always want to accompany your icons by a text label CS/PSY 6750

  28. It’s All About Design... CS/PSY 6750

More Related