Download - 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
#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