1 / 16

Color & Typography for the Web

Color & Typography for the Web. Rachael Gilg INF 385E: Information Architecture & Design October 12, 2004. Why are color & typography important in IA?. Structuring & ordering content Create hierarchies / order Aid navigation Draw attention to page elements

mora
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 Rachael Gilg INF 385E: Information Architecture & Design October 12, 2004

  2. 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. 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 RGB CMYK Equivalent color units (CSS) red #f00 #ff0000 rgb(255,0,0) rgb(100%, 0%, 0%)

  4. Technical mediating factorsor, 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

  5. Human mediating factors • Visual perception • Color sensitivity • Visual color deficiency (“Color Blindness”) • Eye fatigue • Emotions / mood • Cultural background • Aesthetics

  6. Dimensions of Color • Hue = shade • Saturation = purity • Luminance = brightness • Relativity!!

  7. Designing with color • Use contrast for structure & hierarchy • Color palettes • Monochromatic • Complementary • Analogous • Customization with CSS

  8. Color Palette Examples Monochromatic - http://www.pbs.org/wgbh/amex/foster/ Complementary http://www.pbs.org/empires/romans/ Analogous - http://www.pbs.org/animateddogs/

  9. II. Typography • “Typography exists to honor content.” - Robert Bringhurst • Verbal & visual • Creates hierarchy to understand relationships • Web typography considerations • Legibility • Readability • Accessibility / Customization

  10. 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. 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. 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. Example: WWW Consortiumhttp://www.w3c.org

  14. Example: The Atlantichttp://www.theatlantic.com

  15. Example: Buglighthttp://www.donbarnett.com

  16. 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=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, 2nd edition. New Haven: Yale University Press. (also online at 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#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 . World Wide Web Consortium. (May, 2003). CSS3 Color Module. Retrieved October 7, 2004 from http://www.w3.org/TR/2003/CR-css3-color-20030514/.

More Related