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

UX Bootcamp Prototyping in Code

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/

Anna Debenham

September 26, 2011
Tweet

More Decks by Anna Debenham

Other Decks in Technology

Transcript

  1. UX BOOTCAMP
    Prototyping in Code

    View Slide

  2. Planning

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. View Slide

  10. View Slide

  11. content sidebar
    header

    View Slide

  12. 100%
    64% 34%
    2%
    100%

    View Slide

  13. date

    View Slide

  14. primary story

    View Slide

  15. secondary stories

    View Slide

  16. teriary stories story list

    View Slide

  17. All links are blue with
    no underline

    View Slide

  18. Normal text is grey

    View Slide

  19. All stories have a
    bottom border

    View Slide

  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

    View Slide

  21. Prototyping Tools

    View Slide

  22. hackbook.hackasaurus.org

    View Slide

  23. lorem2.com

    View Slide

  24. Coda Clips

    View Slide

  25. Coda Books

    View Slide

  26. placehold.it

    View Slide

  27. lorempixel

    View Slide

  28. placekitten

    View Slide

  29. Firebug

    View Slide

  30. Firebug

    View Slide

  31. Web Developer Toolbar

    View Slide

  32. Web Developer Toolbar

    View Slide

  33. measureit

    View Slide

  34. Colorzilla

    View Slide