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!
December 16th, 2008 at 4:22 pm
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.
December 23rd, 2008 at 1:07 am
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.
January 30th, 2009 at 11:06 am
[...] to bring that unrefined look into my UI prototypes. Then David at Design Commission told me about a method he uses to make sketchy wireframes in OG by exporting into Illustrator and importing back into OmniGraffle. [...]
February 19th, 2009 at 6:04 am
[...] Here is another resource for OmniGraffle, for creating sketchs: http://www.designcommission.com/blog/making-wireframes-look-sketchy/ [...]
May 20th, 2009 at 8:21 pm
Первые два комментатора говорят правду :)
May 24th, 2009 at 3:39 pm
Рынок ценных бумаг обусловливается как совокупность экономических отношений, связанных с выпуском и обращением ценных бумаг между его участниками. Объектом рынка ценных бумаг есть ценная бумага. Ценная бумага может продаваться и покупаться несконечное число раз, поэтому, для того чтобы товар дошел до своего потребителя, нужна своя организация товародвижения. Прочитать более детально про рынок ценных бумаг, проблемы портфельного инвестирования, классификацию ценных бумаг, коммерческие банки на рынке ценных бумаг Вы сможете на нашем сайте.
Доходность от операций с ценными бумагами
May 25th, 2009 at 4:19 pm
Инвестиционная деятельность в определенной доле присуща всякому
предприятию. При большом выборе видов инвестиций компания регулярно сталкивается с проблемой выбора инвестиционного решения. Вероятность достижения цели зависит от правильности оценивания риска, полноты и точности его расчета. Так как же не ошибиться в правильности выбора инвестиционного решения? Об этом и многом другом вы узнаете на нашем сайте.
Способы уменьшения риска