Simple Sketchy Wireframes in Adobe Illustrator
Last week, EightShapes worked on three alternative directions addressing the same problem, and we were at the stage of bridging sketching studio ideas to more formal recommendations. We each wanted to communicate different ideas, but we didn’t want to start tying ourselves into a rigid layout (yet) and didn’t want our wireframe styles to influence decision making.
Enter sketchy wireframes.
From Todd Zaki Warfel’s Eight Guiding Principles in Prototyping, he explains the value of priming your audience in order to
set expectations. Sketchy wireframes enable you to downgrade expectations on fidelity, while retaining every bit of functional expectations that you’d already implied via buttons, links, and other interactive cues.
This has been a topic of discussion recently in our community (see below), and we’d even seen
our own clients (and their other vendors) have
success in using sketchy
wireframes for brainstorming and for usability testing clickable prototypes. Once we realized how easy it was to transform our basic wireframes to have a more sketchy appearance, that fidelity was a slam dunk for this round of presentations.
Demonstrating Sketchy Transformations in Adobe Illustrator
Using Adobe Illustrator, the technique boiled down to a very simple visual translation of typography, shapes, and pasted screenshots. For best viewing, view full screen.
The transformations are:
- Marker Felt Typeface, weighted Thin for most text but also using Wide conservatively for emphasis. Marker felt is installed with the Adobe Creative suite.
- Brushed lines, using the Window > Brush Libraries > Artistic > Artistic_CharcoalChalkPencil library included in Adobe Illustrator. Generally, the “Rounded” brush can be used for a heavier weight for buttons and other key elements, and the “Pencil” brush can be used for less important lines, rectangles that delineate chunks, and scribbled text.
- Live trace for reducing screenshot fidelity. Accessible via either the Control Panel or Object > Live Trace > Tracing options, use the Grayscale preset with anywhere between 5 to 10 colors.
Other recent writing on sketchy wireframes and related topics include:
- David Conrad’s Making Wireframes Look Sketchy [in OmniGraffle]
- Matthew Rea’s Sketchy Illustrator wireframes, moreso as a library of prebuilt objects rather than the basics on how to transform into sketchiness.
- Todd Zaki Warfel’s Prototyping book
Thanks to Jose Martinez Salmeron, EightShapes’ Director of Visual Design, for the quick tips as I interrupted his creative time with Dimple Mohan for a couple minutes here and there for advice on the techniques.