EightShapes, LLC is a user experience design firm specialized in web sites and web applications.

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.

Figure 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.

RSS 2.0  |  Trackback

Comments (8)

  1. Jason Robb says:

    This is awesome, Nathan! What a great way to separate design thinking from creating deliverables. I especially like that you’ve held to the ideal of separating content from presentation. I’ve never seen it put so simply as you did here. Well done!

  2. [...] I’ve been using OmniGraffle as my primary tool for wireframing (and most everything else) for about 3 years. In that time I feel like I’ve gotten pretty good at using it efficiently, but I do try to keep an eye out for new tips and tricks. Recently, I’ve been following along as the documentation geniuses at EightShapes have developed and released their InDesign-based documentation system called Unify. I was intrigued by one idea in particular: keeping wireframes and wireframe documents as separate files. [...]

  3. Andrew Nairn says:

    Using the Linkback function in Omngigraffle allows you to separate out components, and re-use instances of them multiple times in the same document, a little like symbols. You create the component or wireframe, copy as pdf, and paste. It is can then be copied around the document. Double clicking on it opens it up in it’s own window and allows editing, reflecting any changes throughout. Works well in a one document environment, but not across documents.

  4. Great advice, this article is just great, especially for beginners. I never comment on those blogs, even when the content is great

    Follow me on Twitter

  5. Randolph K says:

    Thanks guys, this is a great tool! The insight is amazing and incredibly useful. As a professional in this businsess for over 20 years I am always looking to learn and improve my work and skills. This is a tremendous help and should be considered seriously by anyone looking to create and deliver useful work.

    One question; Have you considered making these tools as a Dreamweaver/Fireworks collection? It would be nice to rapidly do something that can be near rea ready to implement via HTML with CSS in place.

  6. We’ve built a similarly modular wireframing library in Adobe Fireworks (2008) in the past, as we have also for Axure (2009), Adobe Illustrator (2006-2009), and other tools. At this point, admittedly, we’re building most of our libraries in raw HTML (2012).

  7. Randolph K says:

    Are the HTML libraries something that will be available to the community? Either free or paid version?

  8. Randolph,

    The libraries we build for HTML prototyping are typically client-specific and thus confidential.

    However, the SYSTEM we use to build, modularize, organize, and annotate them is publicly available as EightShapes Blocks and downloadable on Github.

    You can learn more by watching the UIE Virtual Seminar Start Full Screen.

Add a Comment

Email addresses will not be published. Required fields are marked *