Successfully reported this slideshow.

ITP / SED Day 5

1,435 views

Published on

First day of the week two of lectures at Aalto University School of Economics’ ITP summer programme’s Strategy and Experience. https://itp.hse.fi/

Contents: typography, colour

Published in: Design, Technology
  • Be the first to comment

ITP / SED Day 5

  1. 1. 05Strategy & Experience DesignITP 2011Aalto University School of EconomicsSami NiemeläCreative Director, Nordkappsami.niemela@gmail.com@samin— www.nordkapp.fi— @Nordkapp
  2. 2. SCHEDULE WK2Monday Tuesday Thursday FridayGraphic Interaction Design DetailedDesign Design Review + Design workshop— Typography — Information— Visual Design 101 Architecture — per project group — content TBA — Designing Flows — per project groupYou Are Here
  3. 3. Typography
  4. 4. “ Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and sans serif typefaces, about varying the amount of space between di erent letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating. – Steve Jobs
  5. 5. http://www.sagmeister.com/work/all#/node/157
  6. 6. “ “95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography. – Oliver Reichenstein / @iA
  7. 7. Typography = structure
  8. 8. http://swipe.nokia.com
  9. 9. Basics onLetters
  10. 10. I am a serif.
  11. 11. I am a sans serif.
  12. 12. I am a slab serif.
  13. 13. sc al in g = ba d
  14. 14. DOs
  15. 15. LightRegularMediumBoldBlack
  16. 16. LightRegularMediumBoldBlack
  17. 17. LightRegularMediumBoldBlack
  18. 18. LightRegularMediumBoldBlack
  19. 19. to o li tt le co ntr as tiPhone5G
  20. 20. ve ry go od .iPhone5G
  21. 21. The Measure, iethe Paragraph lengthOptimal lenght for a paragraph is52-78 characters, including spaces.
  22. 22. Leading aka line-height: Larger thetext, smaller the leading.
  23. 23. Contrast
  24. 24. In groups, select an exampleof what you think is good design.Discuss, and present.45 MINUTES
  25. 25. CASE STUDYBody text level 1
  26. 26. Grids
  27. 27. Colour
  28. 28. Subtractive
  29. 29. Additive
  30. 30. Colour Wheel
  31. 31. Primary Colours
  32. 32. Tertiary Colours
  33. 33. Tints, shades and tones
  34. 34. Color Harmonies
  35. 35. Complementary
  36. 36. Complementary coloursare really bad for text
  37. 37. Analogous
  38. 38. Analogous colours are oftenfound in nature and henceare harmonious and peaceful.
  39. 39. Choose one color to dominate, asecond to support. The third color isused as an accent.
  40. 40. Triadic
  41. 41. To use a triadic harmony successfully,the colors should be carefullybalanced - let one color dominate anduse the two others for accent.
  42. 42. Split-Complementary
  43. 43. The split-complimentary color schemeis often a good choice for beginners,because it is difficult to mess up.
  44. 44. Rectangle (tetradic)
  45. 45. Tetradic color schemes works best ifyou let one color be dominant.
  46. 46. Square
  47. 47. http://sagmeister.com/work/featured#/node/192
  48. 48. http://sagmeister.com/work/featured#/node/192
  49. 49. http://sagmeister.com/work/featured#/node/192
  50. 50. MOREhttp://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htmhttp://www.worqx.com/color/
  51. 51. Start a brand manualfor your project: Outline colours,type and the visual language.THU WHERE? sami.niemela@gmail.com w/ title “GROUPNAME Brand Manual ” HOMEWORK print out a copy for thursday, hang it on the wall.
  52. 52. Q&A time!
  53. 53. Bonus

×