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

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

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

3. IT creates new but realistic HTML & CSS

DON’T FORGET THESE BENEFITS TOO!

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

1. Group trains designer on doc system (once)

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

3. Group reviews wireframes, fewer comments

4. Designer reworks wireframes faster

5. Group approves design

6. Designer delivers PDF AND source files

7. IT assesses familiar systems faster

8. IT extends component HTML/CSS

Courtesy Martin Hardee, Cisco Systems

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

“Creates formulaic starting points and focuses creative attentionby 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

InterviewsSurvey

Doc ReviewsPlanning

Discovery

Analyze

TemplatesAssets

SamplesPackaging

Assemble

Documentation

TrainingDemos

CoachingReviews

DELIVERABLE

Creating artifacts to communicate user experience, from concepts to

Deliverables

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

Contracts

Proposals

Placards

Tri-folds

Offers

House Rules

Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008

Starting a DeliverableChoose your page size & orientation (order by frequency of use):

1LetterLandscape

2LegalPortrait

3LetterPortrait

4TabloidLandscape

The “Blank Canvas”

Every deliverable is born with two measly pages.

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 RightCover

Chunking

Chapters

TOCChange History

Clear Objectives

Briefs

Wireflows

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 MapsSketching & “Design Studios”

27Panacea Deliverables Are NotAssignment:

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 ≠ DeliverableUnits / Size

Typography

PurposeDepict what a screen looks

likeCombine pictures & words to

document a design

30Lightweight Template Setup

Styles

Layers

LayoutGrids

1 Page

Layers :: Grid Descriptions

Layers :: Fold

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

Layers :: Component Markers

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

Element Libraries

Yahoo Patterns

iPhone Symbols

Wireframe Components

A component is a reusable page chunk.

Some teams even havestandard 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

DesignStrategy

Editorial Guidelines

DesignSpec

ProductManager

SiteStrategist

Publisher Engineer QA

AUDIENCES

DESIGN

What do they need?

DELIVERABLE

Reuse All Over the Place!

If Adobe Isn’t Your Thing

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

@mckayp says:

Does Nathan Curtis get a kickback from Adobe?

@nathanacurtis response?

yeah, sometimes,you are absolutely right

@carlrice says:

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

Sometimes You Get Real...

...Other Times You Don’t

What do I design?

VisualDesigner

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

WIREFRAMESIllustrator

WIREFRAMESInDesign

DELIVERABLESInDesign

COMPSPhotoshop

PROTOTYPESFireworks

WIREFRAMES & COMPSFireworks

COPYInCopy

Tools by Discipline

VisualDesigner

InformationArchitect

“Design”

ContentStrategist

Deliverables

(Wireframes) (Comps) (Copy)

SameTemplates!

SameStyles, Grids, etc..

EIGHTSHAPES

What you can download fromunify.eightshapes.com

Deliverables and Wireframes

Deliverables

Templates

Elements

Pages Elements

Templates

Components

Wireframes

Deliverables and Comps

Templates

Elements Pages

Components

Deliverables

Pages Elements

Templates

So, if you are interested...

Monthly 1/2 Day WorkshopsDELIVERABLES WIREFRAMES

Friday June 26, 2009 August 2009

Register for $188 at www.eightshapes.com...

The Book63

For designers thinking about reuse in design and deliverables using components (or patterns) during projects or for building a design library.

Due July 2009(hint: you can pre-order)

Thanks!

Nathan CurtisEightShapes LLCnathan@eightshapes.com@nathanacurtis | nathanacurtis on most networksThis presentation on slideshare.net/nathanacurtis/

Unify Design & Deliverables

Technology

Pilot Fleet Unify V2.3（new) - Dingli Fleet Unify Brochure V2... · Pilot Fleet Unify supports DingLi's entire drive test product ... Pilot Fleet Unify provides 15 LTE only ... Compared

Structuring Design Deliverables with UML - Pavel Hrubyphruby.com/publications/Uml_Mulhouse_Springer.pdf · Structuring Design Deliverables with UML Pavel Hruby Navision Software a/s

Using Design Principles to Unify Architecture and Design · Using Design Principles to Unify Architecture and Design. 2 ... •system design, patterns, ... schema XML messages over

and Electronic Deliverables - · PDF fileMoDOT’s 3D Design Implementation and Electronic Deliverables Ashley Buechter, P.E. MoDOT CADD Support Engineer TEAM Conference March 10,

unify | TIME

ECE496 Design Project Term 2 Deliverables · ECE496 Roadmap, Milestones & Deliverables Sept Oct Nov Dec Jan Feb Mar Apr 2014 2015 draft A Design Review meeting Individual Progress

Unify - JSConf.EU 2010

Norwegian NSDI – design, deliverables, geoportal

Sriway design deliverables

Final Design Phase Scope Statement Template · Web viewThe Final Design (FD) Scope Statement lists the project’s deliverables and the activities required to create those deliverables

Lean UX- Getting Out of the Deliverables Business | Smashing UX Design

Melissa Crain Design Deliverables & A Dose Of Inspiration

Final Database Design Deliverables CS x265, Introduction ... · Final Database Design Deliverables CS x265, Introduction to Database Management Systems, Spring 2017 Group 0 Douglas

Deliverables Design and Architecture

UNIFY Conference

Special Olympics Project UNIFY® Special Olympics Project UNIFY

unify | PAY

EAGLES NEST KEY DELIVERABLES - View RoyalPage/Whats~New... · KEY DELIVERABLES BUDGET CLIENT TIMELINE PROJECT REFERENCE ... DESIGN GUIDELINES FOR RAIN WATER MANAGEMENT $29,800 TOWN

DEVELOPING DESIGN DELIVERABLES - Louisville … document assists ... It is intended for use in military program project deliverables but has application in other programs augmenting

Unify Your Deliverables