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

UX Bootcamp Prototyping in Code

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Anna Debenham Anna Debenham
September 26, 2011
Technology
5
470

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
2k
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
980
Freelancer Survival Guide
Avatar for Anna Debenham anna
2
570

Other Decks in Technology

See All in Technology
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
110
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
240
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
120
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
Avatar for soudai sone soudai
PRO
12
5.6k
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
Avatar for みのるん minorun365
4
220
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
15
400k
日本の85%が使う公共SaaSは、どう育ったのか
Avatar for たけだ taketakekaho
1
230
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
120
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
2
170
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
Avatar for Serverless Operations slsops
2
260
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
980
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
Avatar for oracle4engineer oracle4engineer
PRO
2
14k

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
440
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
220
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k

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