1. Color & Typography for the Web Rachael Gilg INF 385E: Information Architecture & Design October 12, 2004

2. Rachael Gilg | INF 385E | October 12, 2004 Why are color & typography important in IA? Structuring & ordering content –Create hierarchies / order –Aid navigation –Draw attention to page elements Communicating using visual language Solving problems

3. Rachael Gilg | INF 385E | October 12, 2004 How Web color works RGB vs. CMYK –Web vs. print –Additive vs. subtractive Representing colors on the Web –Hexidecimal system (RRGGBB) –Named colors –RGB values / percentages red #f00 #ff0000 rgb(255,0,0) rgb(100%, 0%, 0%) RGBCMYK Equivalent color units (CSS)

4. Rachael Gilg | INF 385E | October 12, 2004 Technical mediating factors or, fear of the “dreaded 216” Monitors (bit-depth setting) –8 bit = 256 colors (4% of users) –16 bit “high color” = 65,000 colors (30%) –24 bit “true color” = 16.7+ million colors (66%) Browsers –Dithering –“Web-safe” colors Platforms / Monitors (color calibration) –Gamma (contrast) settings 1.8 for Mac, 2.2 for PC statistics source: http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_stats.asp

5. Rachael Gilg | INF 385E | October 12, 2004 Human mediating factors Visual perception –Color sensitivity –Visual color deficiency (“Color Blindness”) –Eye fatigue Emotions / mood Cultural background Aesthetics

6. Rachael Gilg | INF 385E | October 12, 2004 Dimensions of Color Hue = shade Saturation = purity Luminance = brightness Relativity!!

7. Rachael Gilg | INF 385E | October 12, 2004 Designing with color Use contrast for structure & hierarchy Color palettes –Monochromatic –Complementary –Analogous Customization with CSS

8. Rachael Gilg | INF 385E | October 12, 2004 Color Palette Examples Monochromatic - http://www.pbs.org/wgbh/amex/foster/ http://www.pbs.org/wgbh/amex/foster/ Analogous - http://www.pbs.org/animateddogs/ http://www.pbs.org/animateddogs/ Complementary http://www.pbs.org/empires/romans/

9. Rachael Gilg | INF 385E | October 12, 2004 II. Typography “Typography exists to honor content.” - Robert Bringhurst –Verbal & visual –Creates hierarchy to understand relationships Web typography considerations –Legibility –Readability –Accessibility / Customization

10. Rachael Gilg | INF 385E | October 12, 2004 Evolution of digital typography Graphical User Interfaces HTML –Separates design from structure –Emphasis on interoperability, not visual style CSS (Cascading Style Sheets) –separates visual style from document structure –greater typographic control with less code –more formatting options

11. Rachael Gilg | INF 385E | October 12, 2004 Font styles on the Web Best choice for screen: sans-serif, large size, exaggerated x-height Verdana x Times x High contrast with background color Anticipate size variability Avoid ALL CAPS & use “downstyle” headlines Use emphasis sparingly, 1 parameter –Colored / underlined have special meanings Specify fonts for each platform Be consistent Match style to content

12. Rachael Gilg | INF 385E | October 12, 2004 Formatting Overall pattern of organization & visual contrast –Establish visual pattern using grid system Alignment –Left-justified with ragged edge is best Line Length –Columns of text no wider than 365 px. –Anticipate expanding layouts / wrapping White space is your friend!

13. Rachael Gilg | INF 385E | October 12, 2004 Example: WWW Consortium http://www.w3c.org http://www.w3c.org

14. Rachael Gilg | INF 385E | October 12, 2004 Example: The Atlantic http://www.theatlantic.com http://www.theatlantic.com

15. Rachael Gilg | INF 385E | October 12, 2004 Example: Buglight http://www.donbarnett.com http://www.donbarnett.com

16. Rachael Gilg | INF 385E | October 12, 2004 Sources Bringhurst, R. (1992). Elements of Typographic Style. Vancouver: Hartley & Marks. Gorn, G. J., Chattopadhyay, A., Sengupta, J., & Tripathi, S. (May, 2004). Waiting for the Web: how screen color affects time perception. In Journal of Marketing Research, pp. 215-225. Hall, R. H. & Hanna, P. (May-June, 2004). The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. In Behaviour & Information Technology, 23:3, pp. 183-195. Lehn, D. & Stern, H. (September 6, 2002). Death of the websafe Color palette? Retrieved October 7, 2004 from the Webmonkey Web site at http://webmonkey.wired.com/webmonkey/00/37/index2a.html?tw=designhttp://webmonkey.wired.com/webmonkey/00/37/index2a.html?tw=design Loxley, S. (2004). Type: the secret history of letters. London: I.B. Tauris Lynch, P. J. (2002). Web style guide: basic principles for creating Web site, 2 nd edition. New Haven: Yale University Press. (also online at http://www.webstyleguide.com)http://www.webstyleguide.com Mahnke, F.H. & Mahnke, R.H. (1987). Color and light in man-made environments. New York: Van Nostrand Reinhold Company. Paper vs. Pixels Part 2. (September, 2004). Retrieved October 5, 2004 from the Web page design for designers Web site at http://www.wpdfd.com/editorial/wpd0904news.htm#feature2http://www.wpdfd.com/editorial/wpd0904news.htm#feature2 Pring, R. (2000). WWW.color: effective use of color in web page design. New York: Watson-Guptil Publications. Wikipedia. Web colors. Retrieved October 6, 2004 from http://en.wikipedia.org/wiki/Web_color.http://en.wikipedia.org/wiki/Web_color World Wide Web Consortium. (May, 2003). CSS3 Color Module. Retrieved October 7, 2004 from http://www.w3.org/TR/2003/CR-css3-color-20030514/. http://www.w3.org/TR/2003/CR-css3-color-20030514/