Slide 1

Slide 1 text

UX BOOTCAMP Prototyping in Code

Slide 2

Slide 2 text

Planning

Slide 3

Slide 3 text

by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/

Slide 4

Slide 4 text

by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/

Slide 5

Slide 5 text

by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/

Slide 6

Slide 6 text

by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/

Slide 7

Slide 7 text

by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/

Slide 8

Slide 8 text

by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

content sidebar header

Slide 12

Slide 12 text

100% 64% 34% 2% 100%

Slide 13

Slide 13 text

date

Slide 14

Slide 14 text

primary story

Slide 15

Slide 15 text

secondary stories

Slide 16

Slide 16 text

teriary stories story list

Slide 17

Slide 17 text

All links are blue with no underline

Slide 18

Slide 18 text

Normal text is grey

Slide 19

Slide 19 text

All stories have a bottom border

Slide 20

Slide 20 text

Deconstruct the screenshots of websites • identify the blocks and label them • give the blocks widths • identify the default styles • make a list of the colors and typefaces used

Slide 21

Slide 21 text

Prototyping Tools

Slide 22

Slide 22 text

hackbook.hackasaurus.org

Slide 23

Slide 23 text

lorem2.com

Slide 24

Slide 24 text

Coda Clips

Slide 25

Slide 25 text

Coda Books

Slide 26

Slide 26 text

placehold.it

Slide 27

Slide 27 text

lorempixel

Slide 28

Slide 28 text

placekitten

Slide 29

Slide 29 text

Firebug

Slide 30

Slide 30 text

Firebug

Slide 31

Slide 31 text

Web Developer Toolbar

Slide 32

Slide 32 text

Web Developer Toolbar

Slide 33

Slide 33 text

measureit

Slide 34

Slide 34 text

Colorzilla