Palette last modified 25 October 2007.
This is my set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle (Mac OS X). The image at right shows the stencil in action. It consists of a basic set of shapes including: browser chrome, title and footer block, icons, form elements, a greeked text block, text headings, some boxes, label and note blocks, navigation elements, and some icons created entirely in graffle.
Installing the palette
1) Download the file WireframeShapesAngeles.gstencil.tar.gz
2) Move it to your ~/Library/Application Support/OmniGraffle/Stencils directory. The ~ represents your user "home" folder. Palettes installed here will be visible only to you.
You're done.
Using the palette
When you open the stencil, drag the shapes onto your canvas. Be aware that you need to click and drag to select some of the elements that exist as multiple ungrouped objects, e.g. the form elements. I left these ungrouped so you can scale the text boxes without having the up/down arrows and the AJAX spinner scale disproportionately.
The title and footer elements use variables, so once you insert them into your master canvases, they will display the document title, page number, creator name, for the document/page that is being displayed.
To help you get started, I've also published a simple Web Design Template and a Greeking Stencil that work nicely with the Wireframe Stencil.
Purchase OmniGraffle Pro
You can purchase Omnigraffle Professional 4.0
To be notified of updates to this stencil, you can track this RSS feed.
Comments
01/31/07 @ 21:26
Hi, I just downloaded your stencil... super by the way.
But when I select one of the form control boxes (like text, combo box, etc), the figure is not grouped and I have to drag the rectangle and the icon apart.
I hope it works for you as a feedback,
Regards,
MACLAU
02/01/07 @ 08:34
OK, I grouped controls and uploaded a new version.
I purposely keep them ungrouped because I often only need parts of an input or select box or because I need to change its scale. Changing the scale of a grouped object will scale all the objects inside. So if I want to scale the combo box, doing so would stretch the appearance of the scroll bars and they will look unnatural. Leaving the elements ungrouped lets me scale and then group afterwards.
I suppose I can group the elements, and then when you need to scale them, you'd have to ungroup, resize, reposition and then group again. I wish there were a better way to handle this, but I haven't figured it out yet. Any suggestions?
02/08/07 @ 12:45
i've tried downloading the updated stencil several times, but the zip fails to expand everytime — is it possible that the zip is corrupt by chance?
very nice work, by the way...
thanks,
t
02/08/07 @ 16:10
Hmmm. Sorry about that. Reuploaded the file as a gzipped archive: WireframeShapesAngeles.gstencil.tar.gz and seems to be extracting fine now. So please try again.
02/09/07 @ 07:06
fyi : after poking around a bit, i figured out that it seems to be limited to firefox (on osx) — safari worked fine...
by the way, thanks for reposting...
-t
02/09/07 @ 09:02
No problem. Glad it worked out, but strange that Firefox was corrupting the file.
02/11/07 @ 22:53
Wow, great tools. Thanks so much. I really enjoy working with OmniGrafflePro, but your tools made wireframing work out great! Cheers.
02/12/07 @ 15:55
this is awesome! it has helped out SO MUCH!
02/25/07 @ 19:00
Very nice work! it has helped out SO MUCH!
04/02/07 @ 00:43
Thanks for sharing this work. Really appreciate it. Very flexible and clean. Working with a group that uses Visio. Would like to share virtually. Understand you can save a .graffle file as a Visio file. Have you noticed any cross-platform issues?
Thanks!
Mark
04/02/07 @ 06:44
@Mark: We don't have trouble exporting from OmniGraffle to .vdx so that users can import into Visio, but we do have trouble going the other way from Visio 2003 to OmniGraffle.
04/03/07 @ 18:12
Thanks for that information. Similar problem between Keynote and PowerPoint.
04/06/07 @ 17:25
Updated so the header/footer use variables. For instance, the title uses the document file name and the subtitle uses the canvas name.
05/15/07 @ 12:43
Eep! is there an old version of this I can download somewhere? I was using the one with the orange arrows, but it somehow got corrupt.. When I download it now, the arrows are red!
05/15/07 @ 14:39
It's not corrupt. I changed color schemes because of a job I was on. I'll probably update these in a few weeks because I've added a few more controls. You can change the colors of the callouts pretty easily if you edit the stencil.
05/23/07 @ 17:32
i just downloaded your stencil - and am excited to try it. Howver, I went to place it in the ~/Library/Application Support/OmniGraffle/Stencils directory and I don't seem to have that directory. I do have a ~/Library/Application Support/Omni Group/Software Licenses directory. Should I create a /OmniGraffle/Stencils directory as well?
thanks for your help!
05/23/07 @ 18:39
Yes, Karlene. Try to create the directories in that location and see if OG finds it.
06/19/07 @ 15:48
Hi Michael,
Thanks for your work on this! These elements are perfect for the job and very well thought out. I was able to install the stencil in just a minute and I'm now using it for most of my mockups. I'm a fan of the many labels and simplified UI style, although I'd like to see the forms and sort button a little more flat / simple so that they don't imply a finished product. Thanks again!
06/20/07 @ 06:27
Thanks loads for the new version
Great tools, easy to implement and use - now that I've got the right tools i can finally get down and focus on doing the job.
06/25/07 @ 14:47
Very nice work, I like that you now have some navigation pieces in this stencil.
06/26/07 @ 17:13
Excellent- thanks! I wish I had this a couple weeks ago. :)
06/26/07 @ 18:14
Hi! This template is perfect. Very well crafted. I notice you replied to comment #10 from Mark stating that it was possible to export from OmniGraffe into Visio. Can you post this file as well? I'm unfortunately stuck with Visio.
Thanks again.
06/26/07 @ 18:22
Exported the doc as a .vdx file. Download here. I have no idea how this will turn out on Visio. My experience moving files between Visio has been poor in the past.
06/27/07 @ 00:25
What can I say? Awesome work. My other OG stencils were feeling long in the tooth.
06/27/07 @ 04:03
Now if we could only get a PC version of this, it'll be great, or even a Photoshop template ;) Thanks for the great work!
06/27/07 @ 06:54
Jacobus, check comment #23 above for the Visio file for the PC.
06/27/07 @ 08:12
You should really keep form elements grouped since it is much easier to use.
About the resizing part, OmniGraffle offers a great feature to deal with that.
Instead of ungrouping the element you just need to clic twice on it. You'll enter an editing group mode (surround fades) that will allow you to modify one element without interfering with the other elements of the group.
06/27/07 @ 09:13
Fabrice, the only form elements that are not grouped are the inputs with the AJAX spinners. Every other form element IS grouped.
I'm aware of how to select an element within a group, and use that daily. With regard to resizing, I'm assuming you're talking about the copy as PDF feature. This works for scaling large groups of things, but you'll find that it might not work as well for forms if you play around with it a little. Font sizes will scale as well, so you will have to guess at the right size to use in the original before you scale, so that it turns out to be the size you wanted afterwards.
It would be nice if Omni had form elementst that functioned more like Visio's. I liked the Windows UI palette's form elements much better.
06/27/07 @ 14:39
Oups, looks like I missed your first comment about uploading a new version with grouped elements sorry about that. I actually use a modified version of your previous set, didn't test the new one before posting.
I didn't know about the copy as PDF feature, thanks! It is indeed a great way to create an extract and put emphasis on an item by zooming on it.
I'm not sure I really understand what exactly you'd want and since I don't know Visio I have a hard time figuring it out :-)
07/06/07 @ 03:36
This seems like a fabulous program and I want it! But I'm running on PC, is there an alternative to it?
07/06/07 @ 06:41
Check comment #23 above for the Visio file for the PC.
07/10/07 @ 17:26
You mention at the top of the page that the stencil was last updated on 9 July 2007, although I don't see a version history. How about an RSS feed whenever you make an update?
07/10/07 @ 18:22
Whenever I do major updates, I blog about it. What I've done is create a new category that has an RSS feed. To be notified of updates to this stencil, you can track the RSS feed at this address. Hope that helps.
Incidentally the update this week was a minor update adding new icons. I'm not going to maintain a version history for this file. That just seems like overkill for this.
07/12/07 @ 14:07
Thanks so much for creating and providing these stencils. This is a major addition to the typical OG stencil set and a huge help for anyone who needs to create quick prototypes.
07/20/07 @ 05:39
Thanks a lot! The old stencils already were a great help, this is a very good update.
One thing: how do you wireframe RIAs (aka web2.0-interfaces)?
I'm still looking for Stencils for elements like slidein/slideout, edit-in-place, calendar selection, etc. The stuff you can find at e.g. http://developer.yahoo.com/ypatterns/index.php
Any hints?
carsten
07/20/07 @ 07:49
@einCarsten: I storyboard RIA interactions by showing change from cell to cell in the storyboard and annotating the interaction. It's a bit like showing keyframes in a Flash timeline. This is how other IAs I've spoken to document RIA interaction as well.
10/01/07 @ 12:22
10/1/2007: Updated the wireframe stencil with a few icons some friends have asked for. This update adds a few icons that have been requested and makes the icons transparent so they can be laid over colored backgrounds. The line weights will also scale appropriately when enlarged.
10/10/07 @ 17:41
Is it possible to export these items to SVG? I too am stuck on PC for now, but would love to be able to have some SVG templates like this.
10/23/07 @ 14:02
Sir, I must call you Sir
I LOVE your work and thank you
10/25/07 @ 14:38
Great templates, made wire framing really fast
11/15/07 @ 00:05
Your contributions to the design community are greatly appreciated. Thanks!
01/12/08 @ 23:30
Fantastic stencil. Thank you
01/20/08 @ 00:25
This has helped me so much with creating a cool clean look - you guys rock!!!
01/20/08 @ 11:37
Excellent set of stencil! :)
Thankyou very much. :)
01/30/08 @ 08:15
This is exactly what I looked for. Thanks!
02/04/08 @ 19:23
Awesome work. My other OG stencils were feeling long in the tooth.:-)
Thank you
Andrzej
STILL LIFE PAINTING
02/09/08 @ 15:28
Great stencils - thank you
02/18/08 @ 10:31
Hey jibbajabba. Thanks again for the pallete. I have the student version of Graffle 4 and the procedure you mentioned plus the comment #16 (creating a directory) has not worked. Should I place it somewhere else? Or is there a different procedure for that version?
02/18/08 @ 11:06
Ok. Problem solved. The downloaded file was compressed and I was looking for the stencil folder not under MY library, but the computer's library. Once the file was decompressed and installed in the right folder it showed in the Stencil menu. Awesome!
02/18/08 @ 11:59
Glad it worked for you, Andre!
02/19/08 @ 13:35
The stencil is great ... however, do you have any idea why the icons in the bottom section are all blurred in the Stencil Browser? They're fine once dragged onto the canvas -- and when I choose "Edit Stencil" -- but their display in the stencil viewer is pixellated so one can't see what the icons are.
I confirmed this issue in Edit Stencil by selecting an icon image, then in the Inspector looking at the "Canvas:Selection" and it is blurred there as well... the same as it presents on the Stencil Browser.
Any ideas?
02/19/08 @ 17:30
ben, some of the shapes are actually imported eps vector graphics from Illustrator, so they are not editable. The ones that were created in OmniGraffle are. I did some of these in Illustrator because the drawing tools are better there.
03/04/08 @ 07:29
If I want to scala the combo boxes doing so would stretch the appearance of the scrolls bars and their will look unnaturals. Leaving the elements ungroupeds lets me scale and then group afterwards.
03/04/08 @ 09:36
Tech: Yes. I agree that your need would warrant having ungrouped elements. In your case, I would edit the stencils, ungroup the elements, and save.
03/08/08 @ 12:52
Thank you! This is wonderful and so helpful.
03/09/08 @ 18:55
It's weird, but the stencil doesn't look as shown when used in OmniGraffle 5... and I think some of the objects on the stencil are missing?
03/09/08 @ 20:04
Lee Sai Fon: I just downloaded the file to have a look. All the shapes you see in the screenshot above are there. Not sure what's happening for you, but if you want, take a screenshot and email me.
03/28/08 @ 06:04
Thank you, nice stencil.
James.
04/11/08 @ 10:05
Hi, thanks for your wire frame stencil and the forum for this question. I don't know if I'm missing something when it comes to stencils. Ideally, I want to be able to edit a stencil and have it update the instances throughout my document. This does not seem to be an option. Any thoughts?
Thanks,
Pete
04/11/08 @ 20:05
I've made requests for that feature to OmniGroup. Would mimic Flash's notion of the library and instances of library objects. There is a round-about way to do this using linkback elements that are pasted as PDF.
05/01/08 @ 13:59
I am very new to OmniGraffle - working on my first project! I'm using the first tab element in the Tabs and Controls group. It seems like the first tab on the control is always selected. Is there a way to display the second tab as the active/selected tab (rather than the first)? Not sure if that is a stencil related question or an OmniGraffle question!?! ;-) THANKS
05/01/08 @ 15:14
That's implemented as a table.
To change the selected tab, copy the style of the selected tab and apply it to the one you want to be selected. You'll need to use the style brush to do this.
DO THIS:
1. Hold the W key down to enable the style brush. While holding W, now hold the Option key. Click on the currently selected tab to copy its style (click the tab, not the text). Release the W+Option keys.
2. Now while holding W (without Option) click the tab you want to appear selected.
3. Use W+Option to copy the style of an unselected tab. Use W to paste the style to the original tab.
05/01/08 @ 15:51
That's perfect! THANKS
05/03/08 @ 08:48
Great tools, easy to implement and use, made wire framing really fast.
05/07/08 @ 18:01
Thanks for the list of great tools.
05/11/08 @ 15:51
hi there,
thanks for those awesome stencils. this is perfect and just before i start some serious wireframing :)
06/10/08 @ 00:20
Thanks for putting this up. Our small startup started using this for wireframing and it's become very useful.
08/28/08 @ 09:48
Excelent, thanks!
09/04/08 @ 16:22
Great work...I have a strange problem with the stencils, though. When they show up in the OG stencil palette, they appear tiny...almost too small to discern. Any ideas for a fix?
09/04/08 @ 19:11
@Anonymous #69: You probably have to stretch the stencil out by click/dragging the corner.
Post new comment