CONCEPTOLOGYCONCEPTOLOGY

Design Pattern Library

Why, How, When and WhoKarri Ojanen – 09/25/2012

CONCEPTOLOGYCONCEPTOLOGY

Design Patterns

Pattern = “optimal solution to a common problem within a specific context”(e.g. tabs, pagination…)

Photo by bdesham

CONCEPTOLOGYCONCEPTOLOGY

Patterns vs. Components

• Patterns describe the overarching concept behind an interaction

• A component is a specific, skinned implementation of a pattern– Components are how patterns become

“real”, visually designed pieces of the interface

CONCEPTOLOGYCONCEPTOLOGY

Design Pattern Library

A pattern library is a collection of the building blocks that form the product (e.g. application, tool, or website)

Photo by Rob Young

CONCEPTOLOGYCONCEPTOLOGY

What to Include?

• What the pattern is• When and why to use it• A visual example– Reusable design comp

• An example in context• A link to the dev component– Live example and code snippet

CONCEPTOLOGYCONCEPTOLOGY

Why?• Consistency

– Creating an interface that is consistently good is critical to creating a great brand and product

• Efficiency– Pattern library frees designers from the heavy lifting of

repetitive design work• Speed

– Pattern library gives designers and developers the building blocks to construct complex interactions

• Vocabulary– Pattern library gives the team a shared understanding

• Evolution– When a component gets changed, it is updated across

all instances in the product

CONCEPTOLOGYCONCEPTOLOGY

Who?

• Librarian– The head of UX/IxD or another interaction

design lead– Does the initial set up, owns, and maintains the

library

• Designer– Collects, creates, owns and maintains the visual

design assets

• Developers– Collect, create, own and maintain the dev assets

CONCEPTOLOGYCONCEPTOLOGY

Resources

• Kris Niles: Creating a Pattern Library with Evernote and Fireworks

• Erin Malone: Why Have a Design Pattern Library?

• Nathan Curtis:So You Wanna Build a Library, Eh?

CONCEPTOLOGYCONCEPTOLOGY

Karri Ojanen@karrioConceptology.orgFinnformation.net