There are many responsive HTML/CSS frameworks out there, but one of my favourites is Twitter Bootstrap due to the ease/speed of development, the quality of documentation and also its slick visual appearance.
I began the process of developing the prototype by sketching with good old pen and paper. After various revisions I opened up Coda and started scribing some HTML. After various iterations with feedback from key team members the initial release was ready.
After the initial prototype was completed I moved onto documenting the different user journeys. Now you could argue that this step is a little redundant. But it's almost a case of appeasing the client by bridging the gap between old skool wireframes with loads of annotations to having a prototype with no documentation.
There were two main user journeys for registered and guest users. As part of the documentation process I simply took screenshots of the different states of the prototype, dropped them into OmniGraffle and annotated the key interactions along the way. The purpose of this was to have a document that supported the prototype that gave key insights into how the prototype served the needs of different users, rather than to document how a menu/navigation item works.
In my opinion it is much better for both the client and us to build prototypes for them to play with than to mock up a static wireframe and annotate it to describe how it works.
By developing a prototype with Twitter Bootstrap (instead of creating static wireframes) I managed to:
I love prototyping and having the chance to bring my coding skills to the table.
I'm slowly seeing more and more agencies come round to this way of thinking and get their clients on board the prototyping train.
I'm not saying you should abandon static wireframes, but with each subsequent project I work on I'm seeing more and more value being created though the refinement of this process.
I'd love to hear what you think? Are you a prototyping guru? Or a staunch static wireframer?