DOC PREVIEW
UT INF 385E - Color and Typography for the Web

This preview shows page 1-2-3-4-5-6 out of 17 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 17 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 17 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 17 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 17 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 17 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 17 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 17 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

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 wavelengthDifferent wavelengths are seen as different colorsTypography for the WebTypography for the WebWeb page type vs. Print typeoWeb = 85 dpi or lessoPrint = 1200 dpi or moreLess useable area on a computer screen than on a pagePage 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 TypographyTypographyTypefacesoSerif vs. Sans SerifSerif = More legible on paperSans 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 TypographyTypographySpace & IndentationAlignmentoLeft-justified – main text and headlinesLine lengthWhite SpaceoLeading = 2+point size of typeoParagraphsTo indent: &nbsp; or transparent single-pixel .GIFLine space: <br />+.GIF or <p>ColorColorRGBPrimary ColorsCMYKSecondary ColorsTertiary ColorsColor WheelHueValueTint & ShadeSaturationUsing Colors on the WebUsing Colors on the WebEach 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 digitsEx: 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 PageRule 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 UseColor 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 doResourcesResourcesWeb Style Guide, 2nd edition–http://www.webstyleguide.com/type/index.htmlColors on the Web–http://www.colorsontheweb.com/default.aspDesign: 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

UT INF 385E - Color and Typography for the Web

Documents in this Course
Load more
Download Color and Typography for the Web
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Color and Typography for the Web and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Color and Typography for the Web 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?