OmniGraffle

When I finally switched to a Mac, I discovered OmniGraffle. It is lovely. No more Visio headaches and for me, I’ve found it to easier to learn and use than Adobe Illustrator. Plus maybe given the lower-cost point for OmniGraffle, there seem to be many more stencils, templates, and useful materials to get you up and running.

And for what it’s worth, I’ve found the extra $100 or so to get OmniGraffle Pro versus OmniGraffle Standard [http://www.omnigroup.com/applications/omnigraffle/provsstandard/] have been very worth it. Pro includes Tables, Presentation Mode, and Shared Layers which can be really handy for rapid prototyping of RIA applications especially.

Here are OmniGraffle tutorials, stencils, and assorted tips I’ve found useful. Enjoy!

A Few of OmniGraffle Features

  1. Canvases, Layouts, & Layers – Some powerful options to help you organize your wireframes / rapid prototype and change things in one fell swoop to show / hide items. Master Layouts let you create wireframe elements you want to include on every page. (Though I have yet to figure out how to not count the Master Layout canvas in page count, so end up deleting each time I print / export). Canvases, Layouts, and Layers are worth learning about in tutorials / playing around. I didn’t and missed the ability to use Layers which would have saved a lot of time as pages / elements shifted and needed to be moved to different canvases.
  2. Export – This may be my favorite feature by far.
    OmniGraffle Export Options

    OmniGraffle Export Options

    You can export your files as PDF vector images, among other things. This gives you flexibility to export it as a non-graffle file that you and your customers can print on any scale paper you want really. I use this and print 6 tiles per sheet on 11×17 to make talking through the story easier. Maybe you could do this Visio, I don’t remember. If it was there, it wasn’t easy / obvious to me.

  3. Actions – Assign actions to elements, like what you did years ago with PowerPoint, but better. Combine this with Presentations mode and you can do some rapid prototyping to show customers.

Tutorials

Stencils

Templates

  • Konigi’s UX Template [http://konigi.com/tools/omnigraffle-ux-template] – Really great template, complete with shared / master layers, a great way to start learning. Free, but so worth a donation in the time it will save you in getting organized and running.
  • OmniGraffle Extras [http://www.omnigroup.com/applications/omnigraffle/extras/]

Tools / Reference

  1. Nick Finck‘s OmniGraffle 5 Keyboard Shortcuts Reference Sheet DMG [Screenshot @ http://www.nickfinck.com/blog/entry/omnigraffle_5_keyboard_shortcuts_cheat_sheet/ ; DMG @ http://www.omnigroup.com/applications/omnigraffle/extras/]

Assorted Tips (aka Things that Will Annoy and Confuse You)

  1. Blurry text – I noticed this mostly on labels and sidebars in wireframes when I hadn’t set a fill color. Add a fill color to the text box and usually that fixes the issue. You can set the default for text boxes too:
    • Open your Style Inspector (Inspectors > Styles or Command+1)
    • Hold down the Option key and click the Text button in your Tools bar
    • Go to Style > Fill in the Style Inspector
    • Check the Fill box. Voila!
  2. Change keyboard shortcuts via Konigi’s tips. As noted there, the Shift-Cmd-G shortcut to Group objects may just drive you bonkers. [http://konigi.com/notebook/omnigraffle-tip-change-keyboard-shortcuts]
  3. Change Text Box margins – This is helpful to keep things aligned, especially in boxes with fill colors when you want the box to include some padding. Select your Text Box, then go to Style Inspector > Style – Text and change the values for Side Margin, Top/Bottom Margin, and Leading and Kerning there.
  4. Add document author – If you like to include metadata like author, subject, etc. before you export to Word, PDF, and other formats, go to the menu bar > Inspectors > Document > Document (or just Command + 4) > click on the blue Inspector icon, then Authors, and add an author
  5. Use variables to auto-update things like dimensions, filenames, etc. – This feature is so handy, especially when you’re using master templates (available in OmniGraffle Pro). Let’s say you want all your wireframe boxes to show the width / height dimensions. Double-click in the item (to get the text option for the box to appear), then go to Edit > Insert Variable > Width / Height. Voila. The variable options in the menu willl only appear when you have a text box or have double-clicked a shape to signal you want to add text to it.

Forums

My Delicious Bookmarks

I don’t always remember to bookmark resources I find, but have saved some and will try to be better about it. So in case you’re interested:

Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>