64
UNIFY DESIGN & DELIVERABLES DC REFRESH - JUNE 2009 Prepared by Nathan Curtis © EightShapes LLC

Unify Design & Deliverables

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Unify Design & Deliverables

UNIFY DESIGN

& DELIVERABLES

DC REFRESH - JUNE 2009

Prepared by Nathan Curtis © EightShapes LLC

Page 2: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

2

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.

Page 3: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

3

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

Page 4: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

4

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

Page 5: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

5

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

Page 6: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

6

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

Page 7: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

7

Creating a System for Teams

1 2 3

InterviewsSurvey

Doc ReviewsPlanning

Discovery

Analyze

TemplatesAssets

SamplesPackaging

Pilot

Assemble

Documentation

TrainingDemos

CoachingReviews

Adopt

Page 8: Unify Design & Deliverables

DELIVERABLE

Creating artifacts to communicate user experience, from concepts to

comps

Page 9: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

9

Deliverables

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

Plus:

Contracts

Proposals

Placards

Tri-folds

Offers

House Rules

Page 10: Unify Design & Deliverables

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

10

Page 11: Unify Design & Deliverables

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

11

Page 12: Unify Design & Deliverables

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

12

Page 13: Unify Design & Deliverables

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

13

Page 14: Unify Design & Deliverables

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

14

Page 15: Unify Design & Deliverables

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

15

Page 16: Unify Design & Deliverables

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

16

Page 17: Unify Design & Deliverables

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

17

Page 18: Unify Design & Deliverables

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

18

Page 19: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

19

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

1LetterLandscape

2LegalPortrait

3LetterPortrait

4TabloidLandscape

Page 20: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

20

The “Blank Canvas”

Every deliverable is born with two measly pages.

Page 1: Cover Page 2: Interior

Page 21: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

21

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

Page 22: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

22

Getting the Basics Right

DOCUMENT METADATA

PAGE TITLES

Page 23: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

23

Getting The Basics RightCover

Chunking

Chapters

TOCChange History

Clear Objectives

Briefs

Wireflows

Specs

Plans

Page 24: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

24

Symbols

Do you get the standard symbol stuff? Absolutely.

•Markers

•Callouts

•Frames

•Site Maps

•People

•Flows (thanks JJG!)

•Project Plans

•Reviews

Page 25: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

25

Speed Up with Dynamic Markers

Page 26: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

26

Deliverable Reuse: Page Layouts

Coming Soon:Isometric Site MapsSketching & “Design Studios”

Page 27: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

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

Page 28: Unify Design & Deliverables

WIREFRAME

Standardizing user interface design to be more efficient, consistent, and

founded on patterns & components

Page 29: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

29

Design ≠ DeliverableUnits / Size

Typography

Grid

PurposeDepict what a screen looks

likeCombine pictures & words to

document a design

Page 30: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

30Lightweight Template Setup

Styles

Layers

LayoutGrids

1 Page

Page 31: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

31

Layers :: Grid Descriptions

Page 32: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

32

Layers :: Fold

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

Page 33: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

33

Layers :: Component Markers

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

Page 34: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

34

Element Libraries

Page 35: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

35

Yahoo Patterns

Page 36: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

36

iPhone Symbols

Page 37: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

37

Wireframe Components

A component is a reusable page chunk.

Page 38: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

38

Pages

Some teams even havestandard page types.

They are built from components, of course.

Page 39: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

39

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.

Page 40: Unify Design & Deliverables

PUTTING IT ALL

TOGETHER

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

Page 41: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

41

Components in a Page

Page 42: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

42

A Component Across Pages

Page 43: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

43

A Component in Deliverable

Page 44: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

44

Wireflows

Page 45: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

45

Copy in Wireframes?

Page 46: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

46

Target your audience

DesignStrategy

Editorial Guidelines

DesignSpec

ProductManager

SiteStrategist

Publisher Engineer QA

AUDIENCES

DESIGN

What do they need?

DELIVERABLE

Page 47: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

47

Reuse All Over the Place!

Page 48: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

48

If Adobe Isn’t Your Thing

Page 49: Unify Design & Deliverables

TOOL

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

Page 50: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

50

@mckayp says:

Does Nathan Curtis get a kickback from Adobe?

Page 51: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

51

@nathanacurtis response?

yeah, sometimes,you are absolutely right

@carlrice says:

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

Page 52: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

52

Sometimes You Get Real...

Page 53: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

53

...Other Times You Don’t

Page 54: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

54

What do I design?

VisualDesigner

Content Strategist

Information Architect

Page 55: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

55

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!

Page 56: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

56

Combining Tools

WIREFRAMESIllustrator

WIREFRAMESInDesign

DELIVERABLESInDesign

COMPSPhotoshop

PROTOTYPESFireworks

Or

WIREFRAMES & COMPSFireworks

COPYInCopy

Page 57: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

57

Tools by Discipline

VisualDesigner

InformationArchitect

“Design”

ContentStrategist

Deliverables

(Wireframes) (Comps) (Copy)

SameTemplates!

SameStyles, Grids, etc..

Page 58: Unify Design & Deliverables

EIGHTSHAPES

UNIFY

What you can download fromunify.eightshapes.com

Page 59: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

59

Deliverables and Wireframes

Deliverables

Templates

Elements

Pages

Pages Elements

Templates

Components

Wireframes

Page 60: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

60

Deliverables and Comps

Templates

Elements Pages

Comps

Components

Deliverables

Pages Elements

Templates

Page 61: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

61

So, if you are interested...

Page 62: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

62

Monthly 1/2 Day WorkshopsDELIVERABLES WIREFRAMES

Friday June 26, 2009 August 2009

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

Page 63: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

63

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)

Page 64: Unify Design & Deliverables

Prepared by Nathan Curtis © EightShapes LLC

64

Thanks!

Nathan CurtisEightShapes [email protected]@nathanacurtis | nathanacurtis on most networksThis presentation on slideshare.net/nathanacurtis/