interface aesthetics week 6 layoutcourses.ischool.berkeley.edu/i290-20/s07/slides/... ·...

Interface Aesthetics 03/16/07

Interface Aesthetics Week 6 Layout

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

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Course exhibitionMay 7, 2007

4-6pm 110 South Hall Open to public

INTRODUCTION

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

Interface Aesthetics 03/16/07

Select your trackINTERFACE AESTHETICS COURSE EXHIBITION

Tangible Media Ambient Media Augmented Reality

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

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

Interface Aesthetics 03/16/07

INTERFACE AESTHETICS COURSE EXHIBITION

Interface Aesthetics 03/16/07

INTERFACE AESTHETICS COURSE EXHIBITION

1. Poster2. Artifact

Interface Aesthetics 03/16/07

LayoutINTRODUCTION

Interface Aesthetics 03/16/07

LayoutTypographic composition

INTRODUCTION

Interface Aesthetics 03/16/07

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

LAYOUT

[Bringhurst, 2002]

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

Interface Aesthetics 03/16/07

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

LAYOUT

Interface Aesthetics 03/16/07

Micro and macro viewsSeeing the whole and its parts.

LAYOUT

Interface Aesthetics 03/16/07

Developing hierarchy

Interface Aesthetics 03/16/07

Help a viewer understand information through a logical and meaningful journey

TYPOGRAHPIC HIERARCHY

Interface Aesthetics 03/16/07

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

TYPOGRAHPIC HIERARCHY

Interface Aesthetics 03/16/07

Typographic hierarchy

Interface Aesthetics 03/16/07

Typographic hierarchySpace and position

Interface Aesthetics 03/16/07

typographic work

Interface Aesthetics 03/16/07

typographic work

Interface Aesthetics 03/16/07

typographic work

Interface Aesthetics 03/16/07

Typographic hierarchyGrouping

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Typographic hierarchyScale

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Typographic hierarchyTypographic color

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

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

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Typographic hierarchyTypographic space

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

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

Interface Aesthetics 03/16/07

Typographic hierarchyPositive and negative space

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

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

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

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

Interface Aesthetics 03/16/07

Typographic hierarchyOrientation

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

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

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

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

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Typographic hierarchyDepth, dimension, and perspective

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Typographic hierarchyPoint, line, and plane

Interface Aesthetics 03/16/07

T Y P O

T

Y

P

O

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

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Typographic hierarchyContrast

Interface Aesthetics 03/16/07

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

Interface Aesthetics 03/16/07

Grid

Interface Aesthetics 03/16/07

Grid

Interface Aesthetics 03/16/07

GridA neutral spatial field of regularity that permits accessibility.

LAYOUT

Interface Aesthetics 03/16/07

GridTo order and unify the compositional space.

LAYOUT

Interface Aesthetics 03/16/07

Markers

Modules

Columns

Spatial zones

Flowlines

Margins

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

Interface Aesthetics 03/16/07

GridColumns

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

GridLeading

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

GridManuscript grid

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

GridColumn grid

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

GridModular grid

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

GridClarity, efficiency, economy, and continuity

LAYOUT

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]

Interface Aesthetics 03/16/07

Breaking the grid

Interface Aesthetics 03/16/07

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

LAYOUT

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Breaking the gridLinguistic deconstruction

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Integrating type and image

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Type as image

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07ISO50 s.hansen

Interface Aesthetics 03/16/07

In-class exercise

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

Interface Aesthetics 03/16/07

Interface Aesthetics 03/16/07

ColorNEXT WEEK

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.

Interface Aesthetics 03/16/07

Thanks!INTERFACE AESTHETICS