The Right Way to Wireframe – My Video Explanation

Written by Russ on February 4, 2010 – 10:48 am

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)

Posted in Uncategorized | 3 Comments »

The Right Way to Wireframe – The Backstory

Written by Russ on February 4, 2010 – 10:00 am

In April 2009, I was reflecting on my conference experiences–I’d been pretty fortunate to present at both SXSW and the Information Architecture Summit (IA Summit) in a variety of different formats.  One of those formats was a panel, and I wasn’t ultimately all that satisfied with what had been put out to the audience.  That is, we had a message, but I wasn’t sure that a message was enough without providing a course of action.

In addition, Jesse James Garrett‘s closing plenary had a couple of points in his closing plenary that I’d been noodling on for awhile, but hearing them vocalized really helped me.  Jesse said (paraphrased) that we all believe he’s a good Information Architect or User Experience Designer, but we’ve never seen his work. We may have read his book (Elements of User Experience), but is his work really out there, readily available for the rest of us to see? Do we really KNOW if he’s good at this stuff? Do we really know if we are, or for that matter, the people on the left or right of us?

I made a very conscious effort while writing my parts of “A Project Guide to UX Design” to reach out to others in the field and show examples of work, and provide examples for people to work with as starting points (and in some cases even more advanced points) in order to put more deliverables “out there”.

But what do the deliverables really mean?

What do wireframes really mean? How do I know if I’m doing it right, if my tool is right or if doing them at all is right when I’m just one guy in a Chicago suburb who works at a large company in a big city for a variety of clients doing work that I mostly can’t show?

I didn’t have the answer.

So, I did what felt to be right.  I called up Todd Zaki Warfel, Will Evans and Fred Beecher–people that I know and respect in the design field and know that their particular approach to solving problems via some sort of wireframing and/or prototyping methods are somewhat different than mine–and I talked them through all the things rattling in my head.

In less than a couple of hours, we took a seedling of an idea and turned it into a presentation–and thanks to Bill DeRouchey and Jennifer Bove at Interaction10–we also turned it into a workshop.

If you attend any of these sessions, we’ll walk you through a process for creating the right wireframes–and we’ll show you ours, including the process each of us went through to come up with the work that we did.

We created a project. We worked with Gabby Hon to create some great requirements and Lend4Health as a great client with a great need and then we isolated ourselves from each other and set out to solve the design challenges in front of us.  We went from ideas to requirements to sitemaps to sketches to wireframes to prototypes to creative design.

And we documented every step along the way.

Now, it’s time to show you my process and my work.

(see next blog post)

Posted in Uncategorized | 2 Comments »