Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

UX Bootcamp Prototyping in Code

Avatar for Anna Debenham Anna Debenham
September 26, 2011
Technology
5
460

UX Bootcamp Prototyping in Code

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

Avatar for Anna Debenham

Anna Debenham

September 26, 2011
Tweet

More Decks by Anna Debenham

See All by Anna Debenham
What We Can Learn From Game Console Browsers
Avatar for Anna Debenham anna
5
1.9k
Style Guides, Pattern Libraries and Code Standards
Avatar for Anna Debenham anna
3
2.2k
UX Bootcamp Code Fitness
Avatar for Anna Debenham anna
3
770
The Digital Native
Avatar for Anna Debenham anna
6
970
Freelancer Survival Guide
Avatar for Anna Debenham anna
2
560

Other Decks in Technology

See All in Technology
こがヘンだよ！Snowflake?サービス名称へのこだわり
Avatar for タロウ tarotaro0129
0
110
freeeにおけるファンクションを超えた一気通貫でのAI活用
Avatar for jaxx2104 jaxx2104
3
490
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.3k
IPv6-mostly field report from RubyKaigi 2026
Avatar for Sorah Fukumori sorah
0
250
段階的に進める、 挫折しない自宅サーバ入門
Avatar for yut yu_kod
5
2.2k
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
980
進化の早すぎる生成 AI と向き合う
Avatar for SatohJohn satohjohn
0
500
Databricksによるエージェント構築
Avatar for Takaaki Yayoi taka_aki
1
110
How native lazy objects will change Doctrine and Symfony forever
Avatar for Benjamin Eberlei beberlei
1
360
Modern Data Stack大好きマンが語るSnowflakeの魅力
Avatar for Sagara sagara
0
260
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
経営から紐解くデータマネジメント
Avatar for Jun Ernesto Okumura pacocat
9
1.9k

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
30
5.7k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
119
20k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
980

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