Rapid and Responsive - UX to Prototype with Bootstrap
28 likes9,543 views
The document discusses how to rapidly prototype user interfaces using Bootstrap, a popular front-end framework. It outlines the benefits of prototyping with Bootstrap over traditional wireframing or jumping straight to development. Prototyping with Bootstrap allows building interactive prototypes quickly in hours using responsive design principles. The prototypes can then be used as the basis for the final site design rather than being discarded. The document introduces key concepts like responsive design, prototyping, and frameworks. It also provides an overview of features in Bootstrap like grids, components, and how they can be combined for prototyping.
Rapid and Responsive - UX to Prototype with Bootstrap
- 1. Rapid and Responsive UX To Prototype with Bootstrap
- 2. What I’m Going to Say • Build things faster and better • Important Words: Responsive, Prototype, Framework • What is Bootstrap • A startling revelation
- 3. But first…
- 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. Make Web Stuff Right The 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. Make Web Stuff Right The 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. Make Web Stuff Right The 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. Make Web Stuff Right The 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
- 11. Make Web Stuff Right The 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
- 12. Make Web Stuff Right The 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
- 13. Make Web Stuff Right If making a prototype in code is as fast or faster than making a wireframe in Illustrator, and gets better results, why wouldn’t you?
- 14. Three Important Words Responsive Prototype Framework
- 15. What is Responsive? This is all the same site.
- 16. What is Responsive? • Uses CSS3 & JavaScript • One codebase for all devices • Site adapts to the screen
- 17. What is Responsive? On a Computer: On a Phone: This wireframe is responsive.
- 18. What is Responsive? On a Computer: On a Phone: This one is not.
- 19. What is a Prototype?
- 20. What is a Prototype? • HTML + CSS + JavaScript • Static with fake data • No glitter • Testable
- 21. What is a Prototype? A prototype makes sure you’re building the right thing, not the right look.
- 22. What is a Framework?
- 23. What is a Framework? • Pre-built HTML, CSS, and JS • A structure you can build on • Here are some wheels, stop reinventing them
- 24. Merge to Form Awesome! Responsive + Prototype + Framework means you can quickly build things with loads of features that look nice and work well on any device
- 25. Merge to Form Awesome! Quickly as in hours.
- 26. Merge to Form Awesome! Quickly as in hours. Use them on anything
- 28. 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
- 29. 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
- 31. Twitter Bootstrap A 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>
- 32. Twitter Bootstrap A 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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> $('.carousel').carousel();
- 33. Twitter Bootstrap Just plug the HTML together.
- 34. Recap • Go from sketch to interactive prototype • Responsive: adapts to any device • It’s easy and crazy fast
- 35. 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
- 37. A Startling Revelation When your prototype is done, you don’t throw it away
- 38. A Startling Revelation It’s your site.
- 39. 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
Editor's Notes
- #7: You can never build something that matches an abstract concept in someone else’s mind. A specific real thing will always be different than an unspecific imaginary thing.
- #9: The very looseness that is the main benefit of a static wireframe is its greatest flaw. You’ll end up with each person filling in the blanks with their own ideas, but not communicating them, ending up in endless revisions that try to match the non-defined and ever changing ideas in everyone’s heads.
- #11: Seriously. I got this process as close to working right as I think you can get it, and it was still full of unnecessary pain.
- #13: The goal is to do as little work as possible to create something as close to reality as possible. By making a live, working user flow in code, with interactions very close to the real thing, you enable everyone to understand the same specifics.
- #14: Don’t do things slower and less effectively just because you’re used to being slow and ineffective.
- #16: http://www.starbucks.com/ You can see it work by changing the size of your browser window. Other examples: http://css-tricks.com/http://www.fork-cms.com/http://lanyrd.com/To test, go here: http://mattkersley.com/responsive/
- #17: An intro: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/A tutorial: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
- #18: When your wireframe is in code, you can test it on any device you have, and it adapts to the device.
- #19: When your wireframe is just a graphic, it either doesn’t work on mobile devices, or you have to make different graphics for each device.
- #20: Tony Stark didn’t care about his suit being perfectly styled. He cared about it kicking ass.
- #21: All the tools you need are free, and you should already know how to use enough to make a prototype if you’re in this industry. Beginning level knowledge should be enough.
- #22: You need to validate you’re making the right thing as early as possible in the process. This is just common sense. The farther into development you are when you discover you’re building the wrong thing, the more time and money you’ve wasted.
- #24: The hard stuff is already done for you.
- #25: Once you learn how to use these tools, you can move very, very fast. Because you’ll stop wasting time doing things that aren’t important, and spend it on things that are vital instead.
- #26: I’m not kidding about this. Each page should take 1-2 hours, maybe 3 if the interactivity is very complicated. Four if you’re just getting started.
- #29: If you use SASS, you may want to try the Foundation framework. Or do like I do and write code so DRY (Don’t Repeat Yourself) you don’t really need tools to help you deal with badly planned CSS.
- #30: Most of the basic interactions you will want are included. Anything missing is easy to prototype with jQuery or core JavaScript.
- #31: Fuel UX adds several useful components. http://exacttarget.github.com/fuelux/Font Awesome makes icons that scale without pixelating because they’re an embedded font. Great for Responsive Design. http://fortawesome.github.com/Font-Awesome/
- #32: The thing that makes Bootstrap so easy is you define it’s functionality with HTML and CSS. Use the right elements and classes, and Bootstrap does the rest.
- #33: If you know HTML, you can use all of the JavaScript components. Just use the right structure, and write a line to activate it.
- #36: We have seen serious, tangible gains from adopting this process. We will soon be using these interactive prototypes for User Testing, and doing early Accessibility testing, which will accelerate things even further.
- #39: All of the code you’ve written is production ready, and perfect for building on.