design pattern libraries

DESIGN

PATTERN

LIBRARIES

#patternlib @brianpeppler

Hi!

#patternlib @brianpeppler

What’s a pattern? A reusable solution to a commonly

occurring problem

#patternlib @brianpeppler

A Pattern Language

ChristopherAlexander

#patternlib @brianpeppler

A Pattern Language

ChristopherAlexander

• Problem statement

• Solution

• Example solution

• Context

#patternlib @brianpeppler

Why should we care about patterns?

• Represent best practices

• Increase efficiency

• Provide common language

#patternlib @brianpeppler

Consistency

#patternlib @brianpeppler

A collection of HTML, CSS, and

JavaScript components that align to

a common design and interaction

approach

Web style guides

#patternlib @brianpeppler

A set of design guidelines that dictates a particular look and

feelSeriously?

#patternlib @brianpeppler

select an option

nachos

bananas

nachos

bananas

i

nachosbananas

nachos bananas

#patternlib @brianpeppler

Pattern libraries Organized systems for referencing and

managing design patterns

#patternlib @brianpeppler

Formatting a

pattern

• Pattern name

• Pattern summary

• Problem statement

• Solution

• Solution example

• Context

#patternlib @brianpeppler

#patternlib @brianpeppler

• Pattern name

• Pattern summary

• Problem statement

• Solution example

• Context

Formatting a

pattern

• Related patterns

• Dependencies

• Pattern status

• Open issues

• Sample code

#patternlib @brianpeppler

How much

is too much?

#patternlib @brianpeppler

What goes into a

pattern library?

• elements

• grouped elements

• pages

• flows

#patternlib @brianpeppler

That’s not all

• visualizations

• written content - formatting, voice

and tone

• gestures, keyboard shortcuts

• motion

#patternlib @brianpeppler

Design assets and file

formats

• Sketch

• Photoshop

• Illustrator

• InDesign

• Fireworks

• Omnigraffle

• Axure

#patternlib @brianpeppler

Is this still a thing?

Really? Every time?

arial 24 pt #999

arial 18 pt #999

20 px

24 px

arial 11 pt #999

arial 11 pt #999

20 px

24 px

#patternlib @brianpeppler

Collaboration

#patternlib @brianpeppler

#patternlib @brianpeppler

#patternlib @brianpeppler

github.com/twbs/bootstrap/issues/9501

#patternlib @brianpeppler

Designer + DeveloperTag Team

#patternlib @brianpeppler

Designer + DesignerTag Team

#patternlib @brianpeppler

Pattern libraries for

everyone!

• Visual designer

• Interaction designer

• Front-end developer

• QA

• Technical writer

• Product owner

• Sales/marketing

• Customer Support

• Marketing

#patternlib @brianpeppler

Design workshops

#patternlib @brianpeppler

Product reaction cardsDesign workshop

personal

#patternlib @brianpeppler

Product attributes

• Reliable, honest, credible, accurate, trustworthy

• Insightful, (in)valuable, empowering

• Simple, easy, approachable, efficient, concise, organized

• Empathetic, accommodating, forgiving, compassionate, anticipatory

• Delightful, personal, warm, fun, friendly

Design workshop

#patternlib @brianpeppler

Design principles

• Make it simpleMinimize the time, effort, and skill required to use our products

• Focus on human goalsForgive: Help users avoid, fix and recover gracefully from mistakes

• Inspire delightFind moments of users’ pleasure and pain and acknowledge them accordingly

• Exhibit craftsmanshipDetails matter, both to your users and your credibility. So take the time to get them right

Design workshop

#patternlib @brianpeppler

Affinity diagramDesign workshop

#patternlib @brianpeppler

Designcritique

• What are the goals of the solution?

• What choices were made to support/achieve the goals?

• How effective are the choices that were made?

• What challenges and what missed opportunities may arise

due to the current state of the solution?

• How does the solution provide a positive or negative

experience related to the goal?

#patternlib @brianpeppler

ProcessCreating and evolving patterns

#patternlib @brianpeppler

design concept

design review

validation draft design

development

team feedback

marketing sign-off

start over

requirements

#patternlib @brianpeppler

select an option

nachos

bananas

select an option

nachos

bananas

x

select an option

nachos

bananas

nachos

bananas

select an option

nachos

bananas

x

#patternlib @brianpeppler

Accept Variations

#patternlib @brianpeppler

When do you start?

#patternlib @brianpeppler

More thoughts• But I work in an agency…

• Example pattern libraries

#patternlib @brianpeppler

#patternlib @brianpeppler

#patternlib @brianpeppler

#patternlib @brianpeppler

MailChimphttp://ux.mailchimp.com/patterns

#patternlib @brianpeppler

Salesforcehttp://sfdc-styleguide.herokuapp.com

#patternlib @brianpeppler

Build it

Pattern Labpatternlab.io

Pea.rspea.rs

Self-hosted WordPress + custom fieldswordpress.org

Patternrypatternry.com

#patternlib @brianpeppler

Wrap up

• Use pattern libraries

increase team productivity and

communication; better experience for users

• Use minimal documentation

create just enough documentation to

communicate a full understanding of a pattern

• Establish a lightweight process

be nimble, allow for crowdsourcing curation,

and variations

#patternlib @brianpeppler

Wrap up

• Consider the context; sometimes it’s more

important than consistency

design isn’t one size fits all; accept variations

• Accept Inconsistency

the work will probably never be “done”

#patternlib @brianpeppler

THANK YOUslideshare.net/brianpeppler

#patternlib @brianpeppler

#patternlib @brianpeppler

Resources

• Data visualization

Jan V. White (janvwhite.org), Edward Tufte

• Written content

MailChimp’s voiceandtone.com, Chicago

Manual of Style, Microsoft Manual of Style

• Motion

animate.css, easings.net

• Microsoft Product Reaction Cards

• Design Principles

IBM, Google Material