Creating a Component Library for DC Design Talks, February 29, 2008 by Nathan Curtis Founder & Principal, EightShapes LLC nathan@eightshapes.com :: www.eightshapes.com
WHAT is a component
Components
11
View (Page) A point-in-time display within a viewer, such as a specific browser page, application state, or document view
EXAMPLES
Shopping cart Product overview Log in Install shield intro Portal home Gmail’s inbox iPhone default screen
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components
12
Element A single atomic item on a page that cannot be further broken down into multiple parts
EXAMPLES
Text snippet Image Textbox Button Logo Radio button (labeled) Link Page Title
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components
13
Component A combination of elements that creates a purposeful, reusable, and independent structure
EXAMPLES
Search box area Promotion list News feed Tabbed navigation Related links Article content
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components
Components can permeate... Wireframing
Visual Design
Code DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
18
Introduction
Component = Pattern DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
19
Components
20
Components are Different! Distinction
Components
Patterns
Specificity?
Specific to design system
General across contexts
Style?
Established
Independent
Flexible?
Well-defined, codified
Broadly applicable
Location?
Grid implies position & use Up to the designer
Type(s)?
Smaller than page, bigger than element Detailed, org-specific specs Well defined reference code
Guidelines? Code-base?
All sorts (module, element, page, flow, behavior, etc) Best practices and common behaviors Tandem starter assets
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
WHY a component library?
Assets for efficient reuse
Assets for efficient reuse
Assets for efficient reuse
www.sun.com/webdesign/components/component-index.html
Templates based on design system
Process for efficient production
Language for collaboration
Category
G1v2x1
Component #
Example #
Variation #
= Global Navigation Bar (Logged In, Entitled)
Taxonomy for asset namespace Universal IDs
Image filenames CSS Class HTML Namespace Wireframe snippet Inspired by http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look
Structure for predictable delivery
Environment for governance
Foundation for innovation
HOW do I build a library? A look at the high level process of library development
Components
33
Creating a Component Library
1 Discover
2 Organize
3 Build
4 Document
Distribute
Maintain
Teach
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
5 Promote
Components
Discover
During Design Create it organically as a system emerges (this is hard)
34
1 Discover
Analyzing a System Perform an analysis of regions, reuse, and other aspects of a live design system
2 Organize
3 Build
4 Document
5 Promote
Collaborative Exercises Bring together multiple perspectives to decompose the system together
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components
36
Collaborative Exercise 1. Identify
4. Archive
2. Group
5. Prioritize
3. Classify
6. Label
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
IA
Coder Strategist
PM
Visual
Components
Organize
39
1 Discover
2 Organize
Create an inventory that includes: • • • • • • • • • • •
Build/Exercise ID Reference Artwork/Page Component ID Component Title Variation ID Variation Title Category Priority (High, Medium, Low) Phase (1, 2, 3, etc) Status (Identified, Drafted, Spec’ed, Published) Notes
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
3 Build
4 Document
5 Promote
Components
Regions • • • • • •
Global navigation / Header / Footer Navigation (secondary or local) Side bar / side navigation / right rail Content space Spotlight / lead / billboard / big top Pop-up / Pop-in / Hovers (lightbox)
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
40
Components
41
Sun.com • • • • •
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Global Navigation Side Content Spotlight
Components
42
RevolutionHealth.com • • • • •
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Global Navigation Side Content Spotlight
Components
43
Comcast.net • • • • •
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Global Navigation Side Content Spotlight
Components
44
Marriott.com • • • • •
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Global Navigation MU Content Spotlight
Components
45
NationalGeographic.com • • • • •
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Global Navigation Side Content Spotlight
Components
46
Build
1 Discover
2 Organize
3 Build
4 Document
5 Promote
No matter the component assets you produce... Wireframe
or
Comp
Code
or
...keep a process in mind:
Create
Test
Review
Publish
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Store
Components
47
Document
1 Discover
2 Organize
3 Build
4 Document
5 Promote
Document-Based
Web-Based
Self-Documenting
PDF Specifications & Guidelines
Sun Component Library
Code
Contact Sheets
Yahoo Pattern Library
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Files
Libraries
Components
Promote
48
1 Discover
2 Organize
3 Build
4 Document
5 Promote
The library must be communicated to varied audiences in specific ways to address their needs: Product Manager
Copywriter/ Publisher
“What can I use?”
“What are the editorial guidelines?”
“What are the strategies?” “What are the constraints?” “How can I customize?”
Engineer “Where is the code?” “What’s the latest update?”
“Who must I coordinate with when I use them?”
“How stable is it?”
“In what context(s) can each be employed?”
“What are the behavioral specifications?”
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components
49
Once Established... You’ve now got a living, changing, evolving set of assets that grows stale quickly unless you concentrate on: Distribution
Maintenance
Teaching
The library and tools must be distributed, whether via:
The library and tools must have a viable owner that:
The library and tools must be augmented by documentation that:
.zip file • Secure site • Versioning system
•
Serves as a resource • Updates the library • Handles requests • Identifies opportunities
•
•
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Clarifies purpose • Provides details • Fosters adoption • Limits resource impacts
Introduction
50
Further References
http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Introduction
51
So, who are you?
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29