Omnigraffle has long been one of the seminal wireframing tools. It’s great quality output, libraries of stencils and great toolset makes it an invaluable weapon in an IA’s arsenal. If you’ve not tried it, you can get a demo from Omni. Here are a few tricks i’ve picked up over the years:
Setting up your document
- If you do your wireframes to scale i’ve found it useful to set your document to A3 (297 × 420 mm), it seems to allow a nice balance of font sizes on screen and when printed (fit to paper at A4).
- Next, untick the “Size is a multiple of printer sheets” box in the Canvas>Size panel. This way you can expand your pages as required, without jumping up to another page wide.
- Switch your ruler units to pixels (Right click>Ruler units).
Use the grid not smart alignment
The smart distance/alignment feature can be useful, but is often inaccurate and frustrating to use. Snapping to a simple 10px grid, is a much more straight forward. You can even hold shift to “nudge” objects in 1px increments even with snap to grid turned on.
Change the grid to 100px major and 10 minor lines and tick on snap to grid. (Canvas>Grid panel).
Download & create your own stencil sets
There are some great free stencils out there covering a wide range of assets. Icon sets are sometimes available with stencil set versions too. Konigi have a nice looking free set with a range of web elements. To build your own:
- Click the little gear shaped icon at the top of the stencils window and pick New Stencil.
- Draw or paste your object (vectors should copy directly from illustrator) into the new document window
- Save the file and your new stencil should be available in the stencils window
Make use of document variables
Here’s a little technique to display document data. You can type any of these tags into text areas (or shapes) and it will display document data which updates automatically, pretty neat!
- <%Document%> - File name
- <%Creator%> – User’s name
- <%ModificationDate%> – Last modified date
- <%Date%> – Todays date
- <%#%> – Page number
- <%TotalPages%> – Total number of canvases
Use shared layers even with the standard software
The professional version allows the creation of shared layers, which can be shown on all canvases. Ideal for navigation and other common elements on web pages. Here’s a trick to allow you to do a similar thing but without the need for a pro licence.
- Create the element or elements you want to be shared
- Select them, right click and select Copy as>PDF
- Paste the new PDF into your document
- You can copy and paste this new element as much as you like and edit it in a single location by double clicking any instance of it.
Hope you’ve found these tips useful. Feel free to comment if you need clarification or if you’ve got your own!