SXSWi – The Right Way to Wireframe (Part 1)
Learning how to wireframe using 4 different tools and 4 different IAs/designers. By Paul Beecher and Will Evans.
A lot of people are all talk about designing (“Do more! Be more!”)… but no one talks about how they do it. No one shows their work (because it’s proprietary). Have you ever seen a wireframe from Jared Spool? JJG? Peter Morville?
Wireframe vs. Prototype: Argued that sketching is a kind of wireframe. Choose a side. (Audience member: “I think an interactive wireframe is the way to go…” “Copout!”)
What’s the best tool? Omnigraffle? Balsamiq? Powerpoint?
If you’re still arguing, you’re missing the point. Use whatever you can to illustrate your point (interactive or not) and to communicate effectively.
4 designers, 1 problem
No one could talk to each other to keep everyone honest while working on the presentation. Everyone uses a different tool (Omnigraffle, HTML, Fireworks, and Balsamiq). Four different designers can tackle the same problem using different tools and be successful.
They looked for a non-profit: lend4health.com and Tori Tuncan instead of a theoretical client. Decided to give her a proper site rather than her current 1-pager.
Balsamic
Created two personas - people you need a loan and people who give a loan. Created a sitemap (using postit notes and cards on a push-pin board). Card-sorting. Then went into Balsamiq, but can’t use it for sitemaps, for used a random UML tool. Userpaths: How one persona goes through paths on the website - which was sketched first. Don’t worry about being a horrible sketcher - just as long as they communicate. Helps figure out the right approach - but as soon as you start using a tool (like Balsamiq), things will be discovered and changed.
And they showed a cool video… hopefully I can find and embed. =/
HTML
By @zakiwarfel. Always begins with research. Watch people use the existing site remotely - talk to people - etc.
Explore concepts through sketching. Not wireframes. Sketching first. But don’t spend too much time sketching since it’s just trying to get an idea out there to critique. Like the quick-fire challenge in Top Chef.
Move into prototypes - straight into HTML (/CSS/Javascript).
Another movie time…
Conclusion
This talk had a lot of great movies to show their process that I can’t find just yet. Hopefully they’ll exist on the internet soon and I can embed them. :) Essentially: don’t go straight into design, work with personas, sitemaps, etc to map out the process (and I wish they went into HOW to do this). Your wireframes/prototypes don’t have to be constrained to one format — there are a number of formats that work.