Template last modified 26 March 2007.
This web design template for OmniGraffle Professional provides the basic layout for a design deliverable including the following master canvases: document title, section title, wireframe (portrait and landscape), storyboard, and blank. The wireframes were created at 950px wide with guides following the Blueprint CSS Grid system. Wireframes also have 2 small hairline marks around the 600px point to mark the approximate fold.
Installing
1) Download and unzip the file UX-Template.graffle.zip to your ~/Library/Application Support/OmniGraffle/Templates directory.
2) Open OmniGraffle and select File > New from template. You should see the template in the list of options.
About the template
This document was created with dimensions of 22" by 34" so that you may work at 100% and present or project your schematics at anywhere from 950px wide to 1200px wide in landscape mode. The Best way to print documents from OmniGraffle is to export the file as a PDF and then print the PDF allowing Mac OS X to shrink the file to the printer's page dimensions. The shrunken page should look fine at 11 x 17 inches or 8 1/2 x 11 inches.
Please note, you will not see Canvases in the Utility Drawer on the regular version of OmniGraffle. This template is only useful to owners of OmniGraffle Pro, and was created in OmniGraffle 4.x.
Using the template
When you open this template, OG will create a new untitled document for you. If you don't see the Utility Drawer, open it up by selecting View > Show Utility Drawer (Control-Command-T). In the Utility Drawer, make sure the Canvases tab is selected.
The Canvases tab shows you Master canvases at the top, and Individual Canvases or Layers (i.e. pages in your document) at the bottom. You use the bottom panel to create new pages in your document. If you're familiar with Appe's Keynote, this interface should make sense to you. The Masters are applied to individual pages you create in the Canvases area below -- drag Masters onto Canvases to apply. If you're coming from the Visio world, Masters are the equivalent of background pages and Canvases are the equivalent of Pages.
This template is intended to be used together with the Wireframe Palette. I've created 5 typical sample pages/canvases that you might use in your deliverable. You may also be interested in the Greeking Stencil for placement text.
Purchase OmniGraffle Pro
This template requires the Professional version of OmniGraffle. You can purchase Omnigraffle Professional 4.0
Comments
08/26/06 @ 13:39
Thanks Michael!
09/28/06 @ 21:23
Thanks -- great stencils - and I appreciate the explanation pages.
10/30/06 @ 14:51
Great template! How do you change the project nameaeht top of each page? I'd also like to change the default wireframe on page 5. I couldn't figure out how to edit or delete the top menu bar and search field. Thanks!
10/30/06 @ 15:10
You can change the project name by editing it in one of the master templates. To do this:
1) Open the Canvases and Layers utility drawer by selecting Inspectors > Canvases and Layers or Cmd-Shift-K
2) In the Master Canvases area, select the Title Master. Double click the "Project name" text that appears in the work area. Do the same for the Wireframe Master.
Please note that you can only view Master Canvases in OmniGraffle Pro.
11/02/06 @ 17:58
I'm having some trouble with the instructions--I only see "Outline" and "Layers" in my Utility drawer and no Master canvases. Are the instructions for the standard version of OmniGraffle or for OmniGraffle Pro?
11/03/06 @ 15:48
Alicia, I discovered that the normal version of OmniGraffle doesn't have the Canvases feature that lets you do multiple pages. My template wouldn't be much good to you, because the purpose of this template is just to give you a few sample pages to get started creating web design documents in OG. So I decided not to upload that version as it only would contain the title page.
I would highly recommend upgrading to OG Pro or at least downloading the trial version and trying my template in that to see if it's of any value to you.
12/09/06 @ 15:07
Dude. You are my hero. Visio is no longer an excuse to boot up the PC in the corner. Thank you so much!!!
02/16/07 @ 16:00
Thank you for the great stencil! Can you tell me how to magnify it when I'm looking at it through OG stencil widget? It's very tiny and I can't figure out how to zoom in. Thanks!
02/16/07 @ 18:03
@Katharine: You need to click and hold the bottom right corner of the stencil window and drag it to resize the palette.
04/21/07 @ 01:28
Curious... do you have a sample already filled-out version of this somewhere? It would be neat to see how you're using this on one of your projects!
04/21/07 @ 08:09
Here's the output of a doc (using the template) for a very small freelance project I did last year.
Click the image above to see it larger. I can't share the doc, but you can get an idea of how it might be used. It's very useful when working on huge docs.
05/03/07 @ 22:56
I found your templates through a quick Google search. I downloaded them, and just tried to get started. Very easy to use. Fantastically helpful. What a time saver! Thanks so much for your generosity in making these available.
06/28/07 @ 13:45
I love your stencil for wireframes, and just purchased Omnigraffle Pro to start using these features. However sadly the template available for download on this page doesn ot work for me in the most recent pro 4 version. Other templates I've downloaded from other sites do, for the most part.
Could yours be a little out of date?
I compared the source xml in bbedit between yours and one that did work - they looked different but there are probably a variety of reasons for that.
Thank you and I would love to have a copy that works if possible.
06/28/07 @ 14:12
Db, the file worked fine for me when I tested it just now, but I just re tarred/gzipped the file and uploaded for you, so please try again. -m
06/29/07 @ 16:51
Well thank you for testing it. It's very strange. I downloaded the new version from this page as well. It opens at 252 KB. But when I open from template in OmniGraffle or even double click the graffle itself to try to look at it I get a blank Canvas.
The only other graffle that I've downloaded that also doesn't show up is the MySQL Schema http://www.graffletopia.com/stencils/30
I've successfully got these other wireframe graffles showing up (among many others downloaded from the OmniGraffle site), http://v1.garrettdimon.com/files/resources/ia_tools/Omnigraffle_4.zip
But I was really interested in yours. I wanted to see how the pages could be linked together and I like your design sense.
I wonder if I should file a bug report with OmniGraffle about this. I just bought the latest pro version yesterday.
06/29/07 @ 17:15
Hmmm. Strange, Db. I really can't figure out what's happening for you. The file is indeed 252K, but you should see a document as in the screenshot above. I wish I could help further, but not sure what else I suggest at this point. Really sorry about that.
08/21/07 @ 19:27
Db, I had the same problem and it's not OmniGraffle or Michael's template. I think it's Stuffit Expander. CTRL Click on the tar.gz file and extract it with Apple's BOMArchiveHelper and see if it works.
11/02/07 @ 07:22
This is great - thanks!
One question about the orientation of the wireframe page. While all the other pages are landscape, the wireframe page seems to want to be portrait - which causes some of the pre-formatted text to disappear off the right edge. Is this just me, or is it intentional?
Thanks.
11/02/07 @ 08:34
drgardner, somehow the page orientation got screwed up. I fixed it to be landscape and re-uploaded the doc for you. If you to fix the one you have, just change the orientation on the wireframe master to landscape.
11/27/07 @ 21:30
Thank you so much for sharing these excellent and very useful resources!
01/30/08 @ 20:28
Great post! Thanks for the sharing on web design template for OmniGraffle.
01/31/08 @ 07:33
Great stuffs. Thanks so much for the contribution.
02/09/08 @ 10:57
Thank you for the excellent content and template.
03/26/08 @ 11:17
Thanks Michael - you rock. For those who are interested - for various reasons I had to upgrade to OG5... (l love that OmniGraffles intials are OG by the way) - and will say that "shared layers" while initially confusing are a very cool upgrade/addition. M - some good stuff coming your way this week, I think T's are finally back in stock.
@korf420
03/26/08 @ 11:28
For Db.
I just opened the templates in OG 4 and 5 and it works perfectly in both. Thanks for sharing MA.
03/27/08 @ 17:04
Interesting, this is the third version you've posted if I'm keeping track. :)
Long time fan ... thanks for sharing. I like the old one "WebdesignDocumentAngeles.graffle" too since it sets up the persona overview grid.
Robert
03/27/08 @ 17:07
robert: Yeah, you might be right. I'm just keeping the documents up to date with how I continue to tweak and evolve my process and deliverables. I did get rid of the persona grid and any of those little stickies that suggest what you can put in the document besides wireframes and storyboards. Not sure that's really helping anyone. Perhaps if that's wanted, I'll put up a separate stencil for that. I don't know.
04/04/08 @ 21:06
It's not surprising that the pro version of OmniGraffle is superior to the other version. That's often the case when you buy graphic software. It's best not to cheat yourself of superior benefits even if there is a cost involved.
Post new comment