Page Layout and Design Principles

Page Layout & Targeted Documents : 

Page Layout & Targeted Documents Brian Surkan 8th Grade Project The Walker School

Joshua Tree Principle : 

Joshua Tree Principle Knowing the vocabulary Creates awareness of detail Broadens thoughts Gives you power over the objects you can describe

Four Design Principles : 

Four Design Principles Contrast Differences set things apart, draw attention Repetition Consistency creates unity & predictability Alignment Alignment facilitates reading / parsing Proximity The closer things are, the more related they must be

Contrast : 

Contrast

Contrast Example: B&W : 

Contrast Example: B&W Ignore this

Contrast : 

Contrast Differences draw our attention Too many differences numb our attention What can be contrasted? Color (B&W strongest) Font Alignment Proximity Taste Smell Style Attitudes Ideas Age Texture Language

Repetition : 

Repetition Color (Coke’s color? Pepsi’s color? Republican Color?) Location (alignment) Shape (the Coke bottle, human silhouette) Font (consistent headlines, body text, Coca-Cola) Order (page numbers, sequences) Sound (in music or advertisements) Taste (KFC, Big Mac, Wendy’s Frosty) Graphic (logos, leitmotivs, the Geico Gecko)

Repetition : 

Repetition Color (Coke’s color? Pepsi’s color? Republican Color?) Location (alignment) Shape (the Coke bottle, Font (consistent headlines, body text, Coca-Cola) Order (page numbers, sequences) Sound (in music or advertisements) Taste (KFC, Big Mac, Wendy’s Frosty) Graphic (logos, leitmotivs, the Geico Gecko)

Alignment : 

Alignment

Alignment : 

Alignment Organizes / Groups information visually Smooth (often straight) lines Are attractive to the eye Suggest a relationship between aligned objects Alignment exceptions draw our attention Centered headers Exceptions to otherwise traditional alignment Horizontal AND vertical alignment are important Right AND left alignment are STRONG

Alignment : 

Alignment Organizes / Groups information visually Smooth (often straight) lines Are attractive to the eye Suggest a relationship between aligned objects Alignment exceptions draw our attention Centered headers Exceptions to otherwise traditional alignment Horizontal AND vertical alignment are important Right AND left alignment are STRONG

Proximity : 

Proximity

Proximity : 

Proximity Relationships clarified by closeness of members Extremes Too close: claustrophobic Too dispersed: disconnected