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

UX Bootcamp Prototyping in Code

Anna Debenham
September 26, 2011
Technology
5
440

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
5
1.7k
Style Guides, Pattern Libraries and Code Standards
anna
3
2.1k
UX Bootcamp Code Fitness
anna
3
710
The Digital Native
anna
6
940
Freelancer Survival Guide
anna
2
550

Other Decks in Technology

See All in Technology
ドメイン名の終活について - JPAAWG 7th -
mikit
31
17k
mikroBus HAT を用いた簡易ベアメタル開発
tarotene
0
270
信頼性に挑む中で拡張できる・得られる１人のスキルセットとは？
ken5scal
1
400
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
1
260
プロポーザルのつくり方
〜個人技編〜 / How to come up with proposals
ohbarye
4
310
Terraform Stacks入門 #HashiTalks
msato
0
230
10分でわかるfreeeのQA
freee
1
3.5k
ジョブマッチングサービスにおける相互推薦システムの応用事例と課題
hakubishin3
3
620
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
1
180
これまでの計測・開発・デプロイ方法全部見せます！ / Findy ISUCON 2024-11-14
tohutohu
3
250
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
470
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k

Featured

See All Featured
The Cult of Friendly URLs
andyhume
78
6k
Writing Fast Ruby
sferik
627
61k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Code Review Best Practice
trishagee
64
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The World Runs on Bad Software
bkeepers
PRO
65
11k
We Have a Design System, Now What?
morganepeng
50
7.2k
Ruby is Unlike a Banana
tanoku
96
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k

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