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

Adventures in Prototyping

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Jen Myers Jen Myers
August 24, 2013
Design
5
650

Adventures in Prototyping

How To Make Simple, Solid HTML/CSS Prototypes.

Find links to all the tool resources here: https://gist.github.com/jenmyers/6783140

Avatar for Jen Myers

Jen Myers

August 24, 2013
Tweet

More Decks by Jen Myers

See All by Jen Myers
Listen to Your (and All) Mothers
Avatar for Jen Myers jenmyers
0
180
Cartoon Creativity
Avatar for Jen Myers jenmyers
0
240
How To Not Be an Expert
Avatar for Jen Myers jenmyers
1
280
How to Start Coding from Any Level
Avatar for Jen Myers jenmyers
0
260
Shepherding Unicorns
Avatar for Jen Myers jenmyers
2
310
Owning It
Avatar for Jen Myers jenmyers
0
310
Developers Can't Design (2013)
Avatar for Jen Myers jenmyers
6
500
How to Not Be an Expert
Avatar for Jen Myers jenmyers
8
590
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
850

Other Decks in Design

See All in Design
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1.1k
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
410
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
290
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
180
The Spring Festival
Avatar for Jisun jisun
0
190
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
640
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
5
760
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
440
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
230
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
690
Treasure_Hunting
Avatar for Sol Metts solmetts
0
220

Featured

See All Featured
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
61
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
59
42k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
86
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
69
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
440
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
120

Transcript

  1. ADVENTURES IN PROTOTYPING HOW TO MAKE SIMPLE, SOLID HTML/CSS PROTOTYPES

  2. @antiheroine [email protected] jenmyers.net/speaking

  3. ORIGIN STORY

  4. WHY HTML/CSS PROTOTYPES? Fewer design deliverables Less development time Intended

    design implementation Thumbs-up from clients Easier team collaboration Superpowers!

  5. !important

  6. THE PROCESS

  7. PLANNING

  8. None
  9. None

  10. MARKUP

  11. None
  12. None
  13. None
  14. None

  15. STYLING

  16. None
  17. None
  18. None
  19. None

  20. Bootstrap?

  21. BEHAVIOR

  22. COLLABORATION & FEEDBACK

  23. None
  24. None

  25. @antiheroine [email protected] jenmyers.net/speaking

  26. balsamiq.com jekyllrb.com middlemanapp.com html5boilerplate.com initializr.com foundation.zurb.com getbootstrap.com sass-lang.com compass-style.org bourbon.io

    lesscss.org github.com mac.github.com windows.github.com pages.github.com github.com/jenmyers/jekyll-kickoff