« Back to rhjr.net

Design Description Documents in OmniGraffle

Back in August of 2007, I introduced Design Description Documents (DDD) via an article on Think Vitamin (the download link in the article is currently broken). At the time, creating this document involved exporting full-size images from your favorite wireframe software, copying the wireframes into a slide deck template (one per slide), naming the slide, and finally writing in the use cases for the screen.

After a while, that got pretty tedious.

A few months ago, I recreated the Design Description Document directly in OmniGraffle (Mac only), as a template. I’ve used it ever since, and while it can require a decently wide monitor resolution at times (depending on the width of the design you’re creating), it has proven to be a great solution. Now, I create wireframes directly in the template. It completely eliminates the tedium. A few notes:

1. To name the screen shown in the DDD, just name the canvas as you normally would. The header is updated automatically.

2. A canvas in the DDD template is made of two layers — a Chrome layer and the Canvas layer. The Chrome layer is locked by default, as are the elements in that layer, including the header and sidebar, and the name of the app you’re working on. To change these elements, simply unlock the Chrome layer, make your edits, and then copy/paste that canvas to create more pages.

3. The Last Edited date and time is saved automatically.

4. Since it’s all in OmniGraffle, you can assign actions to your wireframes and create a click-through PDF version of the DDD. Quite handy.

If you use OmniGraffle and are interested in DDDs, try out this new template. I’m sure it will make your life easier.

Download the template! (ZIP, 53kb)

This slice was posted on Friday, October 30th, 2009 at 9:00 am.

1 Comment