seen + learned

When moving fast slows you down or, one more reason why prototypes rule

Posted: Wednesday, March 11, 2009 | Posted by Tania Schlatter | Labels: , ,

Sometimes, we go right from creating schematic, or wireframe sketches on paper to visual design. There are often several rounds of sketches before they are approved and visual design begins in earnest. On complex applications, this is a mistake. Paper-based wireframes, even several rounds of them, do not give the team a chance to test drive the application. This leads to lots of "oh, yeah" changes when the team sees a working build with "final" graphics in place, even if the visual design and the wireframing have gone through several rounds.

"Everything is changeable on the web - what's the problem?" Creating visual design for complex web applications involves layers, lots and lots of graphic layers per page template. For each button, for example, there are several states. For each state, there are vector (working, editable) layers, and final, "raster" layers for the same button. Four layers, easy, per button. Finding the right layer and changing it to match all the other buttons, even in well-organized files is time consuming and error-prone.

Add all the files from all the rounds of design, the passage of time from final graphics to working staged site, and the problem grows. Changes to complex web applications once the graphics are in place are time-consuming and lead to messy, hard to manage files. Often the change needs to be made right away, and a designer (no one I know ;) might edit a flat .jpg rather than the original layered file. While this seems harmless at the time and gets the problem solved quickly, what happens when the same item or similar item needs the change again - another "oh, yeah"? More time to find, edit, make the same as all the others, for a word change that everyone thought could be changed easily later.

Maintainability and integrity of a UI design suffers when the design is picked apart for the sake of wording and functionality edits once complete. Web application visual design is often about subtle juxtapositions. When features are unexpectedly added or changed, the details of the design can fall apart, reducing the overall impact and effectiveness of the design that was labored over and approved.

What to do? Prototype. We know prototyping helps interaction design and feature definition. We know prototypes (limited functionality, no design) are easy and helpful to test. The news is that it helps visual design, too. When prototypes are vetted, "oh yeah" changes are dramatically fewer, allowing the design to be its best.


  1. Unknown said...
  2. What are your favorite layout prototyping tools? The one I've found most useful is unfortunately the old-fashioned analog whiteboard (or a nice yellow legal pad)...and nobody has managed to really do a great implementation of the flexibility of a whiteboard with the portability of a software application (we'll see what Apple comes up with on Wednesday though!). I wish that there was something not unlike Photoshop with some canned buttons, layering tools, resizable web elements, easy text filling/greeking, etc. Maybe something exists?

  3. Debby Levinson said...
  4. Personally, I start with quick pencil sketches and then move on to HTML (with Dreamweaver) or InDesign. These are the tools I'm most familiar with, and they're adaptable enough that it's frankly faster for me to work with those than it would be to learn to use a tool built specifically for prototyping.

    Tools with drag 'n' drop canned buttons, etc. do exist, though, like Balsamiq and OmniGraffle. I've played a little with Balsamiq and liked it, but haven't loved it enough to give up my existing tools.

Post a Comment

Note: Only a member of this blog may post a comment.