Here is an interesting technique which uses multiple pieces of tracing paper combined with sketching and scanning. It kind of reminds me of Photoshop layers except these exist in the real world. First, Jennifer drew various interface elements separate from each other on tracing paper and overlaid them together to form full page screens. These various combinations were later on also digitized using a scanner and then shared with others.

This technique shares some similarities in terms of flexibility with sticky frames. Just as with stickies, the designer can undo and rearrange elements very flexibly. Also, similarly to the sticky frame example where the designer used photography in order to reuse the various elements (and speed up the design process), here a scanner performed the same function. Tracing paper however has an additional characteristic of allowing to represent interesting transparency effects as is visible in the top right example suggesting an overlaying lightbox image. Tracing paper perhaps also affords a little bit more change and rearranging than sticky notes. All in all, such awesome tactics provide us with more speed and agility.

Jennifer writes:

We’ve also found that sometimes taking your design out of the computer screen forces your audience to focus on the concept rather than the execution, which is very helpful if your audience gets hung up on colors and buttons and the like. Frankly, it’s helpful to everyone involved: good design, I feel, serves the content, and all the flashy Flash/AJAX/JQuery what-have-you won’t save a poor design. I also believe that while good web design does not translate into good book design, etc., every designer should learn to use paper and pencil. Like the codex, it’s worked for 500 years; it’s not going anywhere soon.

Credits: Jennifer L. Anderson

Tags: agility, sketch, wireframe
Posted in Samples | 5 Comments »