VoiceGap

Filling the space between You and Your Apps

Wireframes, StoryBoards and Sketches (oh my!)

The differences between Wireframes and Storyboards is quite vague these days as each term has borrowed so many ideas from the other. It all ends up being a cycle of interations bringing greater and greater clarity into how the product can be used by the stakeholders.

I prefer the term Storyboard as it points back to the original premise that the user / stakeholders are telling the story. As they say: a picture is worth a thousand words.

These are Sketches, not a story board, but they are part of a larger process for designing new products:

I found a couple of really interesting pictures of touch based Story Boards from the Microsoft MSDN web site:

Although I hate to fill the article with all links, here is a great set of ui wireframes including an early twitter mock up on paper.  http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups

While looking for a good JQuery Mobile example, I found this write up by   to be quite good. It goes into JQuery, and HTML5 based user interfaces specifically for mobile devices. Plus, she provides some great wireframes of the screens to help visualize the solution.

Hopefully you have found a few good Story Boards that excited you. My last pointer on this subject can be found in a great Paper on Storyboards and Sketch Prototypes, yes that publication date is 1990 for those of you that think all these Agile ideas are brand new.

Comments are currently closed.