I build wireframes in all shapes and sizes. Some take the form of sketches in my Moleskine while others demonstrate higher fidelity- typically using Omnigraffle. With the advent of all of these mockup sites that allow you to link one “page” to another the same can be achieved with good old fashion Omnigraffle.
Why Link?
Linking screens are like discovering transitions in writing. From sentence to sentence and paragraph to paragraph you find little disruptions, rather opportunities to make your idea easier to comprehend. In our case we’re making the flow of information from screen to screen easier to comprehend and use. Remember there is an impression from one screen that follows the user to the next. If the next screen doesn’t provide enough information to confirm that it is the correct screen then it leads to: pogo sticking, frustration, and ultimately abandonment. You can’t see these issues and opportunities without linking your wireframes.
Also, and more obvious, is that linking makes your wireframes easier to use as a testable prototype. You can set up divergent paths, exception cases, all by refining your views. It’s great for running scenarios. And it makes your test a bit more real.
How to Do It
Linking pages in Omnigraffle 5 is quite easy.
- Select an Object (it can be text or an image)
- Navigate to Properties/Action (Command 2)
- Select: Jumps to Elsewhere/Switch to a Specific Canvas/”Pick Canvas Name”
That’s it. Save the document, and export it as a PDF or run the Presentation Mode and you can begin clicking away.
Tip Alert!
These tips have saved me lots of time.
- When setting up your global navigation, make sure each category label is individual so you can link it properly. You can’t draw a box around a single string of text and set links.
- Make sure your header and nav items are “Shared Layers”. It will make linking much easier.
POST A NEW COMMENT
CATEGORIES
MODAL ON FLICKR
MORE PHOTOSTWITTER @modalinc
Research shows... New ux games!
2:26 PM May 3rd
Renewing our vows http://t.co/C20POl8S
12:56 PM Apr 15th
@JaredLoftus I was living vicariously through Vevo! Wish I was there.
7:36 AM Apr 14th
COMMENTS
-
daimon: I hear the 37Signals is working on a major overhaul…
-
Allen Fuller: We've been back and forth on this issue a lot,…






COMMENTS (2)
COREY
Hey thanks for the help. Is there a way to link a flowchart made in omnigraffle so that it still works when posted to say a website? I would like to incorporate a grouping of flowcharts that link to one another to make a dynamic workflow of information by having each individual step linking to a different chart etc. If you have any idea how that would be awesome.
DAIMON
Corey- try exporting the flowchart as an HTML doc. Also, if that doesn’t work you can link the shapes and save the doc as a PDF and then post it online. Just some thoughts that might help…