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

1. 05
Strategy & Experience Design
ITP 2011
Aalto University School of Economics
Sami Niemelä
Creative Director, Nordkapp
sami.niemela@gmail.com
@samin
— www.nordkapp.fi
— @Nordkapp

2. SCHEDULE WK2
Monday Tuesday Thursday Friday
Graphic Interaction Design Detailed
Design Design Review + Design
workshop
— Typography — Information
— Visual Design 101 Architecture — per project group — content TBA
— Designing Flows — per project group
You Are Here

3. Typography

5. “
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

6. http://www.sagmeister.com/work/all#/node/157

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

8. Typography = structure

10. http://swipe.nokia.com

14. Basics on
Letters

20. I am a serif.

21. I am a sans serif.

22. I am a slab serif.

25. sc
al
in
g
=
ba
d

26. DOs

27. Light
Regular
Medium
Bold
Black

28. Light
Regular
Medium
Bold
Black

29. Light
Regular
Medium
Bold
Black

30. Light
Regular
Medium
Bold
Black

31. to
o
li
tt
le
co
ntr
as
t
iPhone5G

32. ve
ry
go
od
.
iPhone5G

34. The Measure, ie
the Paragraph length
Optimal lenght for a paragraph is
52-78 characters, including spaces.

35. Leading aka line-height: Larger the
text, smaller the leading.

37. Contrast

40. In groups, select an example
of what you think is good design.
Discuss, and present.
45 MINUTES

41. CASE STUDY
Body text level 1

42. Grids

55. Colour

56. Subtractive

57. Additive

58. Colour Wheel

59. Primary Colours

60. Tertiary Colours

62. Tints, shades and tones

66. Color Harmonies

67. Complementary

68. Complementary colours
are really bad for text

69. Analogous

70. Analogous colours are often
found in nature and hence
are harmonious and peaceful.

71. Choose one color to dominate, a
second to support. The third color is
used as an accent.

72. Triadic

73. To use a triadic harmony successfully,
the colors should be carefully
balanced - let one color dominate and
use the two others for accent.

74. Split-Complementary

75. The split-complimentary color scheme
is often a good choice for beginners,
because it is difficult to mess up.

76. Rectangle (tetradic)

77. Tetradic color schemes works best if
you let one color be dominant.

78. Square

79. http://sagmeister.com/work/featured#/node/192

80. http://sagmeister.com/work/featured#/node/192

81. http://sagmeister.com/work/featured#/node/192

83. MORE
http://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.htm
http://www.worqx.com/color/

84. Start a brand manual
for 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.

85. Q&A time!

86. Bonus