Update: See Will Evans‘s extremely thoughtful response in the comments – there’s a method to this madness that I was unaware of when I wrote the post. Thanks Will, for calling me to task so kindly.
Sketches, wireframes, and mockups are an essential part of the product development process and popular standards are beginning to emerge for web/mobile app design. These 4 videos will walk you through the process – they’re follow-up from the “Right Way to Wireframe” seminar at the recent Interation10 conference.
Will Evans, one of the presenters, recently posted 2 great articles on his blog – they more thoroughly describe his process:
I think it’s important to remember, especially in a resource-strapped startup, that nearly everything described in these videos amounts to procedural overhead – the actual end user (customer) never sees these, so they’re only valuable insofar as they help you create great products. Which can be tricky, because as you’ll see, wireframing is fun to the point of distraction. As soon as you’re building wireframes, documents, or any other procedural component at the cost of building the actual product, your ship is sinking.
As a complement (antidote?) to these videos, I’d strongly recommend 4 chapters from 37Signals’ Getting Real ebook:
And now, the wireframe porn
http://www.youtube.com/watch?v=gLenYBX3Iqk
Good explicit definition of the full process, though the wireframes are a little too pretty for my taste. They’re spending a lot of time spend designing a throwaway mockup, which is poor ROI (this is likely a project with big overhead, so they can afford to fall in love with disposable process artifacts). There’s another, arguably more important cost to pretty wireframes: they have a coherent brand and design that can seem so similar to a finished product that they distract the decision makers from the final design and create unintentional biases (e.g. for minimal, grey and blue designs).
http://www.userglue.com/blog/2010/02/04/the-right-way-to-wireframe-my-video-explanation/
The hand-drawn placards are a nice touch, but this one is a bit vague regarding what’s actually going on. Process porn? There is a nice reference to card sorting and site map design as a prerequisite for individual pages, and the focus on hand-drawn sketches initially is a welcome addition to all the wireframing technophilia. Finally, the repeated start-to-finish flows from sketch to wireframe to page mockup help explain the transformation of a UI through each step.
http://www.nickfinck.com/blog/entry/creating_wireframes/
This video skips over explaining requirements and how they become page concepts, which makes it far less useful than the others. The actual page requirements are pretty lightweight too, so there isn’t a whole lot to learn here. Also falls into the category of too-pretty wireframes. Man, I wish this UX calendar were a real project though!
http://www.youtube.com/watch?v=QSxF-pISj1w
This last one is from the aforementioned and soft-spoken Will Evans. God bless anyone who includes “motherfuck” in a description of the wireframing process. Also nice that he links to the tools used – Omnigraffle and wireframe stencils from Konigi.
Will starts with sketches before moving to the computer, and 1 standout item is the flow arrows that link the initial thumbnails – it’s an excellent alternative to traditional sitemaps and better suited to application-oriented experiences (as opposed to document-oriented). Also unique in the bunch is the inclusion of blue callouts in the wireframes, explaining each feature and grounding this process in a larger dev flow.
Will’s blog post, Shades of Gray: Thoughts on Sketching, does a good job of explaining the role of hand-drawn sketches in this process, which is arguably the most valuable lesson to take from all of the information in these videos.
Thanks to Josh for sending me the initial link.
Know of any other good “how to wireframe” videos? If you share them here I’ll work them into the post.
No related posts.
Thanks for writing up about our videos – but I’m afraid they may have been taken out of context. They were meant to only summerize our design process after workshop attendees had spent 4 hours going through a rather grueling design process. To provide much needed context, I wrote and then referenced a couple of blog posts (well – more like articles since they are more than 3x the normal 400 word limit of most blog posts). So I hope these – with the videos, and eventually the slide decks that will be posted to slideshare – will give a more complete picture of why “D”esign is important – especially relative to some of the processes employed by seat-of-their-pants hackers that code first, and apologize for horrible software later, crowd.
Shades of Gray: Thoughts on Sketching http://tinyurl.com/y94p5ol
Shades of Gray: Wireframes as Thinking Devices http://tinyurl.com/a96x7g
Cheers,
Will