Rich UI Prototyping with Stagehand
I'm a huge proponent of increasing designer/developer communication and easing the handoff between static and implemented markup – and Stagehand is my latest attempt to bridge the gap.
Stagehand is a jQuery plugin that allows non-developer-types to simulate the states of a page simply by adding a few data attributes. For example, if a designer or frontend dev needs to slice a search page into HTML/CSS, they can easily slice the blank slate, search results, and 'no results' messaging all in one view. Then, using the Stagehand toolbar, anyone visiting the static markup of the Search page can flip through the various states:
%section(data-stage='search' data-scene='blank slate') %h1 Search for something! %section(data-stage='search' data-scene='results' // cool search result listing %section(data-stage='search' data-scene='no results') %h1 No results for this query = link_to "try searching for something else", "#"
That's just the tip of the iceberg. In the month since I released Stagehand, it's been used for toolbars, nav dropdowns, dynamic forms, and more. It's a new way to think about mocking interfaces – one that's resulted in saved time and increased markup quality for our projects.
In which we stub out AJAX calls.
To make matters worse, as client-side interfaces became more complex and frameworks (Backbone, Ember, etc.) became more common, we'd find unexpected layout bugs that were either deep within the implemented app or just plain hard to reproduce.
Stagehand: decoupled and happy.
That's a bit of how Stagehand has changed our process for the better – maybe it can do the same for you. Check out the Stagehand homepage for documentation & more examples – and then go forth and slice!