Successfully reported this slideshow.

More Related Content

Color & Typography

  1. 1. COLOR and TYPOGRAPHY Thursday, December 15, 11
  2. 2. Goals for today •Review •Colors & color palettes •Accessibility •Image formatting •Typefaces •Typography site review Thursday, December 15, 11
  3. 3. What is progressive enhancement? Thursday, December 15, 11
  4. 4. A layered approach to Web Design, focused on content, accessibility & the user. Thursday, December 15, 11
  5. 5. Progressive Enhancement HTML - Structure CSS - Presentation JS - Behavior Thursday, December 15, 11
  6. 6. Review: The Design Process Thursday, December 15, 11
  7. 7. The Design Process •Define •Structure •Design •Build & Test •Launch Thursday, December 15, 11
  8. 8. Colors & Color Pallets Thursday, December 15, 11
  9. 9. The Color Wheel Thursday, December 15, 11
  10. 10. RGB vs CMYK Thursday, December 15, 11
  11. 11. 1 cool/ 3 3 passive 2 2 3 3 1 1 warm/ active 3 2 3 Thursday, December 15, 11
  12. 12. Thursday, December 15, 11
  13. 13. Thursday, December 15, 11
  14. 14. Thursday, December 15, 11
  15. 15. Color Types Thursday, December 15, 11
  16. 16. RED Thursday, December 15, 11
  17. 17. Thursday, December 15, 11
  18. 18. PURPLE Thursday, December 15, 11
  19. 19. Thursday, December 15, 11
  20. 20. BLUE Thursday, December 15, 11
  21. 21. Thursday, December 15, 11
  22. 22. GREEN Thursday, December 15, 11
  23. 23. Thursday, December 15, 11
  24. 24. Thursday, December 15, 11
  25. 25. ORANGE Thursday, December 15, 11
  26. 26. Thursday, December 15, 11
  27. 27. YELLOW Thursday, December 15, 11
  28. 28. Thursday, December 15, 11
  29. 29. http://wearepandr.com/labs/colour_bookmark Thursday, December 15, 11
  30. 30. Accessibility Thursday, December 15, 11
  31. 31. Color Blindness •Total •Red-Green •Blue-Yellow Thursday, December 15, 11
  32. 32. Color Blindness Thursday, December 15, 11
  33. 33. Color Blindness Click the red button to continue continue continue Thursday, December 15, 11
  34. 34. Image formatting Thursday, December 15, 11
  35. 35. Thursday, December 15, 11
  36. 36. Image formatting •GIF •JPEG •PNG 8 •PNG 24 •PNG 32 •Vector Thursday, December 15, 11
  37. 37. Typography Thursday, December 15, 11
  38. 38. Typography •font face (font-family) •size (font-size) •line length (max-width) •leading (line-height) •tracking (word-spacing) •kerning (letter-spacing) •color (color) Thursday, December 15, 11
  39. 39. Anatomy of a Font Ascender Cap height Meanline Special font, the letter y. Baseline Descender Thursday, December 15, 11
  40. 40. Anatomy of a Font ecial font x x-height Thursday, December 15, 11
  41. 41. Anatomy of a Font Special font Serif Thursday, December 15, 11
  42. 42. Font Face •Serif •Sans-serif •Monospace •Slab Serif •Handwritten •Decorative •Ornamental Thursday, December 15, 11
  43. 43. Serif Thursday, December 15, 11
  44. 44. Sans-Serif Thursday, December 15, 11
  45. 45. Monospace Thursday, December 15, 11
  46. 46. Slab-Serif Thursday, December 15, 11
  47. 47. Handwritten Thursday, December 15, 11
  48. 48. decorative Thursday, December 15, 11
  49. 49.   Thursday, December 15, 11
  50. 50. Size & weight •Emphasis like this •hierarchy... •...shows order •general readability http://www.bostonglobe.com/todayspaper Thursday, December 15, 11
  51. 51. Line Length In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. Thursday, December 15, 11
  52. 52. Line Height In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. Thursday, December 15, 11
  53. 53. Line Height/Length In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. Thursday, December 15, 11
  54. 54. Word Spacing In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. Thursday, December 15, 11
  55. 55. Letter Spacing In typography, color is the overa ll density of the ink on the page, d e t e r m i n e d ma i n l y b y t h e t y p e f a c e, but also by the word spacing, leading and depth of the margin s. [18] Text layout, tone or color of set matter, and the interplay o f text with white space of the pag e and other graphic elements com bine to impart a "feel" or "resona nce" to the subject matter. With printed media typographers are a lso concerned with binding margin s, paper selection and printing m ethods. Thursday, December 15, 11
  56. 56. Color Thursday, December 15, 11
  57. 57. Font as a logo What movie is it? Thursday, December 15, 11
  58. 58. 0123456789 ABCDEFGHIJKLMNOP QRSTUVWXYZ Thursday, December 15, 11
  59. 59. Harry Potter Thursday, December 15, 11
  60. 60. 0123456789 ABCDEFGHIJKLMNO P QRSTUVWXYZ Thursday, December 15, 11
  61. 61. The Godfather Thursday, December 15, 11
  62. 62. 0123456789 ABCDEFGHIJKLMNOP QRSTUVWXYZ Thursday, December 15, 11
  63. 63. Back to the future Thursday, December 15, 11
  64. 64. 0123456789 ABCDEFGHIJKLMNOP QRSTUVWXYZ Thursday, December 15, 11
  65. 65. 007 GOLDENEYE Thursday, December 15, 11
  66. 66. Great Typography Thursday, December 15, 11
  67. 67. Thursday, December 15, 11
  68. 68. Thursday, December 15, 11
  69. 69. Thursday, December 15, 11
  70. 70. Thursday, December 15, 11
  71. 71. Thursday, December 15, 11
  72. 72. Thursday, December 15, 11
  73. 73. Typography on the Web Thursday, December 15, 11
  74. 74. http://ruth.realityla.com/ Thursday, December 15, 11
  75. 75. http://www.smashingmagazine.com/2011/10/07/16-pixels- body-copy-anything-less-costly-mistake/ Thursday, December 15, 11
  76. 76. Thursday, December 15, 11
  77. 77. Thursday, December 15, 11
  78. 78. http://bostonglobe.com/arts/2011/12/15/unfinished-spaces- look-plan-from-castro-revolution/ K723H16LY24PR9zfqtROsN/story.html Thursday, December 15, 11
  79. 79. Thursday, December 15, 11
  80. 80. Great Sites to Read •I Love Typography •We Love Typography •Typography Daily •Fonts.com •The Noun Project •Colour Lovers Thursday, December 15, 11
  81. 81. Today is in the past •Review •Colors & color palettes •Accessibility •Image formatting •Typefaces •Typography site review •http://wearepandr.com/labs/colour_bookmark Thursday, December 15, 11
  82. 82. Next Class •Navigation •Information Architecture •Accessing Information •Site mapping •Wireframing Thursday, December 15, 11
  83. 83. Slide Color Pallet Thursday, December 15, 11
  84. 84. Concerns E-mail: timwright12@gmail.com Twitter: @csskarma AIM: csskarma Thursday, December 15, 11

×