Download - Creating a Component Library
![Page 1: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/1.jpg)
Creating a Component Libraryfor DC Design Talks, February 29, 2008by Nathan CurtisFounder & Principal, EightShapes [email protected] :: www.eightshapes.com
![Page 2: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/2.jpg)
![Page 3: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/3.jpg)
![Page 4: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/4.jpg)
![Page 5: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/5.jpg)
![Page 6: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/6.jpg)
![Page 7: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/7.jpg)
![Page 8: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/8.jpg)
![Page 9: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/9.jpg)
![Page 10: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/10.jpg)
WHAT is a component
![Page 11: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/11.jpg)
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
![Page 12: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/12.jpg)
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
![Page 13: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/13.jpg)
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
![Page 14: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/14.jpg)
![Page 15: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/15.jpg)
![Page 16: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/16.jpg)
![Page 17: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/17.jpg)
![Page 18: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/18.jpg)
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components can permeate...
Wireframing
18
Visual Design
Code
![Page 19: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/19.jpg)
Introduction
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
19
Component
Pattern=
![Page 20: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/20.jpg)
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
![Page 21: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/21.jpg)
WHY a component library?
![Page 22: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/22.jpg)
Assets for efficient reuse
![Page 23: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/23.jpg)
Assets for efficient reuse
![Page 24: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/24.jpg)
Assets for efficient reuse
www.sun.com/webdesign/components/component-index.html
![Page 25: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/25.jpg)
Templates based on design system
![Page 26: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/26.jpg)
Process for efficient production
![Page 27: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/27.jpg)
G1v2x1
= Global Navigation Bar (Logged In, Entitled)
Language for collaboration
Category Example #
Component # Variation #
![Page 28: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/28.jpg)
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
![Page 29: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/29.jpg)
Structure for predictable delivery
![Page 30: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/30.jpg)
Environment for governance
![Page 31: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/31.jpg)
Foundation for innovation
![Page 32: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/32.jpg)
HOW do I build a library?A look at the high level process of library development
![Page 33: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/33.jpg)
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
![Page 34: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/34.jpg)
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
![Page 35: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/35.jpg)
![Page 36: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/36.jpg)
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
![Page 37: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/37.jpg)
IA
PM
Coder
Visual
Strategist
![Page 38: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/38.jpg)
![Page 39: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/39.jpg)
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
![Page 40: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/40.jpg)
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
![Page 41: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/41.jpg)
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Sun.com
41
• Global• Navigation• Side• Content• Spotlight
![Page 42: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/42.jpg)
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
• Global• Navigation• Side• Content• Spotlight
RevolutionHealth.com
42
![Page 43: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/43.jpg)
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Comcast.net
43
• Global• Navigation• Side• Content• Spotlight
![Page 44: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/44.jpg)
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Marriott.com
44
• Global• Navigation• MU• Content• Spotlight
![Page 45: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/45.jpg)
Components
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
NationalGeographic.com
45
• Global• Navigation• Side• Content• Spotlight
![Page 46: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/46.jpg)
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
![Page 47: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/47.jpg)
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
![Page 48: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/48.jpg)
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:
![Page 49: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/49.jpg)
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
![Page 50: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/50.jpg)
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
![Page 51: Creating a Component Library](https://reader031.vdocuments.us/reader031/viewer/2022020115/54c8009e4a7959cf728b4570/html5/thumbnails/51.jpg)
Introduction
DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
So, who are you?51