Color & Typography for the WebWhy are color & typography important to IA?What is typography?What is color?Typography for the WebGood Typography . . .How to Make Good TypographyMore How to Make Good TypographyLast of How to Make Good TypographyColorSlide 11Using Colors on the WebUsing Colors on Your PageMore Using Colors on Your PageTools You Can UseWhat Did We Learn?ResourcesColor & Typography for Color & Typography for the Webthe WebBy Brittany Anne RobertsonBy Brittany Anne Robertson16 October 200716 October 2007Why are color & typography Why are color & typography important to IA?important to IA?Both serve as visual and verbal communication of a site.F-shaped pattern for reading web contentWhat is typography?What is typography?The study, design, and usage of fonts and typefaces.Times New Roman!Arial!Garamond! Tahoma!Georgia! Verdana !!!What is color?What is color?The way our brain interprets the electromagnetic radiation of a wavelengthDifferent wavelengths are seen as different colorsTypography for the WebTypography for the WebWeb page type vs. Print typeoWeb = 85 dpi or lessoPrint = 1200 dpi or moreLess useable area on a computer screen than on a pagePage is rebuilt each time it is loadedGood Typography . . .Good Typography . . .Establishes a visual hierarchy . . . by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines, and subordinate blocks of textHow to Make Good How to Make Good TypographyTypographyTypefacesoSerif vs. Sans SerifSerif = More legible on paperSans serif = More legible on screen–x-height; size of typefaceoAdaptable typeface = Times New RomanoSome designed for screen: Verdana, Georgia etc.Great on screen, clunky on paperoConvention: serif for text, sans serif for headlinesMore How to Make Good More How to Make Good TypographyTypographyoType size, 12pt or >o3 ways: “em” unit, point size, pixel unitsoDifferent screens display points differentlyoUser settings may interfereoCase: downstyleoEmphasis: italics, bold, underlined, colored text, CAPITAL LETTERSLast of How to Make Good Last of How to Make Good TypographyTypographySpace & IndentationAlignmentoLeft-justified – main text and headlinesLine lengthWhite SpaceoLeading = 2+point size of typeoParagraphsTo indent: or transparent single-pixel .GIFLine space: <br />+.GIF or <p>ColorColorRGBPrimary ColorsCMYKSecondary ColorsTertiary ColorsColor WheelHueValueTint & ShadeSaturationUsing Colors on the WebUsing Colors on the WebEach color = group of 3 dots (R+G+B)oPossible value of each dot from 0 to 255o256 x 256 x 256 = 16,777,216 colors!Hexadecimal system; base of 16oValue of each dot = two digitsEx: FF+FF+00 = Websafe colors – datedoMathematically calculated: combo of 0%,20%, 40%, 60%, 80% and 100% of primary colorso< 1% users have 256 color screensUsing Colors on Your PageUsing Colors on Your PageRule o’ Thumb: Use 3 ColorsoPrimary color: sets tone of designoSecondary color: “back up” primary coloroHighlight color: emphasisAnalog ColorsHarmoniousComplementaryHighlightSplit ComplementaryContrast & HarmonyTriadColorful & BalancedMore Using Colors on Your PageMore Using Colors on Your PageContrastHue ContrastSaturation ContrastValue ContrastSimultaneous ContrastColors & TextTools You Can UseTools You Can UseColor Helpohttp://cssjuice.com/25-popular-color-scheme-and-palette-generators/ http://cssjuice.com/ ohttp://www.colorblender.com/ Color & Textohttp://www.ideo.com/visualizer.html ohttp://typetester.maratz.com/ Color Accessibilityohttp://wellstyled.com/tools/colorscheme2/index-en.htmlWhat Did We Learn?What Did We Learn?Hopefully, what not to doResourcesResourcesWeb Style Guide, 2nd edition–http://www.webstyleguide.com/type/index.htmlColors on the Web–http://www.colorsontheweb.com/default.aspDesign: Talkboard glossary–http://www.designtalkboard.com/glossary/Bad Typography Page–http://www.jaydax.co.uk/tutorials/webdesign/badpageguide/badpgguide.html F-shaped Pattern for Reading Web Content–http://www.useit.com/alertbox/reading_pattern.html Fred Frap’s Page–http://www.fredfrap.com/Booking%20information.htm Usability.gov–http://www.usability.gov/pdfs/guidelines.html Pink and Orange Sunburst
View Full Document