The Right Way to Wireframe, Part 1

Now getting ready for a workshop session on wireframing, from a couple of guys I follow on Twitter: @zakiwarfel and @russu.

Love this. Starting off with the point that in UX design, we never actually see the work.

What’s better, wireframing or prototyping? This is a funny session but so far hard to take notes. We’ll see how it goes.

So the premise is that 4 designers wireframed a new site for lend4health.com, microlending platform for children’s health needs.

Russ Unger chose Balsamiq for his tool. But first he’s showing us his index-card-and-post-it-note work that was the first step. Then found he couldn’t make the site map in Balsamiq.

But he did build out the wireframes there. And he shows those and the final design crafted from them by @simplybrad.

OK so this is cool. They took photos of their sketching, but they also screencasted their computer work. That is is pretty cool.

Now we’re on to Todd Zaki Warfel. He starts off with about a zillion post-it notes and sorts them on the wall into themes. He uses personas, the number based on what the data tells them is necessary. Then they start sketching, to explore concepts.

[Me: Personas are so rarely done well. Often they lead you down a dead-end path, because they aren't informed by real-world data, but instead by someone in the C-suite's opinions. I'm just going to assume that with all the data Zaki Warfel collects, that he's doing them right.]

Zaki Warfel does some internal pitch/critiquing, and then goes straight to gray-scale prototyping, then brings in a designer.

He claims not to wireframe, but instead to prototype. His handdrawn sketches sure look like wireframes to me, however. Generally uses HTML/CSS but for this presentation he used Fireworks.

Really interesting session….Part 2 happens at 12:30.

, ,

No comments yet.

Leave a Reply

Connect with Facebook