The Right Way to Wireframe – My Video Explanation

Preparation for “The Right Way to Wireframe” workshop at Interaction10 involved a healthy bunch of problem solving from myself, Todd Zaki Warfel, Will Evans and Fred Beecher. Our client, Lend4Health, has a great design challenge and Gabby Hon was kind enough to step in and provide us with business requirements and a creative brief that enabled us to get to work pointed in the right direction.

Brad Simpson was the creative genius that I worked with to come up with the stunning visual design you’ll see in the video.  The music was licensed for use online and is by Jami Sieber, titled, “Red Mood” from the album “Hidden Sky”. She’s awesome–buy her music! Mr. Dave Shelleny was kind enough to offer some light editing support and cool enough to recommend the track by Jami Sieber.

I used Balsamiq Mockups as my wireframing tool, and it was new to me. It was fun, too! I encourage you to give it a try for sketching and wireframes.

The video above shows my work. If you’ve got 3 minutes, take a look.  If you don’t, well, when I return from Savannah, I promise to do a version that’s about half as long.

I’d be remiss if I didn’t thank Nick Finck for the inspiration from his blog post “Creating Wireframes” from August 26, 2009.

For more information, see The Backstory.

I hope you enjoy the video.

Also #1: Go check out Will Evans’ version: The Right Way to Wireframe (YouTube)

Also #2: Go check out Todd Zaki Warfel’s version: The Right Way to Wireframe (YouTube)

3 Responses to “The Right Way to Wireframe – My Video Explanation”

  1. I am missing the user testing / iteration here. The video makes it look too easy!

    I can imagine my clients expecting us to get it right at the first go after watching this.


  2. @Belen you’re also missing the point—it’s a concept. The point is to show the design process that one of us goes through to understand the business and user/customer goals, explore a number of concepts and then create a design solution.

    In contrast, I don’t think the videos make it look easy, but rather show how much effort it takes to actually come up with a solid design solution and that it’s not something we pull out of our hats, but rather something that encapsulates a great deal of thought, exploration, iteration and effort. It also shows that it doesn’t take forever. Each of us went through this entire process in a matter of weeks.


  3. I’m not sure that @Belen *is* missing the point. The way this video is cut implies that there is an inexorable charge from sketch to Balsamiq to final design, with no iteration, no changes and no user involvement. It makes a great video but it would be easy to misconstrue this as advocating genius design.


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>