1 / 29

Color & Typography for the Web

Color & Typography for the Web. Information Architecture & Design I Yi-Hsuen Shih October 25, 2005. Overview. Importance of color & typography in IA Color: systems, screen display, browser, HTML, theory, symbolism Typography: definition, history, type, 3 aspects How does Google do it?

archie
Download Presentation

Color & Typography for the Web

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. Color & Typography for the Web Information Architecture & Design I Yi-Hsuen Shih October 25, 2005

  2. Overview • Importance of color & typography in IA • Color: systems, screen display, browser, HTML, theory, symbolism • Typography: definition, history, type, 3 aspects • How does Google do it? • Resources

  3. Importance of color & typography in IA • Build hierarchy, structure, organization • Create context • Enhance content • Draw attention • Provoke emotions • Convey meaning • Visual communication • Aid to metaphor, navigation, label, logo, graphics...

  4. Color Systems • Print: • CMYK: cyan, magenta, yellow and black • Subtractive or Reflective colors • Screen display: • RBG: red, blue, green • Additive colors http://dx.sheridan.com/advisor/cmyk_color.html

  5. Web color: screen display • Pixel (picture element):x & y coordinates • Color depth (resolution): • 1-bit  2 colors (black & white) • 8-bit  256 colors • 16-bit  thousands of colors • 24-bit  millions of colors (true color)

  6. Web color: browser • Dithering: illusion of missing colors • Diminish harsh transition, sharpness • Web (Browser)-safe color: • Based on 8-bit color screen display: 216 cross platform color palette • “Reallysafe” colors: only 22 colors  • Strategy: • Identify your audience’s technologies • Use Reallysafe palette • Use transparent backgrounds • Use flash

  7. Web color: HTML • Color value: Hexadecimal notation • Color name: Black, coral…

  8. Color theory • Color attributes • Hue: colors • Saturation: intensity • Brightness: darkness/ lightness • Color harmonies • Warm: active • Cool: calming effect • Analog: similar hues • Complementary: opposite colors • Triads: 3 colors in triangle • Tool: Mundi Design http://joehallock.com/edu/COM498/index.html

  9. Color Symbolism • Use color to convey meaning: • Black: power, stylish, timeless • White:purity, neutral, summer • Red: action, confidence, courage, vitality, love, intensity • Green: life, nature, fertility, calming • Blue: Loyalty, truth, peace, depressing

  10. http://www.creativesourcesf.com/

  11. http://www.toydrum.com/

  12. http://www.rockcorps.org/

  13. http://www.jrgeoffrion.com/

  14. What is Typography? • Dictionary.com: The art and technique of printing with movable type. • Wikipedia: The art and technique of selecting and arranging type styles, point sizes, line lengths, line leading, character spacing, and word spacing for typeset applications. These applications can be physical or digital. • Web Style Guide: The balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content.

  15. http://www.rsub.com/typographic/

  16. http://www.rsub.com/typographic/

  17. http://www.juxtinteractive.com/

  18. http://www.thetruth.com/index.cfm?seek=truth

  19. History of web typography • Macintosh: Graphical User Interface (GUI), bitmapped city-named fonts • Adobe: Postscript • Apple + Microsoft: Truetype • HTML: problem with heading tag • CSS: provide control over exact visual style

  20. Type • Serif: stroke at the ends of a letter • Sans Serif: without serifs • Leading: vertical space between baselines • Kerning: horizontal space between letters

  21. Typefaces http://www.typenow.net/

  22. Typography for the web • Legibility:good typography depends on visual contrast between fonts, text blocks, headlines, space • Alignment: margins unity; white space visual relief • Line length: columns, invisible tables • Typefaces: Georgia & Verdana for screen • Case: upper + lower • Emphasis: italics, bold… • Consistency: create harmonic structure, predictable • Accessibility: • Size: use relative units, offer text-only version • Color: contrast

  23. Google’s logo • Typography v.s. logo • Color v.s. logo • Resourceshttp://www.google.com/doodle8.htmlhttp://www.google.com/holidaylogos.html http://www.google.com/talk/ http://labs.google.com/ http://mail.google.com/mail/help/about.html

  24. Conclusion User, Context, Content • Difference in culture, age, gender • Accessibility • Theme / topic • Don’t overwhelm • Harmony • Use CSS • Don’t underline text, only links

  25. Resources • Art and the Zen of web sites http://www.ischool.utexas.edu/~i385e/readings/art_and_zen.htm • Colors on the web: color theory and color matching http://www.webwhirlers.com/colors/introduction.asp • Color Space Fundamentals http://dx.sheridan.com/advisor/cmyk_color.html • Dictionary.com http://dictionary.reference.com/ • Globalization of the user interface design for the web http://www.ischool.utexas.edu/~i385e/readings/Marcus-globalization.htm • Information Architecture for the World Wide Web, Rosenfeld & Morville • Mundi Design http://www.mundidesign.com/webct/webct.html • The meanings of color: http://www.crystal-cure.com/color-meanings.html • W3 schools http://www.w3schools.com • Web Style Guide http://www.webstyleguide.com/type/index.html • Web color reference http://www.webreference.com/html/reference/color/ • Web monkeys http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design • Wikipedia http://en.wikipedia.org/wiki/Main_Page

More Related