Get Protostrap – a Prototyping Framework for Designers

As of today a brandnew release of Protostrap is available. Protostrap is a prototyping framework for designers that want to get clickable and testable Prototypes up and running fast. This post is about the whys and basic hows of Protostrap.

User testing is an essential part of the User Experience (UX) design workflow. As Designers we want users to test prototypes as early as possible – ideally before visual design and development take place.

To run effective tests we need to be able to easily build a clickable prototype. There are quite a few prototyping solutions around, some more interactive than others, but all with one very basic flaw: they’re all fail at giving the user the impression of using, well, a website. Most of their interactive potential is confined to being able to link between screens. User testing though wants to find out if the site or application behaves as the user expects. And that’s the tricky part. In other words: it’s not the looks, it’s the behavior.

So the only real option is having prototypes with HTML, CSS and Javascript. And here is where the trouble begins: There are no HTML based frameworks that allow designers to work in a sustainable way making it easy to reuse code and that come with a solid foundation of out of the box functionalities.

The Need for Speed

Protostrap was born out of the need for a prototyping solution that goes beyond the typical boilerplate HTML frameworks.
After careful evaluation I chose to base Protostrap on Bootstrap (hence also the name). In my opinion it offered the most advanced base to build a prototyping tool upon. It does not look particularly pretty but that’s not the point of prototyping.

The aim was to have something that makes it easy (as in “not time consuming”) to have reusable page elements for recurring things like navigations or footers and headers. This templateing ability is one of the key features that make a solution like balsamiq great because it helps you to manage changes in recurring elements painlessly.

The nitty-gritty

Protostrap uses a few simple PHP-commands to achieve this. This sounds like a major turn off for designers – Having to actually code. The good news is: since Protostrap is only meant for prototyping you will not have to put up with the complicated stuff php has to offer. Just a handful of commands will get the job done, learn these and you’ll be fine.
So far the used PHP-commands are:

// this includes the header
include('./header.php');
// this is an array that defines which navbar element is active
$navbarClasses = array('active','','');
// this prints a variable into the template
echo $username;
// this if-statement checks if there is a logged in user
if($loggedIn){ 
   // display user info
} else {
  // display login form
}

If you can wrap your brain around these you’re set to go.

The muscles

Protostrap’s real strength though lies in its out-of-the-box features. Here’s the list of the most prominent ones:

A fake authentication layer
Sometimes you have to prototype for sites that have users that can log in and stay logged in. Protostrap offers this possibility out of the box by listening to formfields named “login”. This sets the variable $loggedIn and also gives you a John Doe user. These properties are persistent, this means that any following page called in the prototype thinks it has a logged in user.
This allows you to prototype a more tangible user experience for usecases like E-Shop checkouts or sites that display certain info only to registered users.

A “Page missing” Handler
Prototypes are often incomplete – you just can’t provide every page on the site but will focus on the core experience. However you’ll probably have a full set navigation items some of which will lead to nowhere. Whenever you test a prototype with users you want to be prepared for the “End of Prototype” situation in an elegant way and not with a confusing 404 Page that makes the Testee think your prototype is broken. Protostrap handles requests for missing pages by displaying the users the contents of missing.php.

iOS Tabbar and other goodies for mobile
In order to allow HTML based prototyping of iOS Apps (to some extent at least) Protostrap has a ready to use iOS tabbar complete with badges.
Protostrap Sites can be added to the homescreen as a native mobile-webapp out of the box and will display a an “Add to Homescreen” hint. Protostrap also comes with an enabled standalone app mode for iOS, correctly handling all the links not to open in Safari.

Carousel with touch support
Touch is just too important to ignore these days. Unfortunately bootstraps carousel comes without touch support – Protostrap uses a fork of the original carousel with touch enabled.

Entypo Pictogram Suite
Protostrap uses the Entypo Pictogram Suite to have scalable vector based icons. Its use is identical to using Bootstrap icons, you just have more, and scalable icons that also can take any color you define in css.

Flexible Typeahead
Protostraps Typeahead is slightly more evolved than Bootstraps version. It allows you to display a fake amount of results and it has an “onselect” event-handler allows you to pass the selected item to a function, for example to load a page getting the value of the selected item.

In the Pipeline
There are a few more things in the pipeline:

• Megamenu files
• Forms with UX optimized Feedback
• Easy verification triggering for Form-Feedback
• Files to fake Google search to allow the testing of “User comes from Google” scenarios

Not for use on live sites!
Despite all its… ehrm… awesomeness Protostrap has its limits: It is prototyping software and lacks all the security features needed on a live system. So please: Do NOT use this in a production environment.

Thanks
I hereby would like to thank all those that kept encouraging and pushing me forward, especially my current employer Liip for encouraging me to go through with this and putting time and advice into the project.
I would also thank Stefan Sicher and Marco Malacarne for giving so much valuable feedback and being so encouraging.
★ THANK YOU – YOU ARE AWESOME ★

Go to the Demo Site
Download Protstrap (this downloads a Zip-File)
Protostrap is Open Source and on Github