Color & Typography for the Web
29
Color & Typography for the Web Information Architecture & Design I Yi-Hsuen Shih October 25, 2005
description
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? - PowerPoint PPT Presentation
Transcript of Color & Typography for the Web
Color & Typography for the Web
Information Architecture & Design IYi-Hsuen ShihOctober 25, 2005
Overviewo Importance of color &
typography in IAo Color: systems, screen
display, browser, HTML, theory, symbolism
o Typography: definition, history, type, 3 aspects
o How does Google do it?o Resources
Importance of color & typography in IAo Build hierarchy, structure,
organization o Create contexto Enhance contento Draw attentiono Provoke emotionso Convey meaningo Visual communicationo Aid to metaphor, navigation,
label, logo, graphics...
Color Systemso Print:
oCMYK: cyan, magenta, yellow and black
oSubtractive or Reflective colors
o Screen display:oRBG: red, blue, greenoAdditive colors
http://dx.sheridan.com/advisor/cmyk_color.html
Web color: screen displayo Pixel (picture element):
x & y coordinateso Color depth (resolution):
o1-bit 2 colors (black & white)
o8-bit 256 colorso16-bit thousands of colors
o24-bit millions of colors (true color)
Web color: browsero Dithering: illusion of missing colors
o Diminish harsh transition, sharpness
o Web (Browser)-safe color:o Based on 8-bit color screen display: 216
cross platform color paletteo “Reallysafe” colors: only 22 colors o Strategy:
o Identify your audience’s technologiesoUse Reallysafe paletteoUse transparent backgroundsoUse flash
Web color: HTMLo Color value: Hexadecimal
notationo Color name: Black, coral…
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Color theoryo Color attributes
o Hue: colorso Saturation: intensityo Brightness:
darkness/ lightness
o Color harmonieso Warm: activeo Cool: calming effecto Analog: similar hueso Complementary: opposite colorso Triads: 3 colors in triangleo Tool: Mundi Design
http://joehallock.com/edu/COM498/index.html
Color Symbolismo Use color to convey meaning:
oBlack: power, stylish, timelessoWhite: purity, neutral, summeroRed: action, confidence, courage, vitality, love, intensity
oGreen: life, nature, fertility, calming
oBlue: Loyalty, truth, peace, depressing
http://www.creativesourcesf.com/
http://www.toydrum.com/
http://www.rockcorps.org/
http://www.jrgeoffrion.com/
What is Typography?o Dictionary.com: The art and technique
of printing with movable type.
o 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.
o 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.
http://www.rsub.com/typographic/
http://www.rsub.com/typographic/
http://www.juxtinteractive.com/
http
://ww
w.th
etru
th.co
m/in
dex.cfm
?seek
=tru
th
History of web typographyo Macintosh: Graphical User
Interface (GUI), bitmapped city-named fonts
o Adobe: Postscripto Apple + Microsoft: Truetypeo HTML: problem with
heading tago CSS: provide control over
exact visual style
Type
o Serif: stroke at the ends of a letter
o Sans Serif: without serifso Leading: vertical space
between baselineso Kerning: horizontal space
between letters
Typefaces
http://www.typenow.net/
Typography for the webo Legibility: good typography depends on
visual contrast between fonts, text blocks, headlines, spaceo Alignment: margins unity; white space
visual reliefo Line length: columns, invisible tables o Typefaces: Georgia & Verdana for screeno Case: upper + lowero Emphasis: italics, bold…
o Consistency: create harmonic structure, predictable
o Accessibility: o Size: use relative units, offer text-only versiono Color: contrast
Google’s logoo Typography v.s. logoo Color v.s. logoo Resources
http://www.google.com/doodle8.html http://www.google.com/holidaylogos.htmlhttp://www.google.com/talk/http://labs.google.com/http://mail.google.com/mail/help/about.html
ConclusionUser, Context, Content
o Difference in culture, age, gender
o Accessibility o Theme / topico Don’t overwhelmo Harmonyo Use CSSo Don’t underline text, only links
Resourceso Art and the Zen of web sites
http://www.ischool.utexas.edu/~i385e/readings/art_and_zen.htmo Colors on the web: color theory and color matching
http://www.webwhirlers.com/colors/introduction.aspo Color Space Fundamentals
http://dx.sheridan.com/advisor/cmyk_color.htmlo Dictionary.com http://dictionary.reference.com/o Globalization of the user interface design for the web
http://www.ischool.utexas.edu/~i385e/readings/Marcus-globalization.htm
o Information Architecture for the World Wide Web, Rosenfeld & Morville
o Mundi Design http://www.mundidesign.com/webct/webct.htmlo The meanings of color: http://www.crystal-cure.com/color-
meanings.htmlo W3 schools http://www.w3schools.com o Web Style Guide http://www.webstyleguide.com/type/index.htmlo Web color reference
http://www.webreference.com/html/reference/color/o Web monkeys
http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design
o Wikipedia http://en.wikipedia.org/wiki/Main_Page
