Made for web designers
OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs, e.g. title page, wireframes, storyboards. Grid with guides keeps your layout tight. Sized to work in 100% at 1:1 ratio in terms of pixels&emdash;the wireframe is 950px wide 30px cols. To print, export to PDF and scale to fit. In presentation mode, you'll be showing true pixel dimensions.
Installation
1. Download the template.
2. Move it to your ~/Library/Application Support/OmniGraffle/Templates directory. The ~ represents your user "home" folder.
3. Download the diagram style
4. Move it to your ~/Library/Application Support/OmniGraffle/Diagram Styles directory.
Download for free or donate
Download Version 2.4 (4/27/09)
Download Diagram Style for Sitemaps
This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.
Frequently Asked Questions
Version Information
More Grid Tools
To make the most of this system, a designer can complete their process by using other templates and tools that utilize the same grid system, such as printable graph paper, grid notepads, an OmniGraffle wireframe template, Adobe Photoshop template, and Adobe Illustrator template.
Purchase OmniGraffle Pro
This template requires the Professional version of OmniGraffle 5. You can purchase Omnigraffle Professional 5 from Amazon.
Comments
08/28/08 00:01
[...] OmniGraffle UX Template | Konigi "In this template you'll find shared layers (masters) for a title page, wireframe, wireframe/storyboard hybrid, simple storyboard, and storyboard with notes. Column guides and a regular grid make it easy to use and keep your layout tight." Nice .graffle templates for UX designers. (tags: design ux omnigraffle template layout prototyping ) [...]
09/16/08 12:25
i was having trouble opening the template in OG 4. I renamed the file extension to .graffle instead of .gtemplate and it worked fine.
09/16/08 14:25
I am able to use these templates with OmniGraffle-5.0
Thanks!
09/16/08 15:38
@Brian Mulloy: Thanks for the tip for OG4 users. OG4 is a superior interface in many respects, so I'm glad people are still able to open it, but unfortunately because of the redesign to use shared layers, the masters will not work out correctly. You won't have combinations of masters, so you won't see the header/footer on each, for instance.
09/29/08 23:16
These look amazing, however what's the meaning behind the numbers 1-24 at the top of the wireframe template?
09/30/08 01:49
@Tony Summerville: Ah, the numbers. Most frequently asked question on the UX template and in the wireframe graph paper. Those are column numbers for a 24-column grid layout, which allows you to divide the wireframe in common divisions of 1/4's and 1/3's, e.g. 25%-75%-25%, 33%-66%, 50%-50%, etc. Turn on guides (View > Guides) and you'll see guide lines for the columns. If you don't need these, just remove them from the shared layer.
10/01/08 14:40
[...] also have a OmniGraffle UX template for User Experience Designers with formats you’ll need most for interface and interaction [...]
11/06/08 18:52
This template is so incredibly useful. Can't thank you enough!
11/08/08 13:09
Thank you, very useful.
11/17/08 18:04
[...] The Free Download: “Made for Web Designers. An OmniGraffle Pro (version 5) template for User Experience Designers with the formats you’ll need most for interface and interaction design. The doc is sized so you can work at 100%, and print at 8.5″ x 11″ or 11″ x 17″.” [...]
12/21/08 00:32
[...] OmniGraffle UX Template | Konigi (tags: design web tools reference resources webdesign usability architecture templates omnigraffle template) [...]
12/28/08 16:34
Hi,
Thank you for sharing this.
It looks pretty useful but I'm not sure about the best way to use it... Would you have a practical example?
Thank you
12/28/08 22:09
@Abernier: I don't have practical examples of the document that you can download, but I am working on an article to show how to use these as well as my wireframe stencil. If you watch this site, you'll see it in the next few weeks.
01/24/09 00:26
[...] OmniGraffle UX Template | Konigi [...]
01/29/09 08:07
[...] the like, so I can't > advise you on that. Actually I'm trying to create something like these: http://konigi.com/tools/omnigraffle-ux-template Of course, I can create all those elements as a shapes and align (texts etc) those with shape data [...]
02/13/09 05:54
AMAZING - thanks.
03/10/09 08:48
[...] wireframe template [...]
03/10/09 13:32
[...] Document Templates [...]
03/13/09 04:15
The template is incredible and I am very thankful.
03/15/09 20:29
Thank you!
03/18/09 20:33
Just an FYI, I get a 404 when I follow http://konigi.com/tools/omnigraffle_web_design_template which is the link under more information in the title page of the template when I open it in OG.
I believe it should be going to this page.
03/19/09 11:46
Thanks, Shoden. I'll correct the link in a future release.
03/30/09 14:53
How do I export without including the Master Elements canvas? It gets included even though the non-shared layers aren't printable and if I remove it post-export the pagination is incorrect.
Thanks for the great template.
Derek
03/30/09 15:43
@DEREKVAZ: That Master Elements canvas needs to be removed before exporting. The reason I have it in there is because of OG5 got rid of real masters, which many of us have been complaining about ever since they introduced shared layers, but I still need to have the concept of masters available in my documents. I can't think of a better workaround than this unfortunately.
04/08/09 02:00
Hi JibbaJabba... was wondering if you ended up writing up a guide for practical use of this template (as you mentioned at in your comment of 12/28/08 22:09). This looks like a great template, but unfortunately I am a bit of a newbie at Omnigraffle, and could use a really good article on the best use of this template.
Cheers.
Andrew.
04/08/09 02:37
ANDREWG: I've outlined an ebook, but have had some delays in getting to writing because of some redesign on this site. That will be one of the first chapters I take on probably, and I'll be writing the book in the open here on this site.
04/20/09 22:15
Hello,
Thank you for your tools - I know some work went into these and they are great - I downloaded both of the OmniGraffle tools and the estimator (just what I was looking for) and I just gladly donated to show my appreciation. If others haven't already, I encourage them to do the same.
Thanks again,
-Rod-
04/27/09 18:07
Wow! This will be very helpful. Thanks, JibbaJabba! :)
04/28/09 21:12
You are the best
06/08/09 02:59
This is a great template. I have been using it for some time now on all my wireframes for our clients. I see that you migrated from using images as numbers for the annotated notes and set up two columns for notes. Why the change?
Do you think Omnigraffle will ever get so powerful as to allow you to right-click and add a note to an element on the "stage," then subsequently add a corresponding note area to the right of the stage? I find the process of annotations difficult because of all the copy and paste to keep the fonts consistent. It's tiresome. Are there any easier ways to annotate?
06/08/09 18:00
@Tony Zeoli: I've personally switched to using text only in annotations because it's faster. But doesn't mean you have to. Just modify the text blog margins.
Re: your question about adding notes to elements and filling in notes on page: You should make a feature request. That would be pretty cool.
06/25/09 13:55
can any one tell me how to change the title of the wireframe? For example, in canvas called 'wireframe' 1 up, there is 'Title of your document go here' on the top left corner. So i did click at the object trying to unlock so that i can edit the text. However doesn't work.
Thanks
06/25/09 14:12
I must be a big dummy. I can't figure out how to properly export to PDF and print on 11x17. When I open the PDF in Adobe Reader, it says the document dimensions are 49.82 x 31.84. In page setup, I choose tabloid and 100%. In the print window, both 'Fit to printable area' and 'Shrink to fit printable area' show a preview with lots of whitespace on the right and bottom of the page.
Can't this be printed so the content fills an 11x17 sheet?
06/25/09 14:57
Clint, it should print easily within 11x17. Have you tried this?
1) In Omnigraffle, Export > PDF. (I think this is the right menu. Am not at a Mac right now.)
2) Open in Preview rather than Acrobat, and in print options, select Tabloid and shrink to fit.
This has always worked for me. Believe me, I've had moments where printing large made me feel inept too.
06/25/09 15:01
Mangajin, I'm assuming you're using OmniGraffle 5 Pro, right? If that's the case, click the expansion arrow for the canvas to expose shared canvases. Unlock the "Head/Foot" shared canvas. Then double click the "Title of your document goes here" box to edit it. It should now be renamed in any canvas that uses that shared canvas.
06/29/09 10:45
Hi JibbaJabba,
I use OminGraffle 5 (not Pro). The problem is that I can't unlock "Head/Foot" shared canvas :-(
06/29/09 10:48
MANGAJIN: This template is formatted for use with OG Pro. I believe the standard version doesn't give you access to shared layers.
07/01/09 19:15
Just the best! I owe you money :) Feel free to remind me.
Cheers!
Post new comment