Separating Design & Deliverables
The EightShapes Unify system is predicated on the belief that design should be reusable and separate from deliverable documents. The templates and libraries that come with the system are clearly broken into two (or more, if you do comps too) collections of assets in the /deliverables/ and /wireframes/ directory.
Per Figure 1, a user’s goal is to create what’s on the inside (wireframe and deliverable documents) by using reusable assets provided in the system depicted outside the box.
1.EightShapes Unify system architecture that separates design and deliverables
For deliverables, it’s document templates (such as a letter landscape page size), element libraries (such as flow symbols), and page layouts (such as different ways to annotate screen designs). For wireframes, the system includes templates based on a design grid (such as 800px or 960px wide, with guidelines), element libraries (like form controls) reusable page components, and even standard page layouts.
Design and deliverables can be created independently, and actually don’t require the other to be useful. But the most effective documentation finds used combining the two together via dynamically linked files.
The following is an excerpt from Nathan Curtis’ Modular Web Design:
Remember that age-old tenet of separating content from presentation? Ever been perplexed by the complexity of blending canvas grid setups between the screen designs you create and the annotations around them? Have you noticed that a style called “header” in a screen design may mean something entirely different from a “header” of a paragraph in your design annotations?
If your design software enables you to dynamically link documents (or you can maintain the separation via more manual operations), consider creating distinct templates and libraries for screen designs versus deliverable documents. With different templates and libraries, you afford yourself the opportunity to use one set of styles, grids, layers, and document sizes for screen designs and another set to annotate those designs.
For screen designs, you can set up the canvas size to match your design system, such as a page width of 800 or 980 pixels. Guidelines can match one or more standard layouts within your design system. And typography styles can map directly to your experience’s style guide.
Conversely, deliverable documents can have a distinct collection of masters or backgrounds, each with relevant guidelines, typographic styles, and layers oriented to how you document your design.
Modular reuse of screen designs by placing them one or more times into a deliverable document enables separation of content (in this case, screen designs) and presentation (in this case, paginated documents). Such separation increases flexibility and collaboration: First, John the design lead could create
a wireframe that Paul the researcher and Stacy the production designer could each include in their research report and design specification, respectively. Second, if the wireframe is linked to the deliverable, then any subsequent changes by John would be automatically updated when Paul and Stacy publish a new version of their deliverables.