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

Adventures in Prototyping

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jen Myers Jen Myers
August 24, 2013
Design
5
660

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
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
650
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
290
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.2k
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
150
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
26k
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
310
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1k
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
140
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
220
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
PRO
0
170
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
310

Featured

See All Featured
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.1k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
140
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
820
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
63
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
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