Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX Bootcamp Prototyping in Code

4a2968e45944bd53db8026919975422e?s=47 Anna Debenham
September 26, 2011

UX Bootcamp Prototyping in Code

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

4a2968e45944bd53db8026919975422e?s=128

Anna Debenham

September 26, 2011
Tweet

More Decks by Anna Debenham

Other Decks in Technology

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/

  9. None
  10. None
  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