Download pdf - Proximity & Alignment

Transcript
Page 1: Proximity & Alignment

Proximity & Alignment

Page 2: Proximity & Alignment

PROXIMITY

PROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITY

PROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITY

PROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITY

PROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITY

PROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITY

PROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITYPROXIMITY

Proximity Proximity Proximity Proximity Proximity Proximity Proximity Proximity

Page 3: Proximity & Alignment

proximity = nearness

Page 4: Proximity & Alignment
Page 5: Proximity & Alignment

Physical nearness = organizational nearness

So, group related items together!

Page 6: Proximity & Alignment

My Favorite Things to Do:HikingBiking

Going to the beachCookingHanging out with friendsDrinking coffee

Eating out

Page 7: Proximity & Alignment

My Favorite Things to Do:HikingBikingGoing to the beachHanging out with friends Cooking

Drinking coffeeGoing out to eat

Page 8: Proximity & Alignment
Page 9: Proximity & Alignment
Page 10: Proximity & Alignment
Page 11: Proximity & Alignment

THE WAY WE READ

Page 12: Proximity & Alignment
Page 13: Proximity & Alignment
Page 14: Proximity & Alignment
Page 15: Proximity & Alignment
Page 16: Proximity & Alignment
Page 17: Proximity & Alignment

ALIGNMENT

ALIGNMENT

ALIGNMENT

Page 18: Proximity & Alignment
Page 19: Proximity & Alignment

SOFTER SENSE OF LINE STRONGER SENSE OF LINE

Page 20: Proximity & Alignment

Typographic Alignment

Page 21: Proximity & Alignment
Page 22: Proximity & Alignment

Justified

Makes a clean, even shape on page

Best when you have a lot of text

Used often in magazines, newspapers, and other publications (not web)

Page 23: Proximity & Alignment
Page 24: Proximity & Alignment

CenteredFormal & classical

Organic shape on page

Page 25: Proximity & Alignment
Page 26: Proximity & Alignment
Page 27: Proximity & Alignment

Flush left (ragged right)Follows natural flow of language

Avoids spacing problems of justified text

Page 28: Proximity & Alignment
Page 29: Proximity & Alignment

Flush right (ragged left)

Departure from familiar reading progression

Makes for effective captions, sidebars, and marginal notes

Page 30: Proximity & Alignment
Page 31: Proximity & Alignment

Purpose of alignmentTo UNIFY & ORGANIZE the page

Page 32: Proximity & Alignment

Good rule of thumb: Every type element on the page should be aligned with at least one other type element