Issuu on Google+

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


DCDesignTalks.Arial