EightShapes, LLC is a user experience design firm specialized in web sites and web applications.

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.

References

Other recent writing on sketchy wireframes and related topics include:

Acknowledgements

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.

RSS 2.0  |  Trackback


Comments (3)

  1. Rob says:

    This was so helpful!

    I was looking for a set of sketch style symbols for wire framing but now I can easily create whatever I want. Much better.

  2. Is there a way to do this with EightShapes Unify in InDesign?

  3. At this time, I am not aware of InDesign features to style strokes with textures or other properties like this.

Add a Comment

Email addresses will not be published. Required fields are marked *