Transcript
Page 1: Design Pattern Libraries

DESIGN

PATTERN

LIBRARIES

#patternlib @brianpeppler

Page 2: Design Pattern Libraries

Hi!

#patternlib @brianpeppler

Page 3: Design Pattern Libraries

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

occurring problem

#patternlib @brianpeppler

Page 4: Design Pattern Libraries

A Pattern Language

ChristopherAlexander

#patternlib @brianpeppler

Page 5: Design Pattern Libraries

A Pattern Language

ChristopherAlexander

• Problem statement

• Solution

• Example solution

• Context

#patternlib @brianpeppler

Page 6: Design Pattern Libraries

Why should we care about patterns?

• Represent best practices

• Increase efficiency

• Provide common language

#patternlib @brianpeppler

Page 7: Design Pattern Libraries

Consistency

#patternlib @brianpeppler

Page 8: Design Pattern Libraries

A collection of HTML, CSS, and

JavaScript components that align to

a common design and interaction

approach

Web style guides

#patternlib @brianpeppler

Page 9: Design Pattern Libraries

A set of design guidelines that dictates a particular look and

feelSeriously?

#patternlib @brianpeppler

Page 10: Design Pattern Libraries

select an option

nachos

bananas

nachos

bananas

i

nachosbananas

nachos bananas

#patternlib @brianpeppler

Page 11: Design Pattern Libraries

Pattern libraries Organized systems for referencing and

managing design patterns

#patternlib @brianpeppler

Page 12: Design Pattern Libraries

Formatting a

pattern

• Pattern name

• Pattern summary

• Problem statement

• Solution

• Solution example

• Context

#patternlib @brianpeppler

Page 13: Design Pattern Libraries

#patternlib @brianpeppler

Page 14: Design Pattern Libraries

• Pattern name

• Pattern summary

• Problem statement

• Solution example

• Context

Formatting a

pattern

• Related patterns

• Dependencies

• Pattern status

• Open issues

• Sample code

#patternlib @brianpeppler

Page 15: Design Pattern Libraries

How much

is too much?

#patternlib @brianpeppler

Page 16: Design Pattern Libraries

What goes into a

pattern library?

• elements

• grouped elements

• pages

• flows

#patternlib @brianpeppler

Page 17: Design Pattern Libraries

That’s not all

• visualizations

• written content - formatting, voice

and tone

• gestures, keyboard shortcuts

• motion

#patternlib @brianpeppler

Page 18: Design Pattern Libraries

Design assets and file

formats

• Sketch

• Photoshop

• Illustrator

• InDesign

• Fireworks

• Omnigraffle

• Axure

#patternlib @brianpeppler

Page 19: Design Pattern Libraries

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

Page 20: Design Pattern Libraries

Collaboration

#patternlib @brianpeppler

Page 21: Design Pattern Libraries

#patternlib @brianpeppler

Page 22: Design Pattern Libraries

#patternlib @brianpeppler

github.com/twbs/bootstrap/issues/9501

Page 23: Design Pattern Libraries

#patternlib @brianpeppler

Designer + DeveloperTag Team

#patternlib @brianpeppler

Page 24: Design Pattern Libraries

Designer + DesignerTag Team

#patternlib @brianpeppler

Page 25: Design Pattern Libraries

Pattern libraries for

everyone!

• Visual designer

• Interaction designer

• Front-end developer

• QA

• Technical writer

• Product owner

• Sales/marketing

• Customer Support

• Marketing

#patternlib @brianpeppler

Page 26: Design Pattern Libraries

Design workshops

#patternlib @brianpeppler

Page 27: Design Pattern Libraries

Product reaction cardsDesign workshop

personal

#patternlib @brianpeppler

Page 28: Design Pattern Libraries

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

Page 29: Design Pattern Libraries

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

Page 30: Design Pattern Libraries

Affinity diagramDesign workshop

#patternlib @brianpeppler

Page 31: Design Pattern Libraries

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

Page 32: Design Pattern Libraries

ProcessCreating and evolving patterns

#patternlib @brianpeppler

Page 33: Design Pattern Libraries

design concept

design review

validation draft design

development

team feedback

marketing sign-off

start over

requirements

#patternlib @brianpeppler

Page 34: Design Pattern Libraries

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

Page 35: Design Pattern Libraries

Accept Variations

#patternlib @brianpeppler

Page 36: Design Pattern Libraries

When do you start?

#patternlib @brianpeppler

Page 37: Design Pattern Libraries

More thoughts• But I work in an agency…

• Example pattern libraries

#patternlib @brianpeppler

Page 38: Design Pattern Libraries

#patternlib @brianpeppler

Page 39: Design Pattern Libraries

#patternlib @brianpeppler

Page 40: Design Pattern Libraries

#patternlib @brianpeppler

MailChimphttp://ux.mailchimp.com/patterns

Page 41: Design Pattern Libraries

#patternlib @brianpeppler

Salesforcehttp://sfdc-styleguide.herokuapp.com

#patternlib @brianpeppler

Page 42: Design Pattern Libraries

Build it

Pattern Labpatternlab.io

Pea.rspea.rs

Self-hosted WordPress + custom fieldswordpress.org

Patternrypatternry.com

#patternlib @brianpeppler

Page 43: Design Pattern Libraries

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

Page 44: Design Pattern Libraries

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

Page 45: Design Pattern Libraries

THANK YOUslideshare.net/brianpeppler

#patternlib @brianpeppler

Page 46: Design Pattern Libraries

#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


Top Related