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:
- Drag all the components I wanted to recreate from the stencil to a blank canvas in OG.
- Save the OG file as a PDF.
- 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.
- Change the typeface – I used FG Amura which is free, but you could use whatever you want.
- 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.
Enjoy!
5 Comments on Making Wireframes Look Sketchy
Excellent, David. For that issue of text alignment in the tool tip bubble, you can show rulers, click in the box, and then modify the first line and indent markers in the ruler. That way the box will resize with your text or vice versa.
Super technique.
Folks who don’t have Omnigraffle might want to check out http://www.balsamiq.com/ — it offers the same ‘sketchy’ UI design approach as outlined in this article.
Attractive component to content. I simply stumbled upon your blog and in accession capital to assert that I acquire actually enjoyed account your blog posts. Anyway I will be subscribing for your feeds or even I fulfillment you get right of entry to constantly quickly.