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

UX Bootcamp Prototyping in Code

Anna Debenham
September 26, 2011
Technology
5
430

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.9k
UX Bootcamp Code Fitness
anna
3
680
The Digital Native
anna
6
860
Freelancer Survival Guide
anna
1
510

Other Decks in Technology

See All in Technology
SRE成熟度評価におけるポストモーテムLv.3ガイドライン
shotatsuge
7
1.2k
四国クラウドお遍路_AWSアップデート2023
tsujiba
0
220
dojo230914
mitsuakitohei
1
200
リスキリングの特効薬！「技術コミュニティ」のススメ
mamohacy
1
630
クラウドだからできた 地方主導のJAWS DevOps
matsuihidetoshi
2
170
レイヤードアーキテクチャにおける 例外との向き合い方
yukihiromori
0
1.3k
Boot verification in Android
prashantspol
0
210
製造業が強い愛知から始まったチーム作り8年の旅路とその現場から見えたこと
nktamago
0
230
Learning from performance improvements on GraphQL Ruby
mtsmfm
1
340
Goで実装された高速な
仮想待合室サーバの実装と詳解
pyama86
13
5.5k
【初心者向け】まだ間に合う！ Hugging Face入門 -TransformersでAI推論&学習
tkhresk
3
610
LOWYAビジネスダッシュボード：DevとBizの共通認識が切り拓く未来
kazumax55
0
110

Featured

See All Featured
Teambox: Starting and Learning
jrom
125
8.1k
Music & Morning Musume
bryan
37
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
349
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
4 Signs Your Business is Dying
shpigford
172
21k
Building a Scalable Design System with Sketch
lauravandoore
453
31k
Building Adaptive Systems
keathley
29
1.6k
Facilitating Awesome Meetings
lara
37
5.1k
A Tale of Four Properties
chriscoyier
150
21k
Bash Introduction
62gerente
603
210k
The Art of Programming - Codeland 2020
erikaheidi
39
12k

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