creating a component library

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


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


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


Components can permeate...

Wireframing

18

Visual Design

Code

Introduction


19

Component

Pattern=

Components


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

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


Creating a Component Library

33

1Discover

2Organize

3Build

4Document

5Promote

MaintainDistribute Teach

Components


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


Collaborative Exercise

1. Identify

2. Group

3. Classify

36

4. Archive

5. Prioritize

6. Label

IA

PM

Coder

Visual

Strategist

Components


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


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


Sun.com

41

• Global• Navigation• Side• Content• Spotlight

Components



RevolutionHealth.com

42

Components


Comcast.net

43


Components


Marriott.com

44

• Global• Navigation• MU• Content• Spotlight

Components


NationalGeographic.com

45


Components


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


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


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


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


Further References

50

http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look

Introduction


So, who are you?51

creating a component library

Technology

eightshapes llc

system dc design talks

pattern dc design talks

label dc design talks

design systemgeneral

published notesdc design

global navigation bar

component library1