Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... ·...
Transcript of Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... ·...
![Page 1: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/1.jpg)
Interface Aesthetics 03/16/07
Interface Aesthetics Week 6 Layout
![Page 2: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/2.jpg)
Interface Aesthetics 03/16/07
Course scheduleINTERFACE AESTHETICS
Intr
oduc
tion
Tang
ible
med
iaAm
bien
t med
iaAu
gmen
ted
real
ityTy
pogr
aphy
/ Ic
onog
raph
y
Layo
ut
Col
or
Synt
hesi
s
Exhi
bitio
n
Beyond screen Graphic design basics
3/05 3/12 3/19 4/02 4/09 4/16 4/23 4/25 5/07
![Page 3: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/3.jpg)
Interface Aesthetics 03/16/07
![Page 4: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/4.jpg)
Interface Aesthetics 03/16/07
Course exhibitionMay 7, 2007
4-6pm 110 South Hall Open to public
INTRODUCTION
![Page 5: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/5.jpg)
Interface Aesthetics 03/16/07
Final project
groupsBLUMENSTOCK, JOSHUA EVANOTTO, OWENOEHLBERG, LORA
DAILEY, ALEXANDERCHENG, DEBBIEAGRIN, NATHAN
SIMS, CHRISTOPHER O.BUI, PHONG DAIPPERSPACH, RYAN A
EARP, MATTHEW EVANTAM, IVANKAPLUN, VLAD
FERRARIO, MARIANOYU, GERALDPERKEL, DAN
JOSLING, JOHN MLIM, KEVIN MATEOEUN KYOUNG CHOE
MCVEIGH-SCHULTZ, JOSHUA R.LINDHOLM, KATRINAWONG, JOANNE FAYE
INTERFACE AESTHETICS COURSE EXHIBITION
![Page 6: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/6.jpg)
Interface Aesthetics 03/16/07
Select your trackINTERFACE AESTHETICS COURSE EXHIBITION
Tangible Media Ambient Media Augmented Reality
![Page 7: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/7.jpg)
Interface Aesthetics 03/16/07
Create a low fidelity mockupApply it to a topic of your research interest (e.g., tools for communication, learning/education, information visualization, etc.). Create a “mockup”
with paper, clay,
styrofoam
(or any other material) that embodies your original idea, concept, or design. Do not worry about the technical implementation, but be prepared to discuss “to whom, for what, how, and why”
your
design matters.
INTERFACE AESTHETICS COURSE EXHIBITION
![Page 8: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/8.jpg)
Interface Aesthetics 03/16/07
Create a posterCreate an accompanying poster that explains and illustrates the idea in a visually compelling way.
INTERFACE AESTHETICS COURSE EXHIBITION
![Page 9: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/9.jpg)
Interface Aesthetics 03/16/07
INTERFACE AESTHETICS COURSE EXHIBITION
![Page 10: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/10.jpg)
Interface Aesthetics 03/16/07
INTERFACE AESTHETICS COURSE EXHIBITION
1. Poster2. Artifact
![Page 11: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/11.jpg)
Interface Aesthetics 03/16/07
LayoutINTRODUCTION
![Page 12: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/12.jpg)
Interface Aesthetics 03/16/07
LayoutTypographic composition
INTRODUCTION
![Page 13: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/13.jpg)
Interface Aesthetics 03/16/07
Typographic compositionReading, like walking, involves navigation. Needs basic landmarks and clues.
LAYOUT
[Bringhurst, 2002]
![Page 14: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/14.jpg)
Interface Aesthetics 03/16/07
Breaking the samenessGive the reader a sense of direction, and the page a sense of liveliness and poise.[Bringhurst, 2002]
LAYOUT
![Page 15: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/15.jpg)
Interface Aesthetics 03/16/07
New balanceA visual chord that generates both energy and harmony in the page.[Bringhurst, 2002]
LAYOUT
![Page 16: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/16.jpg)
Interface Aesthetics 03/16/07
Micro and macro viewsSeeing the whole and its parts.
LAYOUT
![Page 17: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/17.jpg)
Interface Aesthetics 03/16/07
Developing hierarchy
![Page 18: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/18.jpg)
Interface Aesthetics 03/16/07
Help a viewer understand information through a logical and meaningful journey
TYPOGRAHPIC HIERARCHY
![Page 19: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/19.jpg)
Interface Aesthetics 03/16/07
Order and level of importanceEstablish the visual levels of dominance and subordination
TYPOGRAHPIC HIERARCHY
![Page 20: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/20.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchy
![Page 21: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/21.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchySpace and position
![Page 22: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/22.jpg)
Interface Aesthetics 03/16/07
typographic work
![Page 23: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/23.jpg)
Interface Aesthetics 03/16/07
typographic work
![Page 24: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/24.jpg)
Interface Aesthetics 03/16/07
typographic work
![Page 25: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/25.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyGrouping
![Page 26: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/26.jpg)
Interface Aesthetics 03/16/07
![Page 27: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/27.jpg)
Interface Aesthetics 03/16/07
![Page 28: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/28.jpg)
Interface Aesthetics 03/16/07
![Page 29: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/29.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyScale
![Page 30: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/30.jpg)
Interface Aesthetics 03/16/07
![Page 31: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/31.jpg)
Interface Aesthetics 03/16/07
![Page 32: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/32.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyTypographic color
![Page 33: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/33.jpg)
Interface Aesthetics 03/16/07from Samara, “Typography Workbook”
![Page 34: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/34.jpg)
Interface Aesthetics 03/16/07from Samara, “Typography Workbook”
![Page 35: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/35.jpg)
Interface Aesthetics 03/16/07
![Page 36: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/36.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyTypographic space
![Page 37: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/37.jpg)
Interface Aesthetics 03/16/07from Elam, “Grid System: Principles of Organizing Type”
![Page 38: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/38.jpg)
Interface Aesthetics 03/16/07from Elam, “Grid System: Principles of Organizing Type”
![Page 39: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/39.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyPositive and negative space
![Page 40: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/40.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 41: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/41.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 42: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/42.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 43: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/43.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 44: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/44.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyOrientation
![Page 45: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/45.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 46: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/46.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 47: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/47.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 48: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/48.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 49: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/49.jpg)
Interface Aesthetics 03/16/07
![Page 50: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/50.jpg)
Interface Aesthetics 03/16/07
![Page 51: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/51.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyDepth, dimension, and perspective
![Page 52: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/52.jpg)
Interface Aesthetics 03/16/07
![Page 53: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/53.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyPoint, line, and plane
![Page 54: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/54.jpg)
Interface Aesthetics 03/16/07
T Y P O
T
Y
P
O
![Page 55: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/55.jpg)
Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”
![Page 56: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/56.jpg)
Interface Aesthetics 03/16/07
![Page 57: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/57.jpg)
Interface Aesthetics 03/16/07
![Page 58: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/58.jpg)
Interface Aesthetics 03/16/07
![Page 59: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/59.jpg)
Interface Aesthetics 03/16/07
![Page 60: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/60.jpg)
Interface Aesthetics 03/16/07
![Page 61: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/61.jpg)
Interface Aesthetics 03/16/07
Typographic hierarchyContrast
![Page 62: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/62.jpg)
Interface Aesthetics 03/16/07
http://www.youtube.com/watch?v=CEmZuieb7TM
![Page 63: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/63.jpg)
Interface Aesthetics 03/16/07
Grid
![Page 64: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/64.jpg)
Interface Aesthetics 03/16/07
Grid
![Page 65: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/65.jpg)
Interface Aesthetics 03/16/07
GridA neutral spatial field of regularity that permits accessibility.
LAYOUT
![Page 66: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/66.jpg)
Interface Aesthetics 03/16/07
GridTo order and unify the compositional space.
LAYOUT
![Page 67: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/67.jpg)
Interface Aesthetics 03/16/07
Markers
Modules
Columns
Spatial zones
Flowlines
Margins
from Samara, ““Making and Breaking the Grid””
![Page 68: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/68.jpg)
Interface Aesthetics 03/16/07
GridColumns
![Page 69: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/69.jpg)
Interface Aesthetics 03/16/07
![Page 70: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/70.jpg)
Interface Aesthetics 03/16/07
GridLeading
![Page 71: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/71.jpg)
Interface Aesthetics 03/16/07
![Page 72: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/72.jpg)
Interface Aesthetics 03/16/07
![Page 73: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/73.jpg)
Interface Aesthetics 03/16/07
GridManuscript grid
![Page 74: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/74.jpg)
Interface Aesthetics 03/16/07
![Page 75: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/75.jpg)
Interface Aesthetics 03/16/07
![Page 76: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/76.jpg)
Interface Aesthetics 03/16/07
GridColumn grid
![Page 77: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/77.jpg)
Interface Aesthetics 03/16/07
![Page 78: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/78.jpg)
Interface Aesthetics 03/16/07
![Page 79: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/79.jpg)
Interface Aesthetics 03/16/07
GridModular grid
![Page 80: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/80.jpg)
Interface Aesthetics 03/16/07
![Page 81: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/81.jpg)
Interface Aesthetics 03/16/07
![Page 82: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/82.jpg)
Interface Aesthetics 03/16/07
![Page 83: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/83.jpg)
Interface Aesthetics 03/16/07
GridClarity, efficiency, economy, and continuity
LAYOUT
![Page 84: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/84.jpg)
Interface Aesthetics 03/16/07
GridEffective grid is not a rigid formula but a flexible and resilient structure, a skeleton that moves in concert with the muscular mass of information.
LAYOUT
[Lupton, 2004]
![Page 85: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/85.jpg)
Interface Aesthetics 03/16/07
Breaking the grid
![Page 86: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/86.jpg)
Interface Aesthetics 03/16/07
GridThe designer uses, adapts, breaks, and abandons grids for the benefit of the design.
LAYOUT
![Page 87: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/87.jpg)
Interface Aesthetics 03/16/07
![Page 88: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/88.jpg)
Interface Aesthetics 03/16/07
Breaking the gridLinguistic deconstruction
![Page 89: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/89.jpg)
Interface Aesthetics 03/16/07
![Page 90: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/90.jpg)
Interface Aesthetics 03/16/07
![Page 91: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/91.jpg)
Interface Aesthetics 03/16/07
![Page 92: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/92.jpg)
Interface Aesthetics 03/16/07
Integrating type and image
![Page 93: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/93.jpg)
Interface Aesthetics 03/16/07
![Page 94: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/94.jpg)
Interface Aesthetics 03/16/07
![Page 95: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/95.jpg)
Interface Aesthetics 03/16/07
![Page 96: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/96.jpg)
Interface Aesthetics 03/16/07
![Page 97: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/97.jpg)
Interface Aesthetics 03/16/07
Type as image
![Page 98: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/98.jpg)
Interface Aesthetics 03/16/07
![Page 99: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/99.jpg)
Interface Aesthetics 03/16/07
![Page 100: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/100.jpg)
Interface Aesthetics 03/16/07ISO50 s.hansen
![Page 101: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/101.jpg)
Interface Aesthetics 03/16/07
In-class exercise
![Page 102: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/102.jpg)
Interface Aesthetics 03/16/07
Design a posterYour poster will have:
1.
Title of your project (e.g., Interactive Video Projection Wall)
2.
Names of your team members (e.g., Homer Simpson, Marge Simpson, Bart Simpson)
3.
Title of the course (Interface Aesthetics, INFO290-20 or CNM290-02)
4.
Place and time of the course exhibition (110 South Hall, 4pm, May 7 2007)
5.
Project description (up to 3 paragraphs, use lipsum.com)
6.
Project photo / illustration (any scale)
INTERFACE AESTHETICS COURSE EXHIBITION
![Page 103: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/103.jpg)
Interface Aesthetics 03/16/07
![Page 104: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/104.jpg)
Interface Aesthetics 03/16/07
ColorNEXT WEEK
![Page 105: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/105.jpg)
Interface Aesthetics 03/16/07
HomeworkNEXT WEEK
Identify a palette of 3-5 colors that expresses your sense of color harmony. The color palette may be derived from your favorite art, design, movies, etc. Post your color palette on the course website.
![Page 106: Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... · 2007-04-20 · Interface Aesthetics 03/16/07 Help a viewer understand information through](https://reader034.fdocuments.us/reader034/viewer/2022050311/5f73b5e4d93cd665477528b4/html5/thumbnails/106.jpg)
Interface Aesthetics 03/16/07
Thanks!INTERFACE AESTHETICS