Upload
nathanacurtis
View
114
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
UNIFY DESIGN
& DELIVERABLES
DC REFRESH - JUNE 2009
Prepared by Nathan Curtis © EightShapes LLC
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.
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
Prepared by Nathan Curtis © EightShapes LLC
4
“Creates formulaic design and removes creative potentialby reusing existing elements.”
Prepared by Nathan Curtis © EightShapes LLC
5
“Creates formulaic starting points and focuses creative attentionby reusing existing elements.”
Prepared by Nathan Curtis © EightShapes LLC
6
“Deliverables are not be a place to stand out from the crowd. Be creative with your designs.”
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
DELIVERABLE
Creating artifacts to communicate user experience, from concepts to
comps
Prepared by Nathan Curtis © EightShapes LLC
9
Deliverables
http://semanticstudios.com/publications/semantics/000228.php
Plus:
Contracts
Proposals
Placards
Tri-folds
Offers
House Rules
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
10
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
11
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
12
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
13
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
14
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
15
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
16
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
17
Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: © Copyright EightShapes, LLC 2008
18
Prepared by Nathan Curtis © EightShapes LLC
19
Starting a DeliverableChoose your page size & orientation (order by frequency of use):
1LetterLandscape
2LegalPortrait
3LetterPortrait
4TabloidLandscape
Prepared by Nathan Curtis © EightShapes LLC
20
The “Blank Canvas”
Every deliverable is born with two measly pages.
Page 1: Cover Page 2: Interior
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
Prepared by Nathan Curtis © EightShapes LLC
22
Getting the Basics Right
DOCUMENT METADATA
PAGE TITLES
Prepared by Nathan Curtis © EightShapes LLC
23
Getting The Basics RightCover
Chunking
Chapters
TOCChange History
Clear Objectives
Briefs
Wireflows
Specs
Plans
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
Prepared by Nathan Curtis © EightShapes LLC
25
Speed Up with Dynamic Markers
Prepared by Nathan Curtis © EightShapes LLC
26
Deliverable Reuse: Page Layouts
Coming Soon:Isometric Site MapsSketching & “Design Studios”
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
WIREFRAME
Standardizing user interface design to be more efficient, consistent, and
founded on patterns & components
Prepared by Nathan Curtis © EightShapes LLC
29
Design ≠ DeliverableUnits / Size
Typography
Grid
PurposeDepict what a screen looks
likeCombine pictures & words to
document a design
Prepared by Nathan Curtis © EightShapes LLC
30Lightweight Template Setup
Styles
Layers
LayoutGrids
1 Page
Prepared by Nathan Curtis © EightShapes LLC
31
Layers :: Grid Descriptions
Prepared by Nathan Curtis © EightShapes LLC
32
Layers :: Fold
A band from 590px to 610px down...
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.
Prepared by Nathan Curtis © EightShapes LLC
34
Element Libraries
Prepared by Nathan Curtis © EightShapes LLC
35
Yahoo Patterns
Prepared by Nathan Curtis © EightShapes LLC
36
iPhone Symbols
Prepared by Nathan Curtis © EightShapes LLC
37
Wireframe Components
A component is a reusable page chunk.
Prepared by Nathan Curtis © EightShapes LLC
38
Pages
Some teams even havestandard page types.
They are built from components, of course.
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.
PUTTING IT ALL
TOGETHER
Piecing together modular bits to tell a story, or lots of different stories
Prepared by Nathan Curtis © EightShapes LLC
41
Components in a Page
Prepared by Nathan Curtis © EightShapes LLC
42
A Component Across Pages
Prepared by Nathan Curtis © EightShapes LLC
43
A Component in Deliverable
Prepared by Nathan Curtis © EightShapes LLC
44
Wireflows
Prepared by Nathan Curtis © EightShapes LLC
45
Copy in Wireframes?
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
Prepared by Nathan Curtis © EightShapes LLC
47
Reuse All Over the Place!
Prepared by Nathan Curtis © EightShapes LLC
48
If Adobe Isn’t Your Thing
TOOL
Why is the first question always“What tool do you use?”
Prepared by Nathan Curtis © EightShapes LLC
50
@mckayp says:
Does Nathan Curtis get a kickback from Adobe?
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.
Prepared by Nathan Curtis © EightShapes LLC
52
Sometimes You Get Real...
Prepared by Nathan Curtis © EightShapes LLC
53
...Other Times You Don’t
Prepared by Nathan Curtis © EightShapes LLC
54
What do I design?
VisualDesigner
Content Strategist
Information Architect
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!
Prepared by Nathan Curtis © EightShapes LLC
56
Combining Tools
WIREFRAMESIllustrator
WIREFRAMESInDesign
DELIVERABLESInDesign
COMPSPhotoshop
PROTOTYPESFireworks
Or
WIREFRAMES & COMPSFireworks
COPYInCopy
Prepared by Nathan Curtis © EightShapes LLC
57
Tools by Discipline
VisualDesigner
InformationArchitect
“Design”
ContentStrategist
Deliverables
(Wireframes) (Comps) (Copy)
SameTemplates!
SameStyles, Grids, etc..
EIGHTSHAPES
UNIFY
What you can download fromunify.eightshapes.com
Prepared by Nathan Curtis © EightShapes LLC
59
Deliverables and Wireframes
Deliverables
Templates
Elements
Pages
Pages Elements
Templates
Components
Wireframes
Prepared by Nathan Curtis © EightShapes LLC
60
Deliverables and Comps
Templates
Elements Pages
Comps
Components
Deliverables
Pages Elements
Templates
Prepared by Nathan Curtis © EightShapes LLC
61
So, if you are interested...
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...
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)
Prepared by Nathan Curtis © EightShapes LLC
64
Thanks!
Nathan CurtisEightShapes [email protected]@nathanacurtis | nathanacurtis on most networksThis presentation on slideshare.net/nathanacurtis/