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

UX Bootcamp Prototyping in Code

Anna Debenham
September 26, 2011
Technology
5
420

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

See All by Anna Debenham
What We Can Learn From Game Console Browsers
anna
4
1.3k
Style Guides, Pattern Libraries and Code Standards
anna
3
1.8k
UX Bootcamp Code Fitness
anna
3
670
The Digital Native
anna
6
840
Freelancer Survival Guide
anna
1
500

Other Decks in Technology

See All in Technology
dbtでデータ品質活動
foursue
5
1.1k
Product Minded Software Engineers: Understanding the Product with a code-first approach
cembasaranoglu
0
200
S3からBigQueryへ閉域ネットワーク経由でデータ転送する方法
sbtechnight
PRO
0
300
OCI Cloud Native 2023
oracle4engineer
PRO
0
130
Oracle Database backup and recovery
oracle4engineer
PRO
0
120
Finally_I_can_kichijojipm32
kaznishi
0
130
電子辞書で学ぶ Linux のサスペンド
puhitaku
0
190
MSPサービスを支えるIaCのこれまでとこれから
sbtechnight
PRO
0
320
6G／テラヘルツの取り組み
sbtechnight
PRO
0
380
私達のチームのデプロイ戦略の軌跡 〜継続的デプロイの導入に至るまで〜
hamakou108
0
130
ワイヤレス電力伝送について
sbtechnight
PRO
0
360
アフリカの通信・教育問題をNTN×Edtechで解決！
sbtechnight
PRO
0
300

Featured

See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Three Pipe Problems
jasonvnalue
89
9k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Git: the NoSQL Database
bkeepers
PRO
419
60k
Infographics Made Easy
chrislema
236
17k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
176
9.2k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
The Mythical Team-Month
searls
210
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k

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