ITP / SED Day 5

86
— www.nordkapp.fi — @Nordkapp Strategy & Experience Design ITP 2011 Aalto University School of Economics Sami Niemelä Creative Director, Nordkapp [email protected] @samin 05

description

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

Transcript of ITP / SED Day 5

Page 1: ITP / SED Day 5

— www.nordkapp.fi— @Nordkapp

Strategy & Experience Design

ITP 2011Aalto University School of Economics

Sami NiemeläCreative Director, Nordkapp

[email protected]@samin

05

Page 2: ITP / SED Day 5

SCHEDULE WK2

Monday

Graphic Design

— Typography— Visual Design 101

Tuesday

Interaction Design

— Information Architecture— Designing Flows

Thursday

Design Review + workshop— per project group

Friday

Detailed Design

— content TBA— per project group

You Are Here

Page 3: ITP / SED Day 5

Typography

Page 4: ITP / SED Day 5
Page 5: ITP / SED Day 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

Page 7: ITP / SED Day 5

“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

Page 8: ITP / SED Day 5

Typography = structure

Page 9: ITP / SED Day 5
Page 10: ITP / SED Day 5

http://swipe.nokia.com

Page 11: ITP / SED Day 5
Page 12: ITP / SED Day 5
Page 13: ITP / SED Day 5
Page 14: ITP / SED Day 5

Basics onLetters

Page 15: ITP / SED Day 5
Page 16: ITP / SED Day 5
Page 17: ITP / SED Day 5
Page 18: ITP / SED Day 5
Page 19: ITP / SED Day 5
Page 20: ITP / SED Day 5

I am a serif.

Page 21: ITP / SED Day 5

I am a sans serif.

Page 22: ITP / SED Day 5

I am a slab serif.

Page 23: ITP / SED Day 5
Page 24: ITP / SED Day 5
Page 25: ITP / SED Day 5

scaling = bad

Page 26: ITP / SED Day 5

DOs

Page 27: ITP / SED Day 5

LightRegularMediumBoldBlack

Page 28: ITP / SED Day 5

LightRegularMediumBoldBlack

Page 29: ITP / SED Day 5

LightRegularMediumBoldBlack

Page 30: ITP / SED Day 5

LightRegularMediumBoldBlack

Page 31: ITP / SED Day 5

iPhone5G

too little contrast

Page 32: ITP / SED Day 5

iPhone5G

very good.

Page 33: ITP / SED Day 5
Page 34: ITP / SED Day 5

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

Page 35: ITP / SED Day 5

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

Page 36: ITP / SED Day 5
Page 37: ITP / SED Day 5

Contrast

Page 38: ITP / SED Day 5
Page 39: ITP / SED Day 5
Page 40: ITP / SED Day 5

In groups, select an exampleof what you think is good design. Discuss, and present.

45MINUTES

Page 41: ITP / SED Day 5

Body text level 1

CASE STUDY

Page 42: ITP / SED Day 5

Grids

Page 43: ITP / SED Day 5
Page 44: ITP / SED Day 5
Page 45: ITP / SED Day 5
Page 46: ITP / SED Day 5
Page 47: ITP / SED Day 5
Page 48: ITP / SED Day 5
Page 49: ITP / SED Day 5
Page 50: ITP / SED Day 5
Page 51: ITP / SED Day 5
Page 52: ITP / SED Day 5
Page 53: ITP / SED Day 5
Page 54: ITP / SED Day 5
Page 55: ITP / SED Day 5

Colour

Page 56: ITP / SED Day 5

Subtractive

Page 57: ITP / SED Day 5

Additive

Page 58: ITP / SED Day 5

Colour Wheel

Page 59: ITP / SED Day 5

Primary Colours

Page 60: ITP / SED Day 5

Tertiary Colours

Page 61: ITP / SED Day 5
Page 62: ITP / SED Day 5

Tints, shades and tones

Page 63: ITP / SED Day 5
Page 64: ITP / SED Day 5
Page 65: ITP / SED Day 5
Page 66: ITP / SED Day 5

Color Harmonies

Page 67: ITP / SED Day 5

Complementary

Page 68: ITP / SED Day 5

Complementary colours are really bad for text

Page 69: ITP / SED Day 5

Analogous

Page 70: ITP / SED Day 5

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

Page 71: ITP / SED Day 5

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

Page 72: ITP / SED Day 5

Triadic

Page 73: ITP / SED Day 5

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

Page 74: ITP / SED Day 5

Split-Complementary

Page 75: ITP / SED Day 5

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

Page 76: ITP / SED Day 5

Rectangle (tetradic)

Page 77: ITP / SED Day 5

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

Page 78: ITP / SED Day 5

Square

Page 82: ITP / SED Day 5
Page 84: ITP / SED Day 5

Start a brand manualfor your project: Outline colours, type and the visual language.

THUHOMEWORK

[email protected] w/ title “GROUPNAME Brand Manual ” print out a copy for thursday, hang it on the wall.

Page 85: ITP / SED Day 5

Q&A time!

Page 86: ITP / SED Day 5

Bonus