Updated Sketch GUI Shapes for Visio
Below, find a link to download my revision of Niklas Wolkert’s “sketchy” Visio prototyping shapes that are included in Henrik Olsen’s GUUUI Web Prototyping Tool. These shapes have made mocking up a web UI much easier, and the hand-drawn style makes it very clear to stakeholders that “this is not yet working software.” My typographical and usability improvements include:
- Got rid of heinous Comic Sans typeface. I use Calibri except in the form elements, which use Consolas.
- Changed text spacing on all text block items. Almost every text element has zero spacing, so it can be placed more precisely.
- Made left margin consistent between check boxes and radio buttons.
- Made “edit text” the default double-click behavior. Original shapes did not have consistent behavior, requiring first a single-click, and then a click of the “Text Tool” button.
- Improved “empty box” shape. Sometimes I like to use the empty box shape as a textarea, so I gave it some default text font/spacing settings to accomodate.
- Added the Grid Column shape. I may be running afoul of some sort of license, but I copied the “Grid Column” shape from the “Common Controls” stencil; it helps for mocking up tables. Unfortunately, it’s not “sketchy,” but I made the fonts consistent.
Download Updated Sketch GUI Shapes (zip of Visio 2007 .vss)
22. July 2008 at 04:32
Hi!
It sounds really great with the fixes! I am a beginner i Visio sketching though and don’t know how to use the file.
I have unpacked it to the My Shapes folder but it seems that I am still using the “original”.. Should I rename the file or something to make it work?
Thanks a lot!
22. July 2008 at 05:07
OK, think I found it - just went to Files > Stencils and chose your Stencils there ;-)
6. November 2008 at 04:33
Hi there,
When I use the stencils, which are great, and I want to print my visio files, everything goes fine, until the printer gets to the stencil parts. The printer transforms the visio file into an enormous file and chokes itself on it.
Is there a way that my printer will interpret the sketchy stencils like it should?
Thanks!
11. November 2008 at 16:18
Thank you , I was searching for sketchy like GUI stencil for writing business requirements
18. February 2009 at 12:34
Very cool. I use GUUUI’s visio stencils all the time. I will give your new and improved stencil set a whirl on my next project.
2. March 2009 at 06:55
[...] Jumping over to the computer does not necessarily mean that the wireframe ought to look rigid and clean, suggesting a higher degree of completion. Occasionally, the designer still feels the need to communicate the interface with a style which invites change by suggesting incompletion. One way of doing this is by means of a more sketchy style. Here is a sample of Hans using Visio loaded with a sketchy stencil designed by Niklas Wolkert. Jonathan Abbett has later on revised the stencil here. [...]
2. March 2009 at 07:20
[...] points to Niklas Wolkert’s Sketchy UI Shapes (found on Henrik Olsen’s GUUUI) and the updated Updated Sketch shapes by Jonathan Abbett. URL wireframes.linowski.ca/?p=445… [...]
2. March 2009 at 16:02
[...] abbett.org » Updated Sketch GUI Shapes for Visio [...]
3. March 2009 at 00:27
you are missing a state for you checkbox and radio button - when there are selected and disabled
20. March 2009 at 05:54
I love these stencils! I have already put them to use a couple of times. Thank you! One thing I would really like to see is a basic circle shape (for pie charts and such). If you point me in the right direction I could give give creating my own a shot.
30. March 2009 at 08:25
[...] Resources: Visio - the interaction designer’s nail gun Sketch GUI Shapes for Visio [...]
10. April 2009 at 10:28
[...] Sketchy Wireframes Aaron Hursman shares an example of his sketch-style wireframes using Jonathan Abbett’s Sketch Stencils for Visio. [...]
13. April 2009 at 14:22
[...] pero quieran darle un toque más “hand-drawn” a sus wireframes, les recomiendo la modificación que Jonathan Abbett ha hecho de los stencils originales de Niklas Wolkert (vía Nick Finck). Si además los combinamos [...]