How to Create HTML & PDF Prototypes Using OmniGraffle Pro


An important step in the Lean UX process is continuous validation of design ideas, especially early in your process. We are lucky enough to have a UI Engineer (shout out to Dan Hahn!) on our team who builds high-fidelity prototypes, but sometimes it is best for the designer to spend a few hours cobbling together that prototype and not ask the engineer to code and recode a prototype several times if testing the first design iteration.

The best prototypes seem the most real and finished to the test subject. If the user thinks your prototype is not live, the data is fake, he/she may be more forgiving and less critical. It is important that a table of data has numbers that look real, not a series of #### and that your text is not lorem ipsum. The best prototypes are built with HTML/CSS and JS, but as a designer, I do not code often enough to be able to churn out a full-fledged prototype for a complex feature in a few hours. Earlier on in your design process, when you need to validate your hypotheses and your general design direction, something more lightweight built from your design file or a paper prototype is sufficient.

In Prototyping: A Practitioner’s Guide, Todd Zaki Warfel does a fantastic job of covering the why and how of prototyping within the UX design process. He spends several chapters walking through prototyping with various tools: Powerpoint, Keynote, Visio, Fireworks, Axure RP & HTML. What he misses is OmniGraffle Pro. It is mentioned briefly, but never fully explained.

On the AppNexus User Experience team, we use both OmniGraffle and Adobe InDesign to make wireframes, depending on the designer’s preference. I’ve been partial to OmniGraffle – it’s lightweight and very nimble. OmniGraffle is relatively intuitive and fast to learn through the great introductory tutorial videos offered by OmniGroup, but there is not too much available beyond those videos and various other blog posts like this one.

Three Ways to Make Prototypes in OmniGraffle

1. Presentation Mode in OmniGraffle
OmniGraffle’s built in presentation mode is really great for presenting your designs, but it is not so great for usability testing your prototypes.

• Use all of the fancy built-in “Action” choices in OmniGraffle, especially the ability to show/hide/toggle layers on click.
• Fewer steps to make edits and easy to animate your interactions from within OmniGraffle by holding down the ‘B’ key or selecting the browse tool.
browse toolbar

• By default, it shows outlines of the objects that are clickable as the user rolls over those objects with the cursor.
presentation button highlighted
This gives away the intended functionality. You can turn off this feature by going to OmniGraffle Pro > Preferences > Presentation and select “Don’t highlight objects” for the “Highlight Behavior.”
• Without the highlights, the presentation mode looks more like a prototype, but the cursor won’t change from the pointer to the hand when the user hovers over a link. And it’s hard when observing the test to see what page the user is jumping to.
• The presentation mode takes over the entire screen and will not feel like the user is operating in the context of their normal browser.
• Only works on the designer’s computer or a computer that has OmniGraffle Pro already installed.

2. PDF
• Very universal format.
• Looks somewhat interactive, jumps to new pages very smoothly.
• Can only use the “Jumps Elsewhere” action to move to a different Canvas.
• Can be opened in the browser, but it’s likely the user will launch the file in a PDF viewing application like Adobe Reader or Apple’s Preview

• Opens in the browser
• Feels most like a “real, live site” – I’ve had test subjects ask me if they could start using the feature right away because it looked so real.
• User may jump to browser back and forward buttons rather than your designed navigation during a test.
• There isn’t an easy way to see all of the available pages/site map. (But this makes it more like a real interface!)

Creating the Prototype
1. Before starting the prototype, diagram your user tasks for the test in a simple flow diagram

2. Create a new OmniGraffle document
3. Put any universal elements that will not change at all in the prototype on shared layers.
4. For each state of the prototype (e.g. box checked, item selected, etc.), create a separate canvas.
5. Select an object you want to make interactive using the selection tool (Keyboard shortcut: ‘V’ key)
6. Show the “Properties” Inspectors: Keyboard shortcut: Command-2 or Inspectors Menu > Properties
7. Choose “Action” – the third icon from the left.
action inspector
8. Select Clicking with the Browse tool “Jumps Elsewhere” and “Switch to a Specific Canvas”
9. Choose the Canvas with the desired result/end state of the action. So if you are checking a box, the canvas you jump to will have the checked box.

This process is fairly cumbersome, but it’s still often much faster than coding, depending on how complex the interface is.

Resources for learning more about OmniGraffle
Nick Finck’s OmniGraffle 5 Keyboard Shortcuts: I have this printed and sitting on my desk for daily reference.
Konigi’s various stencils: The Konigi wireframe stencils have been my primary tool for creating wireframes for two years.
Twitter Bootstrap stencils
Graffletopia stencil library

This entry was posted in Uncategorized. Bookmark the permalink.

  • Praveen

    Hello, I am an user experience professional and have used omnigraffle in my projects. This is a perfect tool to do wireframes but only big disadvantage was its available only for Mac. Microsoft PC’s cannot use this lovely tool. This would be a very good tool if its available for PC as well.

    • Julie Blitzer

      Check out the chapters on Vizio, Powerpoint and Axure RP in Todd Zaki Warfel’s book on Prototyping:

      If you aren’t comfortable prototyping in any of those yet, just resort to paper prototyping. You can learn a fair amount by asking a user “Where would you click” and having him or her touch the paper.