As we are booming along at Objective Digital, we need more and more tools for our design projects. One wireframing tool doesn’t cut it – we need them all. Nirish recently wrote about Balsamiq, a great tool for discussing concepts and getting ideas and designs out fast. There is no distraction from shading, pixels and fonts.
The latest project for my colleague Jon Duhig and I couldn’t be more different. A complex online business application, it’s taken many months, with several serious iterations of design where we have taken our work out to users. Our tool of choice for this project was Omnigraffle, for several reasons.
Firstly, the users: it’s always difficult for users to make the leap from the legacy system to the new one, especially when you just have paper. With Omnigraffle, the designs look more realistic than Balsamiq, making it easier for users to understand the concepts.
Secondly, the build: We did have a style guide, but with 150 pages of wireframes, the guide doesn’t cover nearly as much as it could. And even with some graphic design input, it won’t cover enough. Specifying and illustrating as much of the design as possible in Omnigraffle allows the software engineer to do what they are good at, building stuff.
Thirdly, the awesome ability of Omnigraffle to re-use objects. Managing large wireframe files of 150 pages can be difficult, especially when you have several iterations of design. It’s a bit like writing code, there are different ways of doing it but you need to be neat to be efficient. Shared layers in Omnigraffle are one way of being efficient. You can edit a shared layer and it edits all instances of the layer. However that layer must be in exactly the same location on every page.
The problem begins when you are representing rich interactions, and need to move the object move up or down in the wire. You can’t use the shared layer as it would change all instances of it.
My discovery of Linkback in Omnigraffle was somewhat accidentaI, but now I wouldn’t be without it. I was working with data tables with expanding rows, and other interaction, so I created the table as an object, and put the interactions on top. To create an object for re-use, you select the content you want as an object, and Copy as PDF from the Edit menu. Then paste the object into your document normally, as many times as you wish.
When you come to edit it, you double click the object and it opens another instance of Omnigraffle. You make your edits and click save (not Save as). This is important – there is no need to create a separate Linkback file.
To reiterate the procedure to re-use objects in Omnigraffle:
- Select the object and from the File menu, select Copy as PDF.
- Paste the object into the document normally and delete the original.
- To edit the object, double click on it. The object opens in a new instance of Omnigraffle.
- Make your edits and select File > Save and close the window.
Easy, and so efficient that I hardly ever use shared layers anymore. We were able to handle a number of significant iterations thanks to the re-use of objects in Omnigraffle.
Oh, and we also used Axure to build a prototype by simply exporting the wireframes as .png files and linking them up in Axure. So that makes a trifecta of tools we use for wireframing in Objective Digital. There will probably be a blog about Axure here soon.