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 EXAMPLES
within a viewer, such as Shopping cart
Product overview
a specific browser
Log in
page, application state,
Install shield intro
or document view 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 EXAMPLES
Text snippet
on a page that cannot
Image
be further broken
Textbox
down into multiple Button
parts 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 EXAMPLES
Search box area
elements that creates
Promotion list
a purposeful, reusable,
News feed
and independent Tabbed navigation
structure Related links
Article content
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 18
Components can permeate...
Wireframing
Visual Design
Code
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Introduction 19
Component
=
Pattern
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

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 All sorts (module, element,
than element page, flow, behavior, etc)
Guidelines? Detailed, org-specific Best practices and common
specs behaviors
Code-base? Well defined reference Tandem starter assets
code
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 Example #
Component # 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 2 3 4 5
Discover Organize Build Document Promote
Distribute Maintain Teach
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 34
Discover
1 2 3 4 5
Discover Organize Build Document Promote
During Design Analyzing a System Collaborative Exercises
Create it organically Perform an analysis Bring together multiple
as a system emerges of regions, reuse, and perspectives to decompose
(this is hard) other aspects of a live the system together
design system
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 39
Organize
1 2 3 4 5
Discover Organize Build Document Promote
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

Components 40
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

Components 41
Sun.com
• Global
• Navigation
• Side
• Content
• Spotlight
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 42
RevolutionHealth.com
• Global
• Navigation
• Side
• Content
• Spotlight
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 43
Comcast.net
• Global
• Navigation
• Side
• Content
• Spotlight
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 44
Marriott.com
• Global
• Navigation
• MU
• Content
• Spotlight
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 45
NationalGeographic.com
• Global
• Navigation
• Side
• Content
• Spotlight
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 46
Build
1 2 3 4 5
Discover Organize Build Document Promote
No matter the component assets you produce...
Wireframe or Comp or Code
...keep a process in mind:
Create Test Review Publish Store
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 47
Document
1 2 3 4 5
Discover Organize Build Document Promote
Document-Based Web-Based Self-Documenting
PDF Specifications & Guidelines Sun Component Library Code
Contact Sheets Files Libraries
Yahoo Pattern Library
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

Components 48
Promote
1 2 3 4 5
Discover Organize Build Document Promote
The library must be communicated to varied
audiences in specific ways to address their needs:
Product Copywriter/
Manager Publisher Engineer
“What can I use?” “What are the editorial “Where is the code?”
guidelines?”
“What are the strategies?” “What’s the latest update?”
“Who must I coordinate
“What are the constraints?” with when I use them?” “How stable is it?”
“How can I customize?” “In what context(s) can “What are the behavioral
each be employed?” 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 The library and tools The library and tools
must be distributed, must have a viable must be augmented by
whether via: owner that: documentation that:
• .zip file • Serves as a resource • Clarifies purpose
• Secure site • Updates the library • Provides details
• Versioning system • Handles requests • Fosters adoption
• Identifies opportunities • Limits resource
impacts
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

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