UX Bootcamp Prototyping in Code

Slides from the UX Prototyping in Code workshop http://lanyrd.com/2011/ux-bootcamp-prototying-in-code/sghbw/

Transcript

1. UX BOOTCAMP Prototyping in Code
2. Planning
3. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
4. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
5. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
6. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
7. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
8. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
11. content sidebar header
12. 100% 64% 34% 2% 100%
13. date
14. primary story
15. secondary stories
16. teriary stories story list
17. All links are blue with no underline
18. Normal text is grey
19. All stories have a bottom border
20. 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
21. Prototyping Tools
22. hackbook.hackasaurus.org
23. lorem2.com
24. Coda Clips
25. Coda Books
26. placehold.it
27. lorempixel
28. placekitten
29. Firebug
30. Firebug
31. Web Developer Toolbar
32. Web Developer Toolbar
33. measureit
34. Colorzilla