color & typography for the web information architecture & design i yi-hsuen shih october 25,...

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