Your SlideShare is downloading. ×
Protostrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Protostrap

9,646
views

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 …

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,646
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ProtostrapA prototyping frameworkfor designersLiip TechtalkNovember 29th 2012Memi Beltrame@bratwurstkomet 💻 Demo 📥 Download Liip - Agile Web Development liip.ch
  • 2. Protostrap is a frameworkfor designers that want toget clickable and testableprototypes up fast. Liip - Agile Web Development liip.ch
  • 3. GoalTo allow designers to havereusable page elements forrecurring things likenavigation. Liip - Agile Web Development liip.ch
  • 4. GoalTo give designers a solidfoundation that offers of a lotof expected functionality outof the box. Liip - Agile Web Development liip.ch
  • 5. It is based on TwitterBootstrap, so all you can do there you can do here too. Liip - Agile Web Development liip.ch
  • 6. Protostrap + + Just a sprinkle! A lot of functionality. Out of the box! { Liip - Agile Web Development liip.ch
  • 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 liip.ch
  • 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 liip.ch
  • 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 liip.ch
  • 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 liip.ch
  • 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 liip.ch
  • 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 liip.ch
  • 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 http://entypo.com Liip - Agile Web Development liip.ch
  • 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 liip.ch
  • 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 liip.ch
  • 16. Demo: 📥 Resourceshttp://preview.liip.ch/protostrapDownload:https://github.com/liip/Protostrap/archive/master.zipGitHub:https://github.com/liip/Protostrap/ Liip - Agile Web Development liip.ch