Making Wireframes Look Sketchy

Based on Michael Angele’s suggestion I thought I’d take a moment to share some insight into our process here at DC. Typically we will work through a stage of sketching or wireframes for a site that map out functionality for a screen on a website. When pages are complex it can be helpful for designers to see what kinds of information and interaction they need to account for and, for developers, it’s a good way to begin planning for their code.

One danger with wireframes is the potential to get stuck in the details of how they look. Understandably, clients are eager to see how their site is going to look. Inevitably this leads to questions and comments about how the wire-frames are laid out, if that’s the “right” color of grey, etc. However, until we’ve defined all the functionality, it’s extremely difficult to know what’s its final design will look like.

To combat this we’ve put together a set of interface components, which allow us to quickly put together wireframes using OmniGraffle (for you Window’s users think Visio). By organizing commonly used elements that have been designed to look intentionally “sketchy” into a drag-and-drop stencil we can assemble concepts quickly and help keep the conversation focused on functionality—not aesthetics.

If you’re into this kind of stuff, feel free to download the stencil below. Please note that we’ve used the free font FG Amura as the font in the stencil (because comic sans is evil…) so you’ll need to download that font or substitute your own to get things to work.

As for our process in creating these stencils, we started with the Yahoo Interface Library stencil set. Then:

1. Drag all the components I wanted to recreate from the stencil to a blank canvas in OG.
2. Save the OG file as a PDF.
3. Open the PDF in Illustrator and apply the Roughen filter to the lines, then choose Object > Path > Simplify to remove a lot of the extra points created by illustrator.
4. Change the typeface - I used FG Amura which is free, but you could use whatever you want.
5. Save the PDF and open it in OG. Then just create a new stencil and go to town.

Here’s a video that shows the process of creating the elements for the stencil.

Creating Sketch Wireframes in OmniGraffle from Design Commission on Vimeo.

» Download the Stencil

» Download the font, FG Amura

Enjoy!

via: design commission.