Presentation is loading. Please wait.

Presentation is loading. Please wait.

Color & Typography for the Web Information Architecture & Design I Yi-Hsuen Shih October 25, 2005.

Similar presentations


Presentation on theme: "Color & Typography for the Web Information Architecture & Design I Yi-Hsuen Shih October 25, 2005."— Presentation transcript:

1 Color & Typography for the Web Information Architecture & Design I Yi-Hsuen Shih October 25, 2005

2 Overview o Importance of color & typography in IA o Color: systems, screen display, browser, HTML, theory, symbolism o Typography: definition, history, type, 3 aspects o How does Google do it? o Resources

3 Importance of color & typography in IA o Build hierarchy, structure, organization o Create context o Enhance content o Draw attention o Provoke emotions o Convey meaning o Visual communication o Aid to metaphor, navigation, label, logo, graphics...

4 Color Systems o Print: o CMYK: cyan, magenta, yellow and black o Subtractive or Reflective colors o Screen display: o RBG: red, blue, green o Additive colors

5 Web color: screen display o Pixel (picture element): x & y coordinates o Color depth (resolution): o 1-bit  2 colors (black & white) o 8-bit  256 colors o 16-bit  thousands of colors o 24-bit  millions of colors (true color)

6 Web color: browser o 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 palette o “Reallysafe” colors: only 22 colors  o Strategy: o Identify your audience’s technologies o Use Reallysafe palette o Use transparent backgrounds o Use flash

7 Web color: HTML o Color value: Hexadecimal notation o Color name: Black, coral… Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C

8 Color theory o Color attributes o Hue: colors o Saturation: intensity o Brightness: darkness/ lightness o Color harmonies o Warm: active o Cool: calming effect o Analog: similar hues o Complementary: opposite colors o Triads: 3 colors in triangle o Tool: Mundi DesignMundi Design

9 Color Symbolism o Use color to convey meaning: o Black: power, stylish, timeless o White: purity, neutral, summer o Red: action, confidence, courage, vitality, love, intensity o Green: life, nature, fertility, calming o Blue: Loyalty, truth, peace, depressing

10

11

12

13

14 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.

15

16

17

18

19 History of web typography o Macintosh: Graphical User Interface (GUI), bitmapped city-named fonts o Adobe: Postscript o Apple + Microsoft: Truetype o HTML: problem with heading tag o CSS: provide control over exact visual style

20 Type o Serif: stroke at the ends of a letter o Sans Serif: without serifs o Leading: vertical space between baselines o Kerning: horizontal space between letters

21 Typefaces

22 Typography for the web o Legibility: good typography depends on visual contrast between fonts, text blocks, headlines, space o Alignment: margins  unity; white space  visual relief o Line length: columns, invisible tables o Typefaces: Georgia & Verdana for screen o Case: upper + lower o Emphasis: italics, bold… o Consistency: create harmonic structure, predictable o Accessibility: o Size: use relative units, offer text-only version o Color: contrast

23 Google’s logo o Typography v.s. logo o Color v.s. logo o Resources

24

25

26

27

28 Conclusion User, Context, Content o Difference in culture, age, gender o Accessibility o Theme / topic o Don’t overwhelm o Harmony o Use CSS o Don’t underline text, only links

29 Resources o Art and the Zen of web sites o Colors on the web: color theory and color matching o Color Space Fundamentals o Dictionary.com o Globalization of the user interface design for the web globalization.htm globalization.htm o Information Architecture for the World Wide Web, Rosenfeld & Morville o Mundi Design o The meanings of color: meanings.htmlhttp://www.crystal-cure.com/color- meanings.html o W3 schools o Web Style Guide o Web color reference o Web monkeys o Wikipedia


Download ppt "Color & Typography for the Web Information Architecture & Design I Yi-Hsuen Shih October 25, 2005."

Similar presentations


Ads by Google