Published on

Protostrap is a framework for designers that want to get clickable and testable prototypes up fast. It allows designers to have reusable page elements for recurring things like navigation, headers and footers. It is based on Twitter Bootstrap.

Published in: Design
  • Be the first to comment


  1. 1. ProtostrapA prototyping frameworkfor designersLiip TechtalkNovember 29th 2012Memi Beltrame@bratwurstkomet 💻 Demo 📥 Download Liip - Agile Web Development
  2. 2. Protostrap is a frameworkfor designers that want toget clickable and testableprototypes up fast. Liip - Agile Web Development
  3. 3. GoalTo allow designers to havereusable page elements forrecurring things likenavigation. Liip - Agile Web Development
  4. 4. GoalTo give designers a solidfoundation that offers of a lotof expected functionality outof the box. Liip - Agile Web Development
  5. 5. It is based on TwitterBootstrap, so all you can do there you can do here too. Liip - Agile Web Development
  6. 6. Protostrap + + Just a sprinkle! A lot of functionality. Out of the box! { Liip - Agile Web Development
  7. 7. Only very basic PHPJust a sprinkle! knowledge needed: <?php // this includes the header include(./header.php);?> $navbarClasses = array(active,,); echo $username; Liip - Agile Web Development
  8. 8. PHP is used to:Just a sprinkle!• Stitch elements together• Allow fake auth layer• Create id‘s for accordeons• Fake Google searches (Fake Google is not in the master branch yet) Liip - Agile Web Development
  9. 9. Heaps of functionality out of the boxSite structure• Templates and snippets for header, footer, iosTabbar• Navigation snippets including bootstrap navigation elements• missing.php to show the "End of Prototype"• 404 Handler that redirects to missing.php• Fake Login Process and logged in status, authentification error faking. Liip - Agile Web Development
  10. 10. Heaps of functionality out of the boxMobile• iOS tabbar with styles for active and non active tabs• Badges and for iOS tabbar Liip - Agile Web Development
  11. 11. Heaps of functionality out of the boxMobile• Can be added to the homescreen as a native mobile-webapp• Displays an "Add to Homescreen" hint• standalone app mode for ios, correctly handling all the links not to open in safari Liip - Agile Web Development
  12. 12. Heaps of functionality out of the boxReady-to-Use Examples• Grid• Accordeon with dynamic ID• Carousel with Touch support• Tabs• Stacked Navigation• Breadcrumb that is horizontally scrollable on mobile. Liip - Agile Web Development
  13. 13. Heaps of functionality out of the boxEntypo Pictogram Suite• Protostrap uses the Entypo typeface that allows to have scalable icons.• Relies on the bootstrap syntax: <i class="icon-user"></i>• Scales up for headings• Inherits the parents color value Entypo pictograms by Daniel Bruce Liip - Agile Web Development
  14. 14. Heaps of functionality out of the boxIn the Pipeline• Megamenu files• Forms with UX optimized Feedback• Easy verification triggering for Form-Feedback• Files to fake Google search• Typeahead example with a more flexible typeahead to emulate live-search Liip - Agile Web Development
  15. 15. ⚠ Not for use on live sitesProtostrap is prototyping software andlacks all the security features neededon a live system.Do NOT use this in aproduction environment. Liip - Agile Web Development
  16. 16. Demo: 📥 Resources Liip - Agile Web Development