SlideShare ist ein Scribd-Unternehmen logo
1 von 46
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
Christopher
Alexander
#patternlib @brianpeppler
A Pattern Language
Christopher
Alexander
• 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 +
Developer
Tag Team
#patternlib @brianpeppler
Designer +
Designer
Tag 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
cards
Design 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 simple
Minimize the time, effort, and skill required to
use our products
• Focus on human goals
Forgive: Help users avoid, fix and recover
gracefully from mistakes
• Inspire delight
Find moments of users’ pleasure and pain and
acknowledge them accordingly
• Exhibit craftsmanship
Details matter, both to your users and your
credibility. So take the time to get them right
Design workshop
#patternlib @brianpeppler
Affinity
diagram
Design workshop
#patternlib @brianpeppler
Design
critique
• 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
Process
Creating 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
MailChimp
http://ux.mailchimp.com/patterns
#patternlib @brianpeppler
Salesforce
http://sfdc-styleguide.herokuapp.com
#patternlib @brianpeppler
Build it
Pattern Lab
patternlab.io
Pea.rs
pea.rs
Self-hosted WordPress + custom fields
wordpress.org
Patternry
patternry.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 YOU
slideshare.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

Weitere ähnliche Inhalte

Was ist angesagt?

How to Sell Design to Developers
How to Sell Design to DevelopersHow to Sell Design to Developers
How to Sell Design to DevelopersDave Stadler
 
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Antwerp Meetup
 
Testing Paper Prototypes (IxDworks)
Testing Paper Prototypes (IxDworks)Testing Paper Prototypes (IxDworks)
Testing Paper Prototypes (IxDworks)InteractionDesign
 
Speaker Camp - Full Deck, June 2013
Speaker Camp - Full Deck, June 2013Speaker Camp - Full Deck, June 2013
Speaker Camp - Full Deck, June 2013Russ U
 
The fuzzy line between design + development
The fuzzy line between design + developmentThe fuzzy line between design + development
The fuzzy line between design + developmentAmanda Dorrell
 
Intro to our Agile Release Planning workshop
Intro to our Agile Release Planning workshopIntro to our Agile Release Planning workshop
Intro to our Agile Release Planning workshopLeanAgileTraining
 
Play to Learn: Agile Games with Cards and Dice
Play to Learn: Agile Games with Cards and DicePlay to Learn: Agile Games with Cards and Dice
Play to Learn: Agile Games with Cards and DiceMike Clement
 
Practicing Design Studio Method: a hands-on workshop
Practicing Design Studio Method: a hands-on workshopPracticing Design Studio Method: a hands-on workshop
Practicing Design Studio Method: a hands-on workshopNicole Capuana
 
Agile pm lect1
Agile pm lect1Agile pm lect1
Agile pm lect1Shiraz316
 

Was ist angesagt? (12)

How Do I UX?
How Do I UX?How Do I UX?
How Do I UX?
 
How to Sell Design to Developers
How to Sell Design to DevelopersHow to Sell Design to Developers
How to Sell Design to Developers
 
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
 
Testing Paper Prototypes (IxDworks)
Testing Paper Prototypes (IxDworks)Testing Paper Prototypes (IxDworks)
Testing Paper Prototypes (IxDworks)
 
Speaker Camp - Full Deck, June 2013
Speaker Camp - Full Deck, June 2013Speaker Camp - Full Deck, June 2013
Speaker Camp - Full Deck, June 2013
 
Binary crosswords
Binary crosswordsBinary crosswords
Binary crosswords
 
The fuzzy line between design + development
The fuzzy line between design + developmentThe fuzzy line between design + development
The fuzzy line between design + development
 
Intro to our Agile Release Planning workshop
Intro to our Agile Release Planning workshopIntro to our Agile Release Planning workshop
Intro to our Agile Release Planning workshop
 
Play to Learn: Agile Games with Cards and Dice
Play to Learn: Agile Games with Cards and DicePlay to Learn: Agile Games with Cards and Dice
Play to Learn: Agile Games with Cards and Dice
 
Practicing Design Studio Method: a hands-on workshop
Practicing Design Studio Method: a hands-on workshopPracticing Design Studio Method: a hands-on workshop
Practicing Design Studio Method: a hands-on workshop
 
Agile pm lect1
Agile pm lect1Agile pm lect1
Agile pm lect1
 
Emperors new clothes_jab
Emperors new clothes_jabEmperors new clothes_jab
Emperors new clothes_jab
 

Andere mochten auch

Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Matt Vanderpol
 
예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법hyun soomyung
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표ChangGyum Kim
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template EngineOhgyun Ahn
 
Slack trello notification guide
Slack trello notification guideSlack trello notification guide
Slack trello notification guideGoonoo Kim
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용ChangGyum Kim
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015Goonoo Kim
 
Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존동수 장
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XpressEngine
 
Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선기동 이
 
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기NAVER D2
 

Andere mochten auch (11)

Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016
 
예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template Engine
 
Slack trello notification guide
Slack trello notification guideSlack trello notification guide
Slack trello notification guide
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
 
Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
 
Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선
 
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
 

Ähnlich wie Pattern Libraries Organized Systems

Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN MeetupLean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN MeetupJose Berengueres
 
The guide to your first prototype
The guide to your first prototypeThe guide to your first prototype
The guide to your first prototypeAsh Rahman
 
Newsletters in an Hour a Week
Newsletters in an Hour a WeekNewsletters in an Hour a Week
Newsletters in an Hour a WeekDesignHammer
 
Develop a good product - 3 phases 3 methodologies - detail
Develop a good product - 3 phases 3 methodologies - detailDevelop a good product - 3 phases 3 methodologies - detail
Develop a good product - 3 phases 3 methodologies - detailJean-François Nguyen
 
I'm a BA Girl in an Agile World @AgileDC 20190923
I'm a BA Girl in an Agile World @AgileDC 20190923I'm a BA Girl in an Agile World @AgileDC 20190923
I'm a BA Girl in an Agile World @AgileDC 20190923Mindy Bohannon
 
Nasdaq Pro/Design Masterclass at the Entrepreneurial Center
Nasdaq Pro/Design Masterclass at the Entrepreneurial CenterNasdaq Pro/Design Masterclass at the Entrepreneurial Center
Nasdaq Pro/Design Masterclass at the Entrepreneurial CenterChris Avore
 
Harvesting user insights revolve conf v09
Harvesting user insights revolve conf v09Harvesting user insights revolve conf v09
Harvesting user insights revolve conf v09Darren Kall
 
Uncovering Search Behavior Through UX Methodology
Uncovering Search Behavior Through UX MethodologyUncovering Search Behavior Through UX Methodology
Uncovering Search Behavior Through UX MethodologyRed Blue Blur Ideas
 
Rapidly Design A Solution To A Real World Problem
Rapidly Design A Solution To A Real World ProblemRapidly Design A Solution To A Real World Problem
Rapidly Design A Solution To A Real World ProblemBenjamin Bowes
 
Newsletters in an Hour a Week
Newsletters in an Hour a WeekNewsletters in an Hour a Week
Newsletters in an Hour a WeekJeanette Larsen
 
Discussing Design: The Art of Critique
Discussing Design: The Art of CritiqueDiscussing Design: The Art of Critique
Discussing Design: The Art of CritiqueAaron Irizarry
 
IT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design ThinkingIT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design ThinkingNipuna Silva
 
Soda research @ ProductTank meetup: Get customer insights with minimal effort
Soda research @ ProductTank meetup: Get customer insights with minimal effortSoda research @ ProductTank meetup: Get customer insights with minimal effort
Soda research @ ProductTank meetup: Get customer insights with minimal effortPieter Koenis
 
Jackman Reinvents: Design Thinking Workshop at HumberLaunch
Jackman Reinvents: Design Thinking Workshop at HumberLaunchJackman Reinvents: Design Thinking Workshop at HumberLaunch
Jackman Reinvents: Design Thinking Workshop at HumberLaunchJackman Reinvents
 
21 Helpful Tips for Interior Designers - Blogging and Social Media
21 Helpful Tips for Interior Designers - Blogging and Social Media21 Helpful Tips for Interior Designers - Blogging and Social Media
21 Helpful Tips for Interior Designers - Blogging and Social MediaDigitalSherpa
 
Never lose sight of the customer using personas
Never lose sight of the customer using personasNever lose sight of the customer using personas
Never lose sight of the customer using personasAtlassian
 

Ähnlich wie Pattern Libraries Organized Systems (20)

Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN MeetupLean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN Meetup
 
The guide to your first prototype
The guide to your first prototypeThe guide to your first prototype
The guide to your first prototype
 
Newsletters in an Hour a Week
Newsletters in an Hour a WeekNewsletters in an Hour a Week
Newsletters in an Hour a Week
 
Develop a good product - 3 phases 3 methodologies - detail
Develop a good product - 3 phases 3 methodologies - detailDevelop a good product - 3 phases 3 methodologies - detail
Develop a good product - 3 phases 3 methodologies - detail
 
I'm a BA Girl in an Agile World @AgileDC 20190923
I'm a BA Girl in an Agile World @AgileDC 20190923I'm a BA Girl in an Agile World @AgileDC 20190923
I'm a BA Girl in an Agile World @AgileDC 20190923
 
Will it Launch?
Will it Launch? Will it Launch?
Will it Launch?
 
What is design critique?
What is design critique?What is design critique?
What is design critique?
 
Nasdaq Pro/Design Masterclass at the Entrepreneurial Center
Nasdaq Pro/Design Masterclass at the Entrepreneurial CenterNasdaq Pro/Design Masterclass at the Entrepreneurial Center
Nasdaq Pro/Design Masterclass at the Entrepreneurial Center
 
Harvesting user insights revolve conf v09
Harvesting user insights revolve conf v09Harvesting user insights revolve conf v09
Harvesting user insights revolve conf v09
 
Uncovering Search Behavior Through UX Methodology
Uncovering Search Behavior Through UX MethodologyUncovering Search Behavior Through UX Methodology
Uncovering Search Behavior Through UX Methodology
 
Rapidly Design A Solution To A Real World Problem
Rapidly Design A Solution To A Real World ProblemRapidly Design A Solution To A Real World Problem
Rapidly Design A Solution To A Real World Problem
 
Newsletters in an Hour a Week
Newsletters in an Hour a WeekNewsletters in an Hour a Week
Newsletters in an Hour a Week
 
Discussing Design: The Art of Critique
Discussing Design: The Art of CritiqueDiscussing Design: The Art of Critique
Discussing Design: The Art of Critique
 
Selling UX
Selling UXSelling UX
Selling UX
 
IT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design ThinkingIT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design Thinking
 
How to win StartupWeekend
How to win StartupWeekendHow to win StartupWeekend
How to win StartupWeekend
 
Soda research @ ProductTank meetup: Get customer insights with minimal effort
Soda research @ ProductTank meetup: Get customer insights with minimal effortSoda research @ ProductTank meetup: Get customer insights with minimal effort
Soda research @ ProductTank meetup: Get customer insights with minimal effort
 
Jackman Reinvents: Design Thinking Workshop at HumberLaunch
Jackman Reinvents: Design Thinking Workshop at HumberLaunchJackman Reinvents: Design Thinking Workshop at HumberLaunch
Jackman Reinvents: Design Thinking Workshop at HumberLaunch
 
21 Helpful Tips for Interior Designers - Blogging and Social Media
21 Helpful Tips for Interior Designers - Blogging and Social Media21 Helpful Tips for Interior Designers - Blogging and Social Media
21 Helpful Tips for Interior Designers - Blogging and Social Media
 
Never lose sight of the customer using personas
Never lose sight of the customer using personasNever lose sight of the customer using personas
Never lose sight of the customer using personas
 

Kürzlich hochgeladen

VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiSuhani Kapoor
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxjeswinjees
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...nagunakhan
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...babafaisel
 
Petrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptxPetrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptxIgnatiusAbrahamBalin
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentationamedia6
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵anilsa9823
 
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...nagunakhan
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130Suhani Kapoor
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Yantram Animation Studio Corporation
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxTusharBahuguna2
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 

Kürzlich hochgeladen (20)

VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptx
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
 
Petrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptxPetrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptx
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentation
 
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
 
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
 

Pattern Libraries Organized Systems

Hinweis der Redaktion

  1. Lucky day, back to back design systems About me Jumpstart the process of building a pattern library This isn’t hard. Pattern libraries aren’t rocket science. As people who work with digital products, some of our biggest challenges are consistency and upkeep. Patterns libraries can ease that pain and create recognizable experiences for users. In this presentation I’ll discuss the process of creating, maintaining, and evolving a design language using a pattern library. I’ll also talk about documenting patterns and involving others to create a design consensus. ↳ let’s get this out of the way…
  2. So, what’s a pattern? Patterns are everywhere. from nature to virtually almost anything that we build. Provide common understanding for how things should work (books, mice, chairs…they all have an excepted standard for how we interact with them) Patterns prominent in architecture - imagine trying to build this room without a pattern..it doesn’t work, right? I’d like to draw a parallel between architecture and digital design because there are a lot of similarities. ↳ Someone who’s widely known for using patterns in architecture is Christopher Alexander
  3. almost 40 years ago architect Christopher Alexander coauthored A Pattern Language with five others proposed a scalable framework for creating and extending architectural design systems different scale than what we do, but there are similarities deal with budgets, scalability, clients, regulations, and other designers. With this book, Alexander popularized a system to help reduce some of these friction points. Alexander took inventory and cataloged 200+ architectural patterns ordered by complexity Like Atomic Design, the patterns start simple with basic elements (building materials), then scale to rooms, buildings, neighborhoods, towns and regions ↳ The book also recommends a standard for formatting patterns that includes for attributes:
  4. problem statement: This answers the question, “What problem is the solution intended to solve?” explanation of the solution example of the solution (in this case an image of the pattern) explanation of the pattern’s context. How does it play with other patterns and when is it OK and not OK to use a pattern? Again, I’m referencing this book because its ideas influence how we deal with patterns in digital work This format will come in handy when we build our own patten library ↳ Dense, technical book, but fascinating
  5. Why should we even care? There are a few reasons. Represent best practices: These are the ideas that have been tested and validated through frequent use Increase efficiency: free designers from tedious and repetitive work and give developers reusable code the end result it faster production of new features and easier maintenance of existing features Provide Common language: gives team a shared language when we discuss design. ↳ Then the biggest one…Consistent user experience. This can be a huge pain point for users. So let’s talk about consistency.
  6. In order to create products that are useful, usable, and desirable, we need patterns for consistency consistency is important because helps users gain familiarity and trust with our products remember Adobe products Switch between Macromedia and Adobe - relearn and retrain If they had consistency, it would have improved experience. Users would LOVE products. We seen this issue with all big players in every industry…When you go from a company’s website, app, portal, admin screens…all look like they come from completely different companies. And that has a huge impact on trust and familiarity with users. So consistency is important. Let’s pause here and look at the flip side for a minute I’ve rolled to a number of design systems, and every time some people resist consistency because: too rigid and monolithic, doesn’t allow variation or consider context of the situation, limits creativity valid concerns, but ones that we can deal with in other ways that aren’t at the expense of consistency. ↳ So, how can we design for consistency?
  7. We have these awesome things called style guides! Mix together some HTML, CSS, and JavaScript and . I love web style guides; it’s amazing that we have these resources insanely lucky to have front-end frameworks like Bootstrap and Foundation. It was less than 4 years ago that Bootstrap was released. Years ago, start job ask questions about standards ↳ Now frameworks like these are also inspiring teams to roll out their own web style guides. Sites like Lonely Planet, A List Apart, Code for America are all awesome examples
  8. be cool, brand design language: Mozilla’s Sandstone GitHub’s Primer. my team wanted profound, meaningful name. Looked to art, culture, history. We found a name that was significant to us, and we called called it Blue Ivy. Does anyone know the origin of Blue Ivy? Anyway…These tools are a huge advancement Extremely efficient for designers and developers Style guides are good at showing what the design is and how to implement design But they don’t typically explain why a pattern is designed a certain way or what the context is ↳ But for designers and developers, style guides leave open to interpretation and fragmentation. Here’s an example.
  9. Let’s take the select list for example. It does what its name says: let’s users make a selection. We also have radio, toggle, button groups. they do the same things. Style guides are filled with these. How do we know when to use which one? These are just basic elements. In more specialized apps where custom elements are modular and scalable, and we can turn parts of the design off and on, how do we know when to do what? ↳ Again, I love style guides, but when we’re working with other people, pattern libraries help us make more informed decisions
  10. So let’s talk about the nuts and bolts of building a pattern library: what they are and how to curate one Pattern libraries are a lot like style guides, but they go beyond how things look . The distinction I’m making is that they provide context and rationale behind design decisions ↳ And if we go back to what I said a few minutes ago, there’s a standard format for documenting a pattern.
  11. So this is it. It’s almost unchanged from what was proposed in A Pattern Language There are a few small tweaks: This format is updated to include a summary because…summaries are nice The second change is the solution example This is all you need. This is the format for pattern documentation. Any time a new pattern is created, it should include this information. ↳ They typically look like this, which is from YPL
  12. ↳ But depending on the makeup, style, or needs of the team, a whole lot more can be documented
  13. This may seem like a lot and it’s not necessary for every team I know this can seem overwhelming. But a lot of it isn’t text written in a narrative form. On the admin page that runs this thing, you might be checking a simple box that says ready for release. Related Patterns - go back to example of users needing to make a selection, cross-reference alternative approaches Dependencies - if you’re building a pattern that uses other patterns, help others understand how that combined pattern is decomposed ↳ This begs the question…how much is too much?
  14. I’ve heard the complaint that nobody reads directions. I know it gives us more street cred to say we threw out the manual, but as designers and developers, it’s OUR J-O-B to know how this stuff works. OK, i get it, you don’t need instructions for a button. or a select list. Anything less is just being lazy. The goal of a designer creating a standard should be to document just to communicate a full understanding of a pattern. We want to be concise. If you’ve written more than a page full of content you’ve gone too far. Something that may not fit into a pattern library is extensive code documentation. If we look at the jQuery UI; it links to the API documentation. ↳ Alright. Now that we’ve talked about formatting patterns, let’s talk discuss what goes into a pattern library
  15. This is where I feel a strong connection to what Brad says when he talks about Atomic Design. elements (HTML) These are basic building blocks Element - HTML Grouped elements - this is what you get when you combine HTML elements together. Something like a select list with a search filter Pages - like a profile page. One project I was involved in was basically analytics for hospital systems. and we reused the same page pattern for physicians, practice lines, hospitals, and hospital systems. made it easier for us. Flows - can be something like adding or removing users or a registration process that can involve multiple pages and systems ↳ This stuff is pretty obvious. But where people drop the ball is by only including that stuff. There’s so much more that can be standardized.
  16. Visualizations. When is it OK to use a pie chart vs a line graph? Here’s a hint: Jan V. White’s Using Charts and Graphs. It has established rules for when to use certain visualizations. Are labels aligned to top, middle, or bottom? If you like Edward Tufte, check out Jan V. White. Written Content MailChimp’s website voiceandtone.com, which is an awesome example for how to write consistent and contextually-relevant copy. Read every word on that site if you have a hand in writing UI copy or anything on the web. Gestures: has anyone see the cheat sheets for Adobe products? it’s amazing, and that stuff can’t live in someone’s head. Motion If you use any kind of motion in your design, there’s a huge potential to create something that looks inconsistent. Getting a single element to behave consistently across a product shouldn’t be a stretch, but getting all elements to feel like part of an ecosystem can be tricky. For example, notifications don’t need to move with the same timing or orientation as the opening and closing of a menu. But they should have the same branded kinetic identity. What do I mean by CI? Each product should move in a manner that’s indicative of their brand. Sites like animate.css and easings.net can help with this. ↳ Now that we know what goes into the library, we need a way to render designs
  17. Standardize your toolsets. If you’re managing the library, provide assets in 1-2 file formats. I’m not going to tell you which one to pick because I’ll say it depends. Recently though…going with Adobe so that we can play in a few environments, prototype, animate, etc. ↳ Now that I’ve discussed what to format and how to do it, I want to share something that shouldn’t be in a pattern library.
  18. If we’re doing this kind of work, it’s because there’s a gap between designers and developers. This is happening because the intentions of designers aren’t being communicated well. It points to a gap between design and development, and pattern libraries can help bridge that gap by giving these groups a common reference point.` And by the way, when using a pattern library, this kind of specification only needs to happen when patterns are initially built. Never again should anyone be subjected to this kind of work again. ↳ And this brings us to collaboration
  19. we have problems working with other people, right? I can’t be the only one. and I want to address some issues that pattern libraries can help with. Last time I gave this talk somebody made the comment that designing patterns shouldn’t be this hard. and it’s not. but working with other people is. In most jobs, the hardest part is negotiating and playing well with others. I really don’t think there’s anything harder. Design looks easy compared to issues I’ve seen come between people. ↳ But when you mix design and people together, it can be especially challenging. I saw a quote a few months ago that really struck me and I’d like to share it with you.
  20. It’s something that Kim Goodwin tweeted, and it’s attributed to Abi Jones, who’s a designer at Google. She says, “One of the cruelest things you can do is introduce a team to a new design language” She’s right; it’s a bad thing to do. This suggests that there was a select group that went to a secret location, worked in a black box, and out popped a design. This isn’t Apple and you’re not making the next groundbreaking secret project. Don’t “introduce” your team to a design language. Instead of telling them that ’s coming…you’ll get to see it in a few weeks, make them a part of the process. Nobody should be surprised and there should be no big reveal. If you’ve ever had this happen to you, you know that it can be a big change. But even the little things matter. They matter to us because the ones building the products. I want to tell you a story about a change in Bootstrap that happened a little over a year ago. ↳ This is a story about making changes, pissing people off and maybe a little lack of collaboration. Bootstrap is of course the front end framework that…
  21. Daily updates to Bootstrap. There’s a lot changing all the time Sometimes there simply tweaks to the code and other times it affects the UI. Well, this time Mark Otto removed a 1px vertical line from Bootstrap. he pissed off a few people 54 comments imagine what happens when you modify an element with even more utility? what’s the lesson here? Lesson is understand what you’re breaking when you make a change talk to the people consuming the patterns you’re designing and developing ↳ This is an example of developers who are unable to get on the same page. But there’s another classic pair that I’d like to bring together, and that’s the designer and developer.
  22. this is kinda what I want the team to look like. Simpatico. don’t want to perpetuate the notion of being at odds—it’s a trap also want to acknowledge that it’s an issue that sometimes exists You’ve probably seen this before. Designer tosses wall, doesn’t talk to developer, and doesn’t consider constraints of solution. Developer builds solution to address constraints. Maybe won’t notice the details of the visual and interaction design. Might use a plugin to make work faster that doesn’t exactly align with the design. Then it’s time for the release to go live. First thing to do is for designers and dev to co-design. work through the process together. So pattern libraries can help bridge the gap between the design and development. It gives them a shared understanding of what’s an acceptable experience. It’s not going to be a panacea, but it gets the two on the same playing field. I’ve seen this work really well. No longer need high-fidelity design ↳ So that covers designer and developer interaction. But there’s another relationship that doesn’t get enough attention is designer-designer interaction.
  23. Based on my experience, this is an even bigger problem. 30 designers, each responsible for a product or part of a product. And what they were designing was a suite of enterprise products that looked and worked very differently from one another. How did we get there? It usually happens when a new product is spun up and someone says, “we’re not going to follow what was done because there’s now a better way to do it”. …And a baseline is never set. Another cause for this fractured experience is because designers adopt a very myopic view. they’re incentivized to improve only their piece of the puzzle. Their piece is only one phase of the user journey, and they’re not looking outward at full user journey that feels inconsistent and broken. Designers are on the front lines to help fix this, but they must get on the same page. ↳I’ll talk about how to get on the same page in a minute, but first I want to look at a few other players in the mix that can benefit from a pattern library.
  24. Pattern libraries aren’t just for designers and developers. They’re for your product team and others in the organization. They may not reference it often. And by the way, don’t put this on some obscure dev server with an some garbled URL. Don’t require passwords. Brand it. Give it a memorable subdomain on your company server like blueivy.companyname.com. QA - need to validate the design Technical Writer - could be someone writing microcopy for the UI or help documentation for users And then there are others. This is a lot of people. What’s interesting about them is that they represent virtually every phase of a typical user journey. So they’re going to have opinions about how a product’s design serves its users. ↳ We know that it’s hard to get everyone on the same page. If it was easy we wouldn’t need this kind of documentation. So how do we create a singular vision when we can’t agree on a design approach? We collaborate! We set up workshops and deal with our issues.
  25. Not everyone needs to be involved in these activities. I’m not talking about trust falls or spaghetti towers or whatever it is you do with marshmallows. This is something more productive. To get started, identify a facilitator. Usually your design lead or another sponsor of the pattern library project ↳ The first exercise is a warm-up and helps teams identify what direction to take their design.
  26. Good activity for anyone who interacts with users, Using product reaction cards helps teams figure out how to present the user experience. When I say UX, i’m not just talking about the UI, but the full UX from the website or a product to call centers and marketing collateral. In this activity, participants are given a deck of cards with descriptive words on them. Don’t need to come up with your own words Originally developed by Microsoft to test desirability of a product, there’s a set of 118 words that you can use. For purposes of this exercise, I recommend weeding out the negative words. ↳ Pick 5 out of the 100 or so.
  27. They help us define how we want users perceive—and interact with—a product. They also tell us how to design our product. Going down the list we see things like Trustworthy and Empathetic. Accommodating and Forgiving. What does that mean? Example is deleting… ↳ Defining product attributes also helps inform the principles for your design
  28. You might scoff at something like this and think that they’re too broad and not relevant We need design principles because they convey the fundamental and unwavering ideas about a product its design. It will feel weird and out of place to put this in a pattern library, but do it. The principles are for you, but they’re also for the VP of sales who pushes features and cares less about the experience. So these are a few examples of product attributes and design principles. Check out IBM and Google’s Material for great examples of design principles ↳ The last part of the workshop is to identify all of the elements and templates used in your products
  29. Process Identify: all existing patterns. Although he didn’t mention is, Brad also has a great post on doing an interface inventory for your products. Google Interface inventory Brad Frost and you’ll find it. Group: like patterns. Serves two purposes: identifies redundancy and it also establishes IA for the library, That’s it. There’s the foundation for the library. But since there’s likely redundancy, we need to pick the best one. We can do that by looking at product attributes and design philosophy, but there’s another too that can help us ↳…because evaluating visual and interaction design can be a subjective practice. Using a formal design critique can make the decisions a lot more objective.
  30. I have a developer friend who says it’s not hard to design, but design is hard to argue about. I agree. We debate about design it because we don’t always know how to talk about it. Critiques aren’t about criticism. It’s about creating a framework to talk about design constructively. Also prevents discussions from devolving into subjective preferences. This is how it works: gather design team a designer presents their work. designer describes how they arrived at their solution by answering a series of targeted questions. This is not design by committee. It’s purely constructive feedback hold design up to these standards. if they fail, start over/iterate ↳ I’ve talked about who the players are and how a few activities can smooth their relationships. Let’s talk about how the library evolves over time. And it starts with process.
  31. for most teams the process should involve a designer who acts as a curator of the pattern library. And they shouldn’t do this alone, this process works best when they’re paired with a developer as well curating library not a full time job, but requires someone to lead a team toward a shared vision everyone else - all designers/devs given authority to propose and submit patterns ↳ On to the process itself. I advocate something that’s lightweight.
  32. Most governance models look like this. I think it can be easier and based on simple logic When designers start work on a new task, they should ask themselves does a design exist to solve my problem? If answer is yes, then they can move along happily. If answer is no, then there should be a discussion about whether or not it’s needed by others and should be a pattern. Sometimes it shouldn’t be a pattern and can be a one-off customization Other times, it’s a completely new pattern. in that case, the designer creating the pattern should draft the documentation and submit it to the library There’s another scenario, and this is one that I see pretty often, and it’s full of issues. It’s occurs when a pattern exists, but the designer needs it to do something slightly different. Most of the time it’s cheaper in the short term to build it from scratch. And this is where some serious behavior change is involved. Instead of building from scratch, we want the existing pattern to be extended. to build the b/c designer/dev would usually say, we’re just going to build it our own way. (Usually the answer is yes, 90% of it does, but i need this other 10% for something…) In this situation, a pattern can be used to solve most of a designer’s problem, but they’re breaking the pattern with some tweaks. But these aren’t breaks, they’re enhancements. They’re making the pattern more modular. ↳ Go back to example of a select list.
  33. In the scenario that I just mentioned, there’s an existing pattern like this select list. Others may say, “I like it, but I’m building one with a filter. Or a checkbox multi-select. These are not separate patterns. These are represent modular variations to a single pattern. Look at something like a select list. It’s something that could be merged with a filter or an enhanced multi select. Or it could combine both. ↳ The lesson here is to accept variations.
  34. Google’s Material has three variations for buttons. They could have easily said, “we have one style, and it’s a rectangle with text inside”. But instead, they recognized that design has context and that one solution doesn’t meet all needs. So that’s the process in a nutshell: Crowdsource the production of the pattern library Identify a curator to help manage it. And accept variations. ↳ Now that we’re near the end, let’s talk about the beginning.
  35. By the time you think about documenting patterns, it’s usually too late and inconsistency has crept into a product. So start at the beginning of a project, but I don’t think that you always need a pattern library right away. But design by using symbols and in Sketch, Photoshop, Illustrator, or whatever tool you use. Share symbols in libraries with Creative Cloud. If you’re not using CC, use Dropbox or a folder on the company network to sync the files. And work with your front-end developers to create a centralized web style guide. Generally speaking, when a team grows beyond a few people, it’s a good idea to begin documenting patterns and providing rationale As the pattern library is developed, don’t worry too much about the information architecture. As the library expands, begin to add more structure. ↳ Before I end this talk, I have a few more thoughts to share.
  36. Agency: talked a lot about pattern libraries from perspective of a product team, but that may not work for everyone A year and a half ago I transitioned away from in-house design and joined a design agency. Suddenly, I was in a place that designed and developed really customized experiences for every project. That seems nuts, right? I can’t say that there’s really a place for pattern libraries at an agency. But there can be baseline assets that can be reused. ↳ I also want to briefly share with you some design systems that I think work pretty well
  37. Yahoo Design Pattern Library Was a point of inspiration for me going back almost 10 years Good, concise documentation with a solid organization
  38. Material’s documentation is pretty good with describing design details. But it gets a knock against it for not being very interactive—it has videos and static images.
  39. MailChimp gets pretty close to a sweet spot for lightweight documentation. They provide HTML-based examples, code to render the element, and a few thoughts on how the pattern is generally used.
  40. Salesforce is an interesting one because it doesn’t actually provide any rationale, but they build about a dozen reference pages to show how patterns can be grouped together. Really nice ↳Now we have a reference point for pattern libraries. How do we build them?
  41. ↳ Alright. Let’s wrap this up.
  42. OK. Today I’ve shown you what goes into a pattern library and how the patterns can be formatted. I’ve discussed the process of creating and evolving patterns. And you saw some examples of patterns and pattern libraries. Before I go, I want to recap a few main points: The first one is simple… Use pattern libraries to provide design rationale, increase productivity, communication, and users’ experiences. Use minimal documentation: create just enough to communicate a full understanding of a pattern Establish a lightweight process: Create a model that works for you and encourages iteration from others. be nimble and allow for evolution through variations
  43. These last two go hand in hand When building a pattern library, consider the context. Sometimes it’s more important than consistency, so be accepting of variations. And finally… Accept inconsistency: nothing is ever done when you’re working in digital, so unless inconsistency is breaking the usability of the product, don’t worry about it. But keep fighting the good fight.
  44. These slides will be on Slideshare later today along with a full list of the resources that I mentioned in this presentation. I’m happy to take questions now and you can always find me in the hallways or tweet at me. Are there any questions?
  45. These slides will be on Slideshare later today along with a full list of the resources that I mentioned in this presentation. I’m happy to take questions now and you can always find me in the hallways or tweet at me. Are there any questions?