Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... ·...

Interface Aesthetics 03/16/07

Interface Aesthetics Week 6 Layout


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


Course exhibitionMay 7, 2007

4-6pm 110 South Hall Open to public

INTRODUCTION


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


Select your trackINTERFACE AESTHETICS COURSE EXHIBITION

Tangible Media Ambient Media Augmented Reality


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.



Create a posterCreate an accompanying poster that explains and illustrates the idea in a visually compelling way.




1. Poster2. Artifact


LayoutINTRODUCTION


LayoutTypographic composition

INTRODUCTION


Typographic compositionReading, like walking, involves navigation. Needs basic landmarks and clues.

LAYOUT

[Bringhurst, 2002]


Breaking the samenessGive the reader a sense of direction, and the page a sense of liveliness and poise.[Bringhurst, 2002]

LAYOUT


New balanceA visual chord that generates both energy and harmony in the page.[Bringhurst, 2002]

LAYOUT


Micro and macro viewsSeeing the whole and its parts.

LAYOUT


Developing hierarchy


Help a viewer understand information through a logical and meaningful journey

TYPOGRAHPIC HIERARCHY


Order and level of importanceEstablish the visual levels of dominance and subordination

TYPOGRAHPIC HIERARCHY


Typographic hierarchy


Typographic hierarchySpace and position


typographic work


Typographic hierarchyGrouping


Typographic hierarchyScale


Typographic hierarchyTypographic color

Interface Aesthetics 03/16/07from Samara, “Typography Workbook”


Typographic hierarchyTypographic space

Interface Aesthetics 03/16/07from Elam, “Grid System: Principles of Organizing Type”


Typographic hierarchyPositive and negative space

Interface Aesthetics 03/16/07adapted from Elam, “Grid System: Principles of Organizing Type”


Typographic hierarchyOrientation


Typographic hierarchyDepth, dimension, and perspective


Typographic hierarchyPoint, line, and plane


T Y P O

T

Y

P

O


Typographic hierarchyContrast


http://www.youtube.com/watch?v=CEmZuieb7TM


Grid


GridA neutral spatial field of regularity that permits accessibility.

LAYOUT


GridTo order and unify the compositional space.

LAYOUT


Markers

Modules

Columns

Spatial zones

Flowlines

Margins

from Samara, ““Making and Breaking the Grid””


GridColumns


GridLeading


GridManuscript grid


GridColumn grid


GridModular grid


GridClarity, efficiency, economy, and continuity

LAYOUT


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]


Breaking the grid


GridThe designer uses, adapts, breaks, and abandons grids for the benefit of the design.

LAYOUT


Breaking the gridLinguistic deconstruction


Integrating type and image


Type as image

Interface Aesthetics 03/16/07ISO50 s.hansen


In-class exercise


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)



ColorNEXT WEEK


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.


Thanks!INTERFACE AESTHETICS

Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... ·...

Documents

Transcript of Interface Aesthetics Week 6 Layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... ·...