SlideShare a Scribd company logo
Design Pattern Library

 Why, How, When and Who
    Karri Ojanen – 09/25/2012




                                CONCEPTOLOGY
Design Patterns




                                          Photo by bdesham



Pattern = “optimal solution to a common
problem within a specific context”
(e.g. tabs, pagination…)
                                     CONCEPTOLOGY
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




                                        CONCEPTOLOGY
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




                                       CONCEPTOLOGY
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


                                    CONCEPTOLOGY
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



                                                                CONCEPTOLOGY
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
                                              CONCEPTOLOGY
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?



                                       CONCEPTOLOGY
Karri Ojanen
@karrio
Conceptology.org
Finnformation.net




                    CONCEPTOLOGY

More Related Content

What's hot

Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the future
Ariana Koblitz
 
Lean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYC
Lean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYCLean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYC
Lean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYC
Ariadna Font Llitjos
 
CX Design and Journey Mapping for Social Thinkers
CX Design and Journey Mapping for Social ThinkersCX Design and Journey Mapping for Social Thinkers
CX Design and Journey Mapping for Social Thinkers
John Kembel
 
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Harriet Wakelam
 
Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)
Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)
Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)
Rosenfeld Media
 
Building the User Experience Community at SDL
Building the User Experience Community at SDLBuilding the User Experience Community at SDL
Building the User Experience Community at SDL
Philipp Engel
 
Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...
Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...
Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...
Rosenfeld Media
 
Business Analysis in Agile Philosophy
Business Analysis in Agile PhilosophyBusiness Analysis in Agile Philosophy
Business Analysis in Agile Philosophy
Ahmed Reda Kraiz
 
Why User Experience Matters
Why User Experience MattersWhy User Experience Matters
Why User Experience Matters
Kshitiz Anand
 
OSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By CommitteeOSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By Committee
Ted Leung
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
Ravi Bhadauria
 
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
Use Age
 
The 6 Immutable Principles of UX
The 6 Immutable Principles of UXThe 6 Immutable Principles of UX
The 6 Immutable Principles of UX
Intergen
 
The 3 Musketeers
The 3 MusketeersThe 3 Musketeers
The 3 Musketeers
Lillian Ayla Ersoy
 
Harnessing the Value of UX
Harnessing the Value of UXHarnessing the Value of UX
Harnessing the Value of UX
Jason Ulaszek
 
Guiding UX Principles
Guiding UX PrinciplesGuiding UX Principles
Guiding UX Principles
Rob Surrency
 
UX & Design Thinking for BI Applications
UX & Design Thinking for BI ApplicationsUX & Design Thinking for BI Applications
UX & Design Thinking for BI Applications
ibi
 
LX Journey Mapping Workshop
LX Journey Mapping WorkshopLX Journey Mapping Workshop
LX Journey Mapping Workshop
Joyce Seitzinger
 
Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)
Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)
Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)
Rosenfeld Media
 
Ustwo camerjam mobile marketing finance masterclass
Ustwo camerjam mobile marketing finance masterclassUstwo camerjam mobile marketing finance masterclass
Ustwo camerjam mobile marketing finance masterclass
James Cameron
 

What's hot (20)

Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the future
 
Lean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYC
Lean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYCLean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYC
Lean UX wins - Design Thinking in large enterprises 20 min - LeanUX NYC
 
CX Design and Journey Mapping for Social Thinkers
CX Design and Journey Mapping for Social ThinkersCX Design and Journey Mapping for Social Thinkers
CX Design and Journey Mapping for Social Thinkers
 
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
 
Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)
Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)
Breaking Barriers with Empathy (Ross Smith at Enterprise UX 2017)
 
Building the User Experience Community at SDL
Building the User Experience Community at SDLBuilding the User Experience Community at SDL
Building the User Experience Community at SDL
 
Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...
Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...
Creating a Legacy: the Ultimate Experience (Mark Templeton at Enterprise UX 2...
 
Business Analysis in Agile Philosophy
Business Analysis in Agile PhilosophyBusiness Analysis in Agile Philosophy
Business Analysis in Agile Philosophy
 
Why User Experience Matters
Why User Experience MattersWhy User Experience Matters
Why User Experience Matters
 
OSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By CommitteeOSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By Committee
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
 
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
 
The 6 Immutable Principles of UX
The 6 Immutable Principles of UXThe 6 Immutable Principles of UX
The 6 Immutable Principles of UX
 
The 3 Musketeers
The 3 MusketeersThe 3 Musketeers
The 3 Musketeers
 
Harnessing the Value of UX
Harnessing the Value of UXHarnessing the Value of UX
Harnessing the Value of UX
 
Guiding UX Principles
Guiding UX PrinciplesGuiding UX Principles
Guiding UX Principles
 
UX & Design Thinking for BI Applications
UX & Design Thinking for BI ApplicationsUX & Design Thinking for BI Applications
UX & Design Thinking for BI Applications
 
LX Journey Mapping Workshop
LX Journey Mapping WorkshopLX Journey Mapping Workshop
LX Journey Mapping Workshop
 
Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)
Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)
Keeping it Human at Scale (Gretchen Anderson at Enterprise UX 2017)
 
Ustwo camerjam mobile marketing finance masterclass
Ustwo camerjam mobile marketing finance masterclassUstwo camerjam mobile marketing finance masterclass
Ustwo camerjam mobile marketing finance masterclass
 

Similar to Design Pattern Library - Why, How, When, and Who?

Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Allison Bloodworth
 
Clovis Six & Saskia Videler at WUD16
Clovis Six & Saskia Videler at WUD16Clovis Six & Saskia Videler at WUD16
Clovis Six & Saskia Videler at WUD16
UX Antwerp Meetup
 
Atomic design
Atomic designAtomic design
Atomic design
Clovis Six
 
7 cs of learning design
7 cs of learning design7 cs of learning design
7 cs of learning design
Grainne Conole
 
Design Pattern lecture 2
Design Pattern lecture 2Design Pattern lecture 2
Design Pattern lecture 2
Julie Iskander
 
Designpattern
DesignpatternDesignpattern
Designpattern
Srikrishna k
 
Designing for openness
Designing for opennessDesigning for openness
Designing for openness
mediazoo
 
Fluid Design Pattern Library
Fluid Design Pattern LibraryFluid Design Pattern Library
Fluid Design Pattern Library
Allison Bloodworth
 
JS Design patterns in Web technologies including oop techniques.pptx
JS Design patterns in Web technologies including oop techniques.pptxJS Design patterns in Web technologies including oop techniques.pptx
JS Design patterns in Web technologies including oop techniques.pptx
husnainali397602
 
How to build the perfect pattern library
How to build the perfect pattern libraryHow to build the perfect pattern library
How to build the perfect pattern library
Wolf Brüning
 
The Productive Role of Material Design Artefacts in Participatory Design Events
The Productive Role of Material Design Artefacts in Participatory Design EventsThe Productive Role of Material Design Artefacts in Participatory Design Events
The Productive Role of Material Design Artefacts in Participatory Design Events
Nicolai Brodersen Hansen
 
MK_DEKAVE_02.ppt
MK_DEKAVE_02.pptMK_DEKAVE_02.ppt
MK_DEKAVE_02.ppt
MasHan20
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patterns
DCU_MPIUA
 
Design based research
Design based researchDesign based research
Design based research
Geoffrey Lautenbach
 
KopFournierCanadianInstituteDistanceEducationResearchPLE
KopFournierCanadianInstituteDistanceEducationResearchPLEKopFournierCanadianInstituteDistanceEducationResearchPLE
KopFournierCanadianInstituteDistanceEducationResearchPLE
Rita Kop
 
Design systems
Design systemsDesign systems
Design systems
Burton Smith
 
Building Design Systems
Building Design SystemsBuilding Design Systems
Building Design Systems
Burton Smith
 
Design Patterns from 10K feet
Design Patterns from 10K feetDesign Patterns from 10K feet
Design Patterns from 10K feet
Naresha K
 
Crossing Disciplines: Content strategy, topic maps & multidisciplinary teams
Crossing Disciplines: Content strategy, topic maps & multidisciplinary teamsCrossing Disciplines: Content strategy, topic maps & multidisciplinary teams
Crossing Disciplines: Content strategy, topic maps & multidisciplinary teams
Mapped. A Content Strategy Blog.
 
Fri schreiber key_knowledge engineering
Fri schreiber key_knowledge engineeringFri schreiber key_knowledge engineering
Fri schreiber key_knowledge engineering
eswcsummerschool
 

Similar to Design Pattern Library - Why, How, When, and Who? (20)

Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
 
Clovis Six & Saskia Videler at WUD16
Clovis Six & Saskia Videler at WUD16Clovis Six & Saskia Videler at WUD16
Clovis Six & Saskia Videler at WUD16
 
Atomic design
Atomic designAtomic design
Atomic design
 
7 cs of learning design
7 cs of learning design7 cs of learning design
7 cs of learning design
 
Design Pattern lecture 2
Design Pattern lecture 2Design Pattern lecture 2
Design Pattern lecture 2
 
Designpattern
DesignpatternDesignpattern
Designpattern
 
Designing for openness
Designing for opennessDesigning for openness
Designing for openness
 
Fluid Design Pattern Library
Fluid Design Pattern LibraryFluid Design Pattern Library
Fluid Design Pattern Library
 
JS Design patterns in Web technologies including oop techniques.pptx
JS Design patterns in Web technologies including oop techniques.pptxJS Design patterns in Web technologies including oop techniques.pptx
JS Design patterns in Web technologies including oop techniques.pptx
 
How to build the perfect pattern library
How to build the perfect pattern libraryHow to build the perfect pattern library
How to build the perfect pattern library
 
The Productive Role of Material Design Artefacts in Participatory Design Events
The Productive Role of Material Design Artefacts in Participatory Design EventsThe Productive Role of Material Design Artefacts in Participatory Design Events
The Productive Role of Material Design Artefacts in Participatory Design Events
 
MK_DEKAVE_02.ppt
MK_DEKAVE_02.pptMK_DEKAVE_02.ppt
MK_DEKAVE_02.ppt
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patterns
 
Design based research
Design based researchDesign based research
Design based research
 
KopFournierCanadianInstituteDistanceEducationResearchPLE
KopFournierCanadianInstituteDistanceEducationResearchPLEKopFournierCanadianInstituteDistanceEducationResearchPLE
KopFournierCanadianInstituteDistanceEducationResearchPLE
 
Design systems
Design systemsDesign systems
Design systems
 
Building Design Systems
Building Design SystemsBuilding Design Systems
Building Design Systems
 
Design Patterns from 10K feet
Design Patterns from 10K feetDesign Patterns from 10K feet
Design Patterns from 10K feet
 
Crossing Disciplines: Content strategy, topic maps & multidisciplinary teams
Crossing Disciplines: Content strategy, topic maps & multidisciplinary teamsCrossing Disciplines: Content strategy, topic maps & multidisciplinary teams
Crossing Disciplines: Content strategy, topic maps & multidisciplinary teams
 
Fri schreiber key_knowledge engineering
Fri schreiber key_knowledge engineeringFri schreiber key_knowledge engineering
Fri schreiber key_knowledge engineering
 

More from Karri Ojanen

Managing a Multiscreen, Multicontext Customer Journey
Managing a Multiscreen, Multicontext Customer JourneyManaging a Multiscreen, Multicontext Customer Journey
Managing a Multiscreen, Multicontext Customer Journey
Karri Ojanen
 
Mobile next
Mobile nextMobile next
Mobile next
Karri Ojanen
 
Life on the Screen
Life on the ScreenLife on the Screen
Life on the Screen
Karri Ojanen
 
UXD in Advertising
UXD in AdvertisingUXD in Advertising
UXD in Advertising
Karri Ojanen
 
Agile UX and the Decentralization of the UX Department
Agile UX and the Decentralization of the UX DepartmentAgile UX and the Decentralization of the UX Department
Agile UX and the Decentralization of the UX Department
Karri Ojanen
 
IA now
IA nowIA now
IA now
Karri Ojanen
 
Intro to IA/IxD/UXD in the agency world
Intro to IA/IxD/UXD in the agency worldIntro to IA/IxD/UXD in the agency world
Intro to IA/IxD/UXD in the agency world
Karri Ojanen
 

More from Karri Ojanen (7)

Managing a Multiscreen, Multicontext Customer Journey
Managing a Multiscreen, Multicontext Customer JourneyManaging a Multiscreen, Multicontext Customer Journey
Managing a Multiscreen, Multicontext Customer Journey
 
Mobile next
Mobile nextMobile next
Mobile next
 
Life on the Screen
Life on the ScreenLife on the Screen
Life on the Screen
 
UXD in Advertising
UXD in AdvertisingUXD in Advertising
UXD in Advertising
 
Agile UX and the Decentralization of the UX Department
Agile UX and the Decentralization of the UX DepartmentAgile UX and the Decentralization of the UX Department
Agile UX and the Decentralization of the UX Department
 
IA now
IA nowIA now
IA now
 
Intro to IA/IxD/UXD in the agency world
Intro to IA/IxD/UXD in the agency worldIntro to IA/IxD/UXD in the agency world
Intro to IA/IxD/UXD in the agency world
 

Recently uploaded

一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 

Recently uploaded (20)

一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 

Design Pattern Library - Why, How, When, and Who?

  • 1. Design Pattern Library Why, How, When and Who Karri Ojanen – 09/25/2012 CONCEPTOLOGY
  • 2. Design Patterns Photo by bdesham Pattern = “optimal solution to a common problem within a specific context” (e.g. tabs, pagination…) CONCEPTOLOGY
  • 3. 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 CONCEPTOLOGY
  • 4. 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 CONCEPTOLOGY
  • 5. 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 CONCEPTOLOGY
  • 6. 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 CONCEPTOLOGY
  • 7. 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 CONCEPTOLOGY
  • 8. 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? CONCEPTOLOGY