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

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.