Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rapid and Responsive  UX To Prototype with Bootstrap
What I’m Going to Say• Build things faster and better• Important Words: Responsive,  Prototype, Framework• What is Bootstr...
But first…
I’m Josh Jeffryes•   Lead UI Developer at The College Board•   Mentor at Acceleprise•   Veteran of a few startups•   Advis...
Make Web Stuff RightThe bad old way:  – Requirements  – Go straight to code and design  – End up with something that can’t...
Make Web Stuff RightThe bad old way:  – Requirements  – Go straight to code and design  – End up with something that can’t...
Make Web Stuff RightThe slightly less bad new way:  – Requirements  – Make a really nice wireframe  – Write a lot of code ...
Make Web Stuff RightThe slightly less bad new way:  – Requirements  – Make a really nice wireframe  – Write a lot of code ...
Make Web Stuff RightThe better way:  – Requirements  – Sketch out some loose wireframes  – Create a fast prototype with a ...
Make Web Stuff RightThe better way:  – Requirements  – Sketch out some loose wireframes  – Create a fast prototype with a ...
Make Web Stuff RightIf making a prototype in code is as fast or fasterthan making a wireframe in Illustrator, and getsbett...
Three Important Words     Responsive      Prototype     Framework
What is Responsive?   This is all the same site.
What is Responsive?• Uses CSS3 & JavaScript• One codebase for all devices• Site adapts to the screen
What is Responsive?On a Computer:                On a Phone:            This wireframe is responsive.
What is Responsive?On a Computer:               On a Phone:                 This one is not.
What is a Prototype?
What is a Prototype?• HTML + CSS + JavaScript• Static with fake data• No glitter• Testable
What is a Prototype?   A prototype makes sureyou’re building the right thing,      not the right look.
What is a Framework?
What is a Framework?• Pre-built HTML, CSS, and JS• A structure you can build on• Here are some wheels, stop  reinventing t...
Merge to Form Awesome!Responsive + Prototype +Framework means you canquickly build things with loadsof features that look ...
Merge to Form Awesome!    Quickly as in hours.
Merge to Form Awesome!      Quickly as in hours.      Use them on anything
Twitter Bootstrap
Twitter Bootstrap•   Recently updated to 2.2.1•   Released August 2011•   156kb total minified•   OOCSS structure (DRY CSS...
Twitter Bootstrap•   Navigational tabs, pills, and lists•   Navbar•   Labels•   Badges•   Page headers and hero unit•   Th...
Twitter Bootstrap
Twitter BootstrapA Grid                        Content of some kind here           This is the main area                  ...
Twitter BootstrapA Carousel<div id="myCarousel" class="carousel slide">  <div class="carousel-inner">    <div class="activ...
Twitter BootstrapJust plug the HTML together.
Recap• Go from sketch to interactive prototype• Responsive: adapts to any device• It’s easy and crazy fast
Recap•   Go from sketch to interactive prototype•   Responsive: adapts to any device•   It’s easy and crazy fast•   My tea...
A Startling Revelation
A Startling RevelationWhen your prototype is done,  you don’t throw it away
A Startling Revelation    It’s your site.
That’s All, Folks  Thank You, Here are Some Links• http://twitter.github.com/bootstrap/• http://fortawesome.github.com/Fon...
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Upcoming SlideShare
Loading in …5
×

Rapid and Responsive - UX to Prototype with Bootstrap

11,006 views

Published on

Build for web and mobile faster by going straight from concept to prototype using Twitter Bootstrap.

Published in: Technology, Design

Rapid and Responsive - UX to Prototype with Bootstrap

  1. 1. Rapid and Responsive UX To Prototype with Bootstrap
  2. 2. What I’m Going to Say• Build things faster and better• Important Words: Responsive, Prototype, Framework• What is Bootstrap• A startling revelation
  3. 3. But first…
  4. 4. I’m Josh Jeffryes• Lead UI Developer at The College Board• Mentor at Acceleprise• Veteran of a few startups• Advise various startups on UX & UI• I will help you, just ask
  5. 5. Make Web Stuff RightThe bad old way: – Requirements – Go straight to code and design – End up with something that can’t match the magical unicorn they originally wanted
  6. 6. Make Web Stuff RightThe bad old way: – Requirements – Go straight to code and design – End up with something that can’t match the magical unicorn they originally wanted
  7. 7. Make Web Stuff RightThe slightly less bad new way: – Requirements – Make a really nice wireframe – Write a lot of code – Descend into development hell because a static wireframe is nothing like the site you build from it
  8. 8. Make Web Stuff RightThe slightly less bad new way: – Requirements – Make a really nice wireframe – Write a lot of code – Descend into development hell because a static wireframe is nothing like the site you build from it
  9. 9. Make Web Stuff RightThe better way: – Requirements – Sketch out some loose wireframes – Create a fast prototype with a little code – Iterate the small pile of code until right – Write a lot of code – End product matches the prototype, everyone is happy
  10. 10. Make Web Stuff RightThe better way: – Requirements – Sketch out some loose wireframes – Create a fast prototype with a little code – Iterate the small pile of code until right – Write a lot of code – End product matches the prototype, everyone is happy
  11. 11. Make Web Stuff RightIf making a prototype in code is as fast or fasterthan making a wireframe in Illustrator, and getsbetter results, why wouldn’t you?
  12. 12. Three Important Words Responsive Prototype Framework
  13. 13. What is Responsive? This is all the same site.
  14. 14. What is Responsive?• Uses CSS3 & JavaScript• One codebase for all devices• Site adapts to the screen
  15. 15. What is Responsive?On a Computer: On a Phone: This wireframe is responsive.
  16. 16. What is Responsive?On a Computer: On a Phone: This one is not.
  17. 17. What is a Prototype?
  18. 18. What is a Prototype?• HTML + CSS + JavaScript• Static with fake data• No glitter• Testable
  19. 19. What is a Prototype? A prototype makes sureyou’re building the right thing, not the right look.
  20. 20. What is a Framework?
  21. 21. What is a Framework?• Pre-built HTML, CSS, and JS• A structure you can build on• Here are some wheels, stop reinventing them
  22. 22. Merge to Form Awesome!Responsive + Prototype +Framework means you canquickly build things with loadsof features that look nice andwork well on any device
  23. 23. Merge to Form Awesome! Quickly as in hours.
  24. 24. Merge to Form Awesome! Quickly as in hours. Use them on anything
  25. 25. Twitter Bootstrap
  26. 26. Twitter Bootstrap• Recently updated to 2.2.1• Released August 2011• 156kb total minified• OOCSS structure (DRY CSS)• Many included Components• Uses LESS• You don’t have to
  27. 27. Twitter Bootstrap• Navigational tabs, pills, and lists• Navbar• Labels• Badges• Page headers and hero unit• Thumbnails• Alerts• Progress bars• Modals• Dropdowns• Tooltips• Popovers• Accordion• Carousel• Typeahead
  28. 28. Twitter Bootstrap
  29. 29. Twitter BootstrapA Grid Content of some kind here This is the main area Sidebar<div class=“row”> <div class=“span9”> Content of some kind here <div class=“row”> <div class=“span6”>This is the main area</div> <div class=“span3”>Sidebar</div> </div> </div></div>
  30. 30. Twitter BootstrapA Carousel<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a></div>$(.carousel).carousel();
  31. 31. Twitter BootstrapJust plug the HTML together.
  32. 32. Recap• Go from sketch to interactive prototype• Responsive: adapts to any device• It’s easy and crazy fast
  33. 33. Recap• Go from sketch to interactive prototype• Responsive: adapts to any device• It’s easy and crazy fast• My team is 2 months ahead now
  34. 34. A Startling Revelation
  35. 35. A Startling RevelationWhen your prototype is done, you don’t throw it away
  36. 36. A Startling Revelation It’s your site.
  37. 37. That’s All, Folks Thank You, Here are Some Links• http://twitter.github.com/bootstrap/• http://fortawesome.github.com/Font-Awesome/• http://exacttarget.github.com/fuelux/• jjeffryes@gmail.com or @jjeffryes on Twitter

×