Templates & Stencils for Visio & Omnigraffle

Friday December 2, 2005 / 33 Comments

Wireframe Template

The wireframe template includes pre-created backgrounds and grids for both legal and letter size pages. Additionally, it includes an example form layout. The title of each page mirrors the name of the page in your drawing explorer window in Visio. The date, author, and page numbers in the footer update automatically as well. It's pretty simple, but it saves a little effort, and they look nice to boot.

Wireframe Stencil

The wireframe stencil focus mainly on form design by including a variety of form fields and common form elements. Specifically, it includes radio buttons and checkboxes that enable you to easily switch their state. Just right-click a radio button or checkbox and you can specify whether it appears as selected, checked, enabled, or disabled. There's also a convenient annotation item created based on Dan Brown's Tutorial at Boxes and Arrows.

Page Description Diagram Template

Also inspired by Dan Brown, the PDD template is an incredibly enabling tool for planning or strategically designing pages without focusing on layout. These tend to be much more useful for content heavy sites or critically analysing which bits of content or functionality really belong on a given page.

Site Map Stencil (and Template)

The site map stencil is great for creating site maps or process flows. There's not much more to it than that. As it was heavily influenced by Jesse James Garrett's visual vocabulary, I suggest you go there for additional explanation and ideas. I tend to use these for process flows mroe than site maps, but they work well for either.

Omnigraffle Versions

Not surprisingly, Omnigraffle is a bit different from Visio. Either I'm not familiar with the intricacies yet, or it's not quite as full-featured as Visio. Either way, the Omnigraffle stencils and templates are a little different than the Visio versions.

There are two versions of the wireframes stencil in the Omnigraffle zip. One version, Wireframes 3D, is the attempted translation from Visio. Unfortunately, Omnigraffle doesn't scale the elements well due to the way they are built, so I had to include several different sizes for each element. The second stencil, Wireframes Vector, was built completely in Omnigraffle and scales fine. However, the elements are not as visually realistic as the others. I went ahead and included both so you can take your pick.

Lastly, I haven't created site maps in Omnigraffle yet, so I don't have a stencil or template for those. I didn't want to import this from Visio because I felt that a custom Omnigraffle version would be significantly better, and that they are easy enough to create out of the box. Good luck, and enjoy!

Downloads

Visio

Omnigraffle 4

Omnigraffle 4 (52 kb zip)

Thanks Garrett. I’m sure these would come in handy.

Sherwin Techico

Thanks.

Nick Dominguez

Hello! Stumbled upon your site and am really impressed. I am having trouble downloading the Visio templates, and I’d really like to take a look at them. Email me if you can I would really appreciate it.

Thanks. and great work.

Ryan Baillargeon

Looks great – and I hope also, that you could bring the download to work :-)

Have a nice day!

Herbert

I am happy you got these out there Garrett. These are going to come in quite handy. Now I just got to get some time to do mine for OmniGraffle, Visio, and ConceptDraw.

Nick Finck

Love the Wireframe Template. Much better then what I used to use.

Thank you very much!

Raanan Avidor

Hey Garrett, Thanks for the acknowledgements. The tools look great! I’ve been posting some random Visio tutorials to my site occasionally. Check ‘em out.

Dan Brown

Waiting with baited breath for the Mac version!

Marilyn Langfeld

Thank you Garrett, it’s really usefull for web designer. In my point of view, this way of elaboration and communication is better than any kind of Use Case or UML diagram. Some examples could be also nice to have ;-)

Frederic Vandaele

Thanks Garrett. I never thought that peresenting my ideas could be this easy.

Ilija Studen

Awesome set of tools. Far more easier than the Photoshop elements I have been using for years. Thanks!

Brian

Thanks! Already looking forward for more stuff!

Gstfssn

Thanks Garrett! These are very cool!

Adrienne Allen

So so good. I use Omnigraffle and Outliner daily. Thanks for the additional tools – I will put them to good use!

Seriously, You ROCK!

Melyssa Lipsey

I am not sure why, omni 4 does not let me edit the title where it says Main Page, nor the footer.

Am I missing something?

Bruno

Bruno – The value for the titles comes from the layer names automatically.

Garrett

Hey,

I found your templates via Google. They look brilliant. Just had one problem – the Wireframe stencil was not loading, it opened and looked empty. The fix was just to right-click it, go to properties and then click the “unblock” button. The button shows up when Windows XP thinks content has originated on another machine and is potentially unsafe.

Mark

Hi,

I have downloaded Visio2003 template but unable to open the zip file. It says:

WinZip

Cannot open file: it does not appear to be a valid archive.

If you downloaded this file, try downloading the file again.

OK Help

Nilesh

I too cannot open the 2003 or XML files. I am using WinRAR. If oyu could check em it would be great.

Thanks

Joe

ither I’m not familiar with the intricacies yet, or it’s not quite as full-featured as Visio. .bq

Are you running OmniGraffle 4, or OmniGraffle 4 Professional? There is a huge difference between the two in terms of feature set. I’ve found OG4 Pro to have a lot more going for it than Visio.

Davezilla

have you created stencils for ConceptDraw WebWave
(www.conceptdraw.com/webwave)

pechenka

Joe – Nilesh eventually managed to get the files open with no changes on my part. I’ve downloaded them and opened them fine on both Mac’s and PC’s. I wish I could be of more help, but all I can suggest is to try again. Maybe use winzip instead of WinRAR.

Garrett

Thanks

fd0

Hello Garrett . Its a great design and idea. Must have ! Thank you

Natali

great work here! stuck offline most of the time in a small cabin in southern sweden and somehow stumbled across this…

also, excellent use. design evident here! braaavo!

David Scott

in the link to Dan Brown you have .com// (instead of merely /) which kills the hyperlink

Stephen

Thanks Garrett.

Nemanja

These are so useful. It’s interesting to see how people wireframe their sites.

Andrew Faulkner

Great site, Garrett! I stumbled on a link to your site from The Moleskin homepage (www.themoleskin.com). It’s great you’re sharing your knowledge this way..

Best regards…

Carl Amoth

re: scaling in OmniGraffle

See the OmniBlog for the details, but essentially, if you cut and paste an object as PDF, then it will scale correctly (eg the stroke and text remain proportional to the object size), but when you double click it you can still edit it due to the power of Linkback. Neat.

Andy

Thank you. It is very useful.

Dugu

You Take the Point

Sergio Andrade 666

Awsome set of tools. I will link to this resoursce. Thank you.

Mihalcea Romeo

Comments are closed for this entry.