creating a component library
DESCRIPTION
TRANSCRIPT
Creating a Component Libraryfor DC Design Talks, February 29, 2008by Nathan CurtisFounder & Principal, EightShapes [email protected] :: www.eightshapes.com
WHAT is a component
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
View (Page)A point-in-time display within a viewer, such as a specific browser page, application state, or document view
11
Shopping cart
Product overview
Log in
Install shield intro
Portal home
Gmail’s inbox
iPhone default screen
EXAMPLES
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
ElementA single atomic item on a page that cannot be further broken down into multiple parts
12
Text snippet
Image
Textbox
Button
Logo
Radio button (labeled)
Link
Page Title
EXAMPLES
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
ComponentA combination of elements that creates a purposeful, reusable, and independent structure
13
Search box area
Promotion list
News feed
Tabbed navigation
Related links
Article content
EXAMPLES
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components can permeate...
Wireframing
18
Visual Design
Code
Introduction
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
19
Component
Pattern=
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components are Different!
20
Distinction Components PatternsSpecificity? 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
All sorts (module, element, page, flow, behavior, etc)
Guidelines? Detailed, org-specific specs
Best practices and common behaviors
Code-base? Well defined reference code
Tandem starter assets
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
G1v2x1
= Global Navigation Bar (Logged In, Entitled)
Language for collaboration
Category Example #
Component # Variation #
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
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Creating a Component Library
33
1Discover
2Organize
3Build
4Document
5Promote
MaintainDistribute Teach
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Discover
34
1Discover
2Organize
3Build
4Document
5Promote
During DesignCreate it organically as a system emerges
(this is hard)
Analyzing a SystemPerform an analysis of regions, reuse, and other aspects of a live design system
Collaborative ExercisesBring together multiple perspectives to decompose the system together
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Collaborative Exercise
1. Identify
2. Group
3. Classify
36
4. Archive
5. Prioritize
6. Label
IA
PM
Coder
Visual
Strategist
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
OrganizeCreate 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
39
1Discover
2Organize
3Build
4Document
5Promote
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
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)
40
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Sun.com
41
• Global• Navigation• Side• Content• Spotlight
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
• Global• Navigation• Side• Content• Spotlight
RevolutionHealth.com
42
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Comcast.net
43
• Global• Navigation• Side• Content• Spotlight
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Marriott.com
44
• Global• Navigation• MU• Content• Spotlight
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
NationalGeographic.com
45
• Global• Navigation• Side• Content• Spotlight
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
BuildNo matter the component assets you produce...
...keep a process in mind:
46
1Discover
2Organize
3Build
4Document
5Promote
Test Review Publish StoreCreate
Comp CodeWireframe oror
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Document
47
1Discover
2Organize
3Build
4Document
5Promote
Document-Based
PDF Specifications & Guidelines
Contact SheetsYahoo Pattern Library
Sun Component Library
Web-Based Self-Documenting
Code
Files Libraries
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Promote
48
1Discover
2Organize
3Build
4Document
5Promote
ProductManager
Copywriter/Publisher Engineer
“What can I use?”
“What are the strategies?”
“What are the constraints?”
“How can I customize?”
“What are the editorial guidelines?”
“Who must I coordinate with when I use them?”
“In what context(s) can each be employed?”
“Where is the code?”
“What’s the latest update?”
“How stable is it?”
“What are the behavioral specifications?”
The library must be communicated to varied audiences in specific ways to address their needs:
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Once Established...You’ve now got a living, changing, evolving set of assets that grows stale quickly unless you concentrate on:
49
MaintenanceDistribution Teaching
The library and tools must be distributed, whether via:
• .zip file
• Secure site
• Versioning system
The library and tools must have a viable owner that:
• Serves as a resource
• Updates the library
• Handles requests
• Identifies opportunities
The library and tools must be augmented by documentation that:
• Clarifies purpose
• Provides details
• Fosters adoption
• Limits resource impacts
Introduction
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Further References
50
http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look
Introduction
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
So, who are you?51