Why?

This high-level view of the design document was produced as a figure for an upcoming book (”Modular Web Design”). It was presented to describe an overall design document and it’s potential for interlinking numerous different design assets to tell the story of the solution from levels high (e.g., wireflow) and low (component-level annotations).

How?

I created this deliverable myself, including faux design objectives, annotations, and visualizations of each component and page. The document is actually a single InDesign document, but linking to each of the other visualizations modularly (such as a document with a page design, which in turn links to a document that includes a component like a billboard). Overall, I’d estimate that there around 30-40 linked documents hierarchically related to this page of thumbnails.

So What?

Sometimes you need to create real wireframes and annotations to teach folks how to create such documentation. Since it’s more real, people can see the scale and relationships across the assets.

Deliverable(s)

This document presents thumbnails of each page of the specification, produced via linked files such that as you zoom in you can see all the details. Pages include front matter (cover, TOC, change history), strategy and planning (such as design objectives), a wireflow (that reuses page designs) and then interlinked pages and components each annotated with behaviors, states, and content requirements.

You can view or download the deliverable here

This entry was posted on Saturday, February 28th, 2009 at 11:12 and is filed under Deliverable, Sitemap, Wireframe. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.