Color & Typography for the WebOverviewImportance of color & typography in IAColor SystemsWeb color: screen displayWeb color: browserWeb color: HTMLColor theoryColor Symbolismhttp://www.creativesourcesf.com/http://www.toydrum.com/http://www.rockcorps.org/http://www.jrgeoffrion.com/What is Typography?http://www.rsub.com/typographic/Slide 16http://www.juxtinteractive.com/Slide 18History of web typographyTypeTypefacesTypography for the webGoogle’s logoSlide 24Slide 25Slide 26Slide 27ConclusionResourcesColor & Typography for the WebInformation Architecture & Design IYi-Hsuen ShihOctober 25, 2005OverviewoImportance of color & typography in IAoColor: systems, screen display, browser, HTML, theory, symbolismoTypography: definition, history, type, 3 aspectsoHow does Google do it?oResourcesImportance of color & typography in IAoBuild hierarchy, structure, organization oCreate contextoEnhance contentoDraw attentionoProvoke emotionsoConvey meaningoVisual communicationoAid to metaphor, navigation, label, logo, graphics...Color SystemsoPrint: oCMYK: cyan, magenta, yellow and black oSubtractive or Reflective colorsoScreen display:oRBG: red, blue, greenoAdditive colorshttp://dx.sheridan.com/advisor/cmyk_color.htmlWeb color: screen displayoPixel (picture element): x & y coordinatesoColor depth (resolution):o1-bit  2 colors (black & white)o8-bit  256 colorso16-bit  thousands of colorso24-bit  millions of colors (true color)Web color: browseroDithering: illusion of missing colors oDiminish harsh transition, sharpness oWeb (Browser)-safe color:oBased on 8-bit color screen display: 216 cross platform color paletteo“Reallysafe” colors: only 22 colors oStrategy: oIdentify your audience’s technologiesoUse Reallysafe paletteoUse transparent backgroundsoUse flashWeb color: HTMLoColor value: Hexadecimal notationoColor name: Black, coral…Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Color theoryoColor attributesoHue: colorsoSaturation: intensityoBrightness: darkness/ lightnessoColor harmoniesoWarm: activeoCool: calming effectoAnalog: similar huesoComplementary: opposite colorsoTriads: 3 colors in triangleoTool: Mundi Designhttp://joehallock.com/edu/COM498/index.htmlColor SymbolismoUse color to convey meaning:oBlack: power, stylish, timelessoWhite: purity, neutral, summeroRed: action, confidence, courage, vitality, love, intensityoGreen: life, nature, fertility, calmingoBlue: Loyalty, truth, peace, depressinghttp://www.creativesourcesf.com/http://www.toydrum.com/http://www.rockcorps.org/http://www.jrgeoffrion.com/What is Typography?oDictionary.com: The art and technique of printing with movable type. oWikipedia: 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. oWeb 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://www.thetruth.com/index.cfm?seek=truthHistory of web typographyoMacintosh: Graphical User Interface (GUI), bitmapped city-named fontsoAdobe: PostscriptoApple + Microsoft: TruetypeoHTML: problem with heading tagoCSS: provide control over exact visual styleTypeoSerif: stroke at the ends of a letteroSans Serif: without serifsoLeading: vertical space between baselinesoKerning: horizontal space between lettersTypefaceshttp://www.typenow.net/Typography for the weboLegibility: good typography depends on visual contrast between fonts, text blocks, headlines, spaceoAlignment: margins unity; white space visual reliefoLine length: columns, invisible tables oTypefaces: Georgia & Verdana for screenoCase: upper + loweroEmphasis: italics, bold…oConsistency: create harmonic structure, predictableoAccessibility: oSize: use relative units, offer text-only versionoColor: contrastGoogle’s logooTypography v.s. logooColor v.s. logooResourceshttp://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.htmlConclusionUser, Context, ContentoDifference in culture, age, gender oAccessibility oTheme / topicoDon’t overwhelmoHarmonyoUse CSSoDon’t underline text, only linksResourcesoArt and the Zen of web sites http://www.ischool.utexas.edu/~i385e/readings/art_and_zen.htmoColors on the web: color theory and color matching http://www.webwhirlers.com/colors/introduction.aspoColor Space Fundamentals http://dx.sheridan.com/advisor/cmyk_color.htmloDictionary.com http://dictionary.reference.com/oGlobalization of the user interface design for the web http://www.ischool.utexas.edu/~i385e/readings/Marcus-globalization.htmoInformation Architecture for the World Wide Web, Rosenfeld & MorvilleoMundi Design http://www.mundidesign.com/webct/webct.htmloThe meanings of color: http://www.crystal-cure.com/color-meanings.htmloW3 schools http://www.w3schools.com oWeb Style Guide http://www.webstyleguide.com/type/index.htmloWeb color reference http://www.webreference.com/html/reference/color/oWeb monkeys http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=designoWikipedia