Unify Design & Deliverables

UNIFY DESIGN & DELIVERABLES

DC REFRESH - JUNE 2009

Prepared by Nathan Curtis © EightShapes LLC

Thinking Systematically

We use and teach teams better ways to create user experience documentation.

On the face of it, the “doc system” is a set of templates. But it’s actually much more than that.

Process RESET!

BEFORE SYSTEM

Designer starts project, finishes analysisDesigner authors wireframes from scratch, reinventing already existing componentsGroup reviews design, extensive commentsDesigner reworks wireframes, gradually narrowing to existing design systemGroup approves design (finally)Designer delivers wireframes in PDF; retains source files in proprietary format

IT gets wireframes; deep analysis reveals many components w/o HTML/CSS/codeGroup scrambles to reconcile design ideas vs what’s actually possibleDesigner continues to revise wireframes

IT creates new but realistic HTML & CSS

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $

DON’T FORGET THESE BENEFITS TOO!

MORE PORTABILITY: Group not constrained to use same designer for updates since source files are reusableLESS REINVENTION: Other designers don’t reinvent nearly so many new components due to the common approach

WITH SYSTEM

Group trains designer on doc system (once)

Designer starts project, finishes analysisDesigner uses client’s doc system

Group reviews wireframes, fewer comments

Designer reworks wireframes faster

Group approves design

Designer delivers PDF AND source files

IT assesses familiar systems faster

IT extends component HTML/CSS

$ $ $ $ $ $ $ $ $ $ $ $ $ $ Courtesy Martin Hardee, Cisco Systems

“ Creates formulaic design and removes creative potential by reusing existing elements.”

“ Creates formulaic starting points and focuses creative attention by reusing existing elements.”

“ Deliverables are not be a place to stand out from the crowd . Be creative with your designs.”

Creating a System for Teams 1 2 3 Interviews Survey Doc Reviews Planning Discovery Analyze Templates Assets Samples Packaging Pilot Assemble Documentation Training Demos Coaching Reviews Adopt

DELIVERABLE

Creating artifacts to communicate user experience, from concepts to comps

Deliverables

http://semanticstudios.com/publications/semantics/000228.php

Plus: Contracts Proposals Placards Tri-folds Offers House Rules

Starting a Deliverable

Choose your page size & orientation (order by frequency of use):

1 Letter Landscape 2 Legal Portrait 3 Letter Portrait 4 Tabloid Landscape

The “Blank Canvas”

Every deliverable is born with two measly pages.

Page 1: Cover Page 2: Interior

What’s In A Template?

In the Template:

Metadata as Variables

Grids

Chapter divider

Color palette

Styles (type, object, tables, TOC)

NOT In the Template:

Sample content

Symbols (like markers)

Sample page layouts

Template moral: Keep it light, Keep it flexible

Getting the Basics Right DOCUMENT METADATA PAGE TITLES

Getting The Basics Right Cover Chunking Chapters TOC Change History Clear Objectives Briefs Wireflows Specs Plans

Symbols

Do you get the standard symbol stuff? Absolutely.

Markers

Callouts

Frames

Site Maps

People

Flows (thanks JJG!)

Project Plans

Reviews

Speed Up with Dynamic Markers

Deliverable Reuse: Page Layouts Coming Soon: Isometric Site Maps Sketching & “Design Studios”

Panacea Deliverables Are Not

Assignment:

Annotate three screenshots provided, using 1-2 deliverable pages.

Results:

Wildly different layouts, editorial style, details, and assumed audiences.

For our unfortunate readers, it’s empathy time.

But there’s hope!

Massive frame? A table! A table! Art in middle? Specs by element

WIREFRAME

Standardizing user interface design to be more efficient, consistent, and founded on patterns & components

Design ≠ Deliverable Units / Size Typography Grid Purpose Depict what a screen looks like Combine pictures & words to document a design

Lightweight Template Setup Styles Layers Layout Grids 1 Page

Layers :: Grid Descriptions

Layers :: Fold

A band from 590px to 610px down...

Layers :: Component Markers

Markers automatically added to layer you can hide but trace reusable bits back to the library.

Element Libraries

Yahoo Patterns

iPhone Symbols

Wireframe Components

A component is a reusable page chunk.

Pages

Some teams even have

standard page types.

They are built from components, of course.

Wireframing Conventions

C’mon, who wants to fight?

A wireframing system must have a consistent visual language, so you have to make decisions like:

Long live gray scale. But minimize or remove gray.

Use Arial. Only Arial!

Blue for interactivity. Orange for annotation. Red for errors. No more color.

X for images.

No visual embellishments. Rounded corners, gradients, stroke weights only if it conveys meaningful structure.

PUTTING IT ALL TOGETHER

Piecing together modular bits to tell a story, or lots of different stories

Components in a Page

A Component Across Pages

A Component in Deliverable

Wireflows

Copy in Wireframes?

Target your audience Design Strategy Editorial Guidelines Design Spec Product Manager Site Strategist Publisher Engineer QA AUDIENCES DESIGN DELIVERABLE What do they need?

Reuse All Over the Place!

If Adobe Isn’t Your Thing

TOOL

Why is the first question always “What tool do you use?”

@mckayp says:

Does Nathan Curtis get a kickback from Adobe?

@carlrice says:

indesign is an entirely unacceptable [tool] to present interactive content.

@nathanacurtis response? yeah, sometimes, you are absolutely right

Sometimes You Get Real...

...Other Times You Don’t

What do I design? Visual Designer Content Strategist Information Architect

So, Why InDesign?

Our surveys reveal that Visio and Omnigraffle are the two most popular tools in the IA community. We work in InDesign because:

Cross platform (think: big teams, vendors, etc)

More than sufficient for vector-based drawing

Most modular (snippets, linked files like PDFs)

Style dominance (type, objects, tables, TOC, etc)

UX “designers” include more than just IAs!

Combining Tools WIREFRAMES Illustrator WIREFRAMES InDesign DELIVERABLES InDesign COMPS Photoshop PROTOTYPES Fireworks Or WIREFRAMES & COMPS Fireworks COPY InCopy

Tools by Discipline Visual Designer Information Architect “ Design” Content Strategist (Wireframes) (Comps) (Copy) Deliverables Same Templates! Same Styles, Grids, etc..

EIGHTSHAPES UNIFY