abba of sketching (cont)web.mit.edu/2.744/www/resourcematerials/classnotes/6_web_101.pdfabba of...

ABBA OF SKETCHING (cont)

2.744 Product Design

2.744 Product Designweb design 101

mini quiz results but first!

will our open world be guided or unguided?

0

10

20

30

40

50

60

70

unguided guided

0

5

10

15

20

25

Be si

mple / e

asy t

o und

erstan

d

belie

vable

/ immers

ive en

viron

ment

Self-R

eset

Have h

igh "w

ow fa

ctor"

Have a

25% w

in rat

e

Use ex

isting

Arch

etype

s

Involv

e man

y mem

bers

phys

ical o

r men

talBe

for a

ges 1

5-35

Be fa

mily fri

endly

Be D

urable

Be su

itable

for 3

-5 pe

ople

Take

2-3 m

inutes

to w

in

Run Au

tonom

ously

Be w

ell do

cumen

ted

Be ea

sily "

score

able"

Have a

clea

r poin

t of c

omple

tion

other

answ

er

mini quiz results but first!

a good show element or gag should _______?make you come back for more!

mini quiz results but first!

the secret to defeat the Aztec gods was______?make them pee their pants

take away their hot chocolate

hide

other

a new mini quiz and finally!

since last class, I have practiced my ABCs on_____ of 5 days?

to drawn a recognizable object from memory we mustrecall its _______, _______, and appropriate_______.

and nowwarm up!

ABCs

not what you know draw what you see

sketching proverbeastern African cave art

~9000 B.P.

rules of perspective projection!

Galleria degli Uffizi, near the "Duomo” (cathedral of Santa Maria del Fiore, dome built by Brunelleschi)

shearing machine for fabrics

learning the rulestypes of perspective

1 point 3 point2 point

learning the rules

commonly used in storyboards

1 point perspective

let’s practice!

cubes in space

let’s practice!

cubes in space

sketching skills axiom #2no chicken scratches

markers!

let’s practice!

cubes in space

let’s get started!

cubes in space

1 point perspective exerciseroman aqua duct

1 point perspective exerciseseated in the 70s

<webdesign101>

have you installed?

A Text Editor - Brackets/SublimeFTP/SFTP Client - Filezilla

how do websites work?

mit.edu 104.97.44.122

clientyou!

serverMIT / Akamai

HTTP Request

HTTP Response

how do websites work?

static dynamic

delivered to the user exactly as stored

server delivers a unique content based on user

2.744 Websitebut more exciting!

Facebook

how do websites work?

mit.edu 104.97.44.122

clientyou!

serverMIT / Akamai

HTTP Request

HTTP Response

what’s in a website?

hypertext markup languagedescribes structure of content

cascading style sheetsdefines the look and feel

javascriptadds interactivity

Chrome: View > Developer ToolsFirefox: Tools > Web Developer > InspectorSafari: Safari > Preferences > Advanced > Show Dev Tools

then Develop > Show Inspector

build & upload a web page!thursday: learning to actually build a website

build & upload a web page!thursday: learning to actually build a website

build & upload a web page!http://web.mit.edu/2.744/studentSubmissions/

web101/ [your kerberos/mit username]

host: sftp://athena.dialup.mit.eduusername/password: your athena username/password

/afs/athena.mit.edu/course/2/2.744/studentSubmissions/web101

ormit/2.744/...etc

it’s your turn!http://web.mit.edu/2.744/studentSubmissions/

web101/ [your kerberos/mit username]

host: sftp://athena.dialup.mit.eduusername/password: your athena username/password

/afs/athena.mit.edu/course/2/2.744/studentSubmissions/web101

ormit/2.744/...etc

what’s next?

2.744 Product Design

for class Thursday, March 1

writing HTML/CSSbuilding your storyboard site

teams!

transparent png for black background, feb. 27

team portfolio

what’s next?

human-use analysisTuesday, Feb. 8 Thursday, March 8

user experience design/storyboard

Thursday, Feb. 22 Tuesday, March 6

web design 101

web design 101