ITP / SED Day 5

Post on 28-Jan-2015

117 views 2 download

Tags:

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

— www.nordkapp.fi— @Nordkapp

Strategy & Experience Design

ITP 2011Aalto University School of Economics

Sami NiemeläCreative Director, Nordkapp

sami.niemela@gmail.com@samin

05

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

Typography

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

“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

Typography = structure

http://swipe.nokia.com

Basics onLetters

I am a serif.

I am a sans serif.

I am a slab serif.

scaling = bad

DOs

LightRegularMediumBoldBlack

LightRegularMediumBoldBlack

LightRegularMediumBoldBlack

LightRegularMediumBoldBlack

iPhone5G

too little contrast

iPhone5G

very good.

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

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

Contrast

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

45MINUTES

Body text level 1

CASE STUDY

Grids

Colour

Subtractive

Additive

Colour Wheel

Primary Colours

Tertiary Colours

Tints, shades and tones

Color Harmonies

Complementary

Complementary colours are really bad for text

Analogous

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

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

Triadic

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

Split-Complementary

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

Rectangle (tetradic)

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

Square

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

THUHOMEWORK

WHERE?sami.niemela@gmail.com w/ title “GROUPNAME Brand Manual ” print out a copy for thursday, hang it on the wall.

Q&A time!

Bonus