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, 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.
[...] 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 ) [...]
i was having trouble opening the template in OG 4. I renamed the file extension to .graffle instead of .gtemplate and it worked fine.
I am able to use these templates with OmniGraffle-5.0
Thanks!
@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.
These look amazing, however what's the meaning behind the numbers 1-24 at the top of the wireframe template?
@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.
[...] also have a OmniGraffle UX template for User Experience Designers with formats you’ll need most for interface and interaction [...]
This template is so incredibly useful. Can't thank you enough!
Thank you, very useful.
[...] 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″.” [...]
[...] OmniGraffle UX Template | Konigi (tags: design web tools reference resources webdesign usability architecture templates omnigraffle template) [...]
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
@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.
[...] OmniGraffle UX Template | Konigi [...]
[...] 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 [...]
AMAZING - thanks.
[...] wireframe template [...]
[...] Document Templates [...]
The template is incredible and I am very thankful.
Thank you!
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.
Thanks, Shoden. I'll correct the link in a future release.
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
@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.
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.
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.
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-
Wow! This will be very helpful. Thanks, JibbaJabba! :)
You are the best
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?
@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.
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
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?
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.
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.
Hi JibbaJabba,
I use OminGraffle 5 (not Pro). The problem is that I can't unlock "Head/Foot" shared canvas :-(
MANGAJIN: This template is formatted for use with OG Pro. I believe the standard version doesn't give you access to shared layers.
Just the best! I owe you money :) Feel free to remind me.
Cheers!
@jibbajabba I actually have made that features request to the Omnigraffle team. There has to be an easier way to do your notes. Right now, it's so time consuming to drag and drop the icons, then go back and do the notes, while clicking into every icon to change the number of that icon.
I know someone wrote a script for Omnigraffle that does that very feature; changing the numbers as you lay in new icons. However, it doesn't apply to just any icon from the stencil library, only icons provided in the script, which are useless now that we've come so far.
Maybe you can look into that script and adopt it for your icons, which would be better, that's for sure. The script is old and was written for an earlier version of OmniGraffle, but I don't think has been updated in years.
Here's the URL: http://www.petermcm.dircon.co.uk/software/og_number_shapes/index.html
One more question...
How did you indent your paragraphs in the "blog" section of the canvas? I'm trying to follow your rules here, but it's so frustrating because "TAB" just pushes you somewhere else and I would hate to just use the space bar to set indents.
Thanks.
Tony, try Option-Tab. If you also do CMD-R, you'll see rulers so you can control indent widths.
Thanks, that worked for me. Much appreciated.
Great stencil- much appreciated.
I didn't even realize this existed- maybe it should go on Graffletopia too?
Thank you very much for a lovely set. Will give props and spread the word about Konigi!!!
As always, thanks for the very useful template. We've conversed here before, but I have a few more questions.
Are you going to create something vertical to print on legal size paper the full, extended page of a site, 8.5 wide and 14 height--instead of 14 wide by 8.5 height.
Right now, I'm using the 2-Up page. The left pane would be almost half the web page and the right side would additional elements that would be well down the page.
This would be useful for news or sites that rely heavily on information presentation, than things that simply have a header, center content section mainly above the fold and some elements in a row below the fold, and then the footer.
If I'm trying to use the grid and adhere to the pixel perfect height/width, I run out of room and have to break up the page into two. It's hard to show a client something that's disjointed like that.
Also, are you going to expand the template to 960 width instead of 950? Hard to use the 960 Grid system with something that's 950 wide, LOL.
Let me know. Thanks!
Tony, I actually have a template that I use for prototyping that is in portrait orientation, but I'm not thinking of posting it really since there's not that much to it besides formatting the viewport and page size. Regarding width, are you doing pixel-perfect stuff in OG? I've always maintained that the number of columns is useful, but I don't do visual design in OmniGraffle, so it hasn't mattered to me what the end result will be in terms of real dimensions.
Hi Jibbajabba:
Yes, I am trying to do pixel perfect stuff. When you're working with an Indian dev team all day, perfect pixels can be a god send. I'm kind of playing a design role in the sense that I am using colors in my sketches and trying to layout sites how they would look when built.
They are very exact with what you give them. Now that there seems to be a nice migration to 960 grid systems, which I'm a fan of, I guess, because there's not much else out there to lead the way, I think it's important to be as detailed as possible, but that's just for me. I'm not saying that anyone else should follow my lead, by any means.
Yes, I can set it up myself, which I'll do. I'll also have to go to portrait myself, since the option isn't avail here.
No worries...gotta do what you gotta do. Thanks!
BTW...I LOVE THIS SITE! So...thank you so much for doing all this work. It's pretty amazing stuff.
Tony, I hear you. When I do wireframe iterations after a visual design has been established (we're talking app design) we're basically doing design specs sans color.
For what it's worth, my UX template does 24 columns to adhere to Blueprint. Sorry.
What can I say, you are a very generous individual to create these resources and share them with us for free.
Thankyou, it is very very much appreciated.
Ja danke ..
find dass super alles gut erklärt hat mir sehr geholfen die beschreibung..
- -)
so genau umschrieben musste jede beschreibung beiliegen.. ;-)
Gruß Matze
Konigi,
Thanks for sharing these templates and styles. I've also downloaded the wireframe stencils, which I'm excited to try. I was on the fence about Omnigraffle because it's not cross-platform, which means only our Mac users in the office can use the software, but your work makes creating IA docs so much easier that it's worth the $$ for Omnigraffle.
Mangajin, thanks for asking about the title. I was having the same issue.
Might see if I can fix that script sometime to fit in with this. Impressive template! It's not been updated in years because nobody asked for any updates yet! ; )
Comments