SlideShare a Scribd company logo
Pattern Libraries
session #02
agenda
● styleguides / atomic design
● pattern libraries
● styleguides workflow
...let’s recap first
styleguides / atomic design
atomic design
Atoms
●
●
●
●

labels
input fields
buttons
…
molecules
● combination of atoms
organisms
●
●
●
●

headers / footers
sidebars
content-area
...
templates
● groups of
organisms
● to form
pages
pages
● real content
● show
variations of
templates
● e.g. different
headlines
(lenght)
i told you
it’s all about ...
Consistency
well that’s true
BUT...
what are important
aspects of web design /
develpment?!
give it another try :)
there is a lot!!!
consistency ipad styleguides screen-resolution ux
interaction design
web mobile
social media

performance

usercontent

call to action

fullscreen

desktop

sliders

buttons
consistency is
consistency is the key to
the key to
efficiency
efficiency
which leads to ...
● happy clients
● happy clients
● happy designers
● happy clients
● happy designers
● happy programmers
●
●
●
●

happy clients
happy designers
happy programmers
happy project managers
●
●
●
●
●

happy clients
happy designers
happy programmers
happy project managers
happy everybody
consistency has
a little brother
REUSABILITY
Pattern Libraries
styleguides + code
some libraries
●
●
●
●

mailchimp.com
this is responsive
pattern primer
bootstrap
no worries!
you never have to touch a single line of code
just like playing LEGO
hey! we need a
workflow!
let’s talk about it!

More Related Content

Similar to Moodley Session #02 - pattern libraries

Design 101 - a quick start guide
Design 101 - a quick start guideDesign 101 - a quick start guide
Design 101 - a quick start guide
Elsa Bartley
 
Design of everyday things fundamental principles of interaction - V2
Design of everyday things   fundamental principles of interaction - V2Design of everyday things   fundamental principles of interaction - V2
Design of everyday things fundamental principles of interaction - V2
Isaac Liao
 
Creating Content in a Pattern Library
Creating Content in a Pattern LibraryCreating Content in a Pattern Library
Creating Content in a Pattern Library
Rachel DeLauder
 
Developer effiencency
Developer effiencencyDeveloper effiencency
Developer effiencency
YousufMaalikJaleel
 
How we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clientsHow we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clients
Czech Design Systems Community
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
 
Agile Development: Key to smart software development
Agile Development: Key to smart software developmentAgile Development: Key to smart software development
Agile Development: Key to smart software development
Jerlyn Manohar
 
Design of everyday things fundamental principles of interaction
Design of everyday things   fundamental principles of interactionDesign of everyday things   fundamental principles of interaction
Design of everyday things fundamental principles of interaction
Isaac Liao
 
Product Management
Product ManagementProduct Management
Product Management
Attila Ulbert
 
React for non techies
React for non techiesReact for non techies
React for non techies
Amy Crimmens
 
Services, tools & practices for a software house
Services, tools & practices for a software houseServices, tools & practices for a software house
Services, tools & practices for a software house
Paris Apostolopoulos
 
Companion App Design with Qt
Companion App Design with QtCompanion App Design with Qt
Companion App Design with Qt
Qt
 
React for Non Techies
React for Non TechiesReact for Non Techies
React for Non Techies
Jack Hoy
 
React for non techies
React for non techiesReact for non techies
React for non techies
React London Community
 
7 Phases of Web Design Process
7 Phases of Web Design Process7 Phases of Web Design Process
7 Phases of Web Design Process
Niswey
 
Debugging 2013- Lars pedersen
Debugging 2013- Lars pedersenDebugging 2013- Lars pedersen
Debugging 2013- Lars pedersen
Mediehuset Ingeniøren Live
 
Web Design - Visual Decisions & User Experience
Web Design - Visual Decisions & User ExperienceWeb Design - Visual Decisions & User Experience
Web Design - Visual Decisions & User Experience
Blend Interactive
 
Bai giang-se-24feb14
Bai giang-se-24feb14Bai giang-se-24feb14
RealDay: Angular.js
RealDay: Angular.jsRealDay: Angular.js
RealDay: Angular.js
Miguel Schmitz Grazziotin
 
Stop Sucking at Building Stuff!
Stop Sucking at Building Stuff!Stop Sucking at Building Stuff!
Stop Sucking at Building Stuff!
Puppet
 

Similar to Moodley Session #02 - pattern libraries (20)

Design 101 - a quick start guide
Design 101 - a quick start guideDesign 101 - a quick start guide
Design 101 - a quick start guide
 
Design of everyday things fundamental principles of interaction - V2
Design of everyday things   fundamental principles of interaction - V2Design of everyday things   fundamental principles of interaction - V2
Design of everyday things fundamental principles of interaction - V2
 
Creating Content in a Pattern Library
Creating Content in a Pattern LibraryCreating Content in a Pattern Library
Creating Content in a Pattern Library
 
Developer effiencency
Developer effiencencyDeveloper effiencency
Developer effiencency
 
How we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clientsHow we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clients
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
Agile Development: Key to smart software development
Agile Development: Key to smart software developmentAgile Development: Key to smart software development
Agile Development: Key to smart software development
 
Design of everyday things fundamental principles of interaction
Design of everyday things   fundamental principles of interactionDesign of everyday things   fundamental principles of interaction
Design of everyday things fundamental principles of interaction
 
Product Management
Product ManagementProduct Management
Product Management
 
React for non techies
React for non techiesReact for non techies
React for non techies
 
Services, tools & practices for a software house
Services, tools & practices for a software houseServices, tools & practices for a software house
Services, tools & practices for a software house
 
Companion App Design with Qt
Companion App Design with QtCompanion App Design with Qt
Companion App Design with Qt
 
React for Non Techies
React for Non TechiesReact for Non Techies
React for Non Techies
 
React for non techies
React for non techiesReact for non techies
React for non techies
 
7 Phases of Web Design Process
7 Phases of Web Design Process7 Phases of Web Design Process
7 Phases of Web Design Process
 
Debugging 2013- Lars pedersen
Debugging 2013- Lars pedersenDebugging 2013- Lars pedersen
Debugging 2013- Lars pedersen
 
Web Design - Visual Decisions & User Experience
Web Design - Visual Decisions & User ExperienceWeb Design - Visual Decisions & User Experience
Web Design - Visual Decisions & User Experience
 
Bai giang-se-24feb14
Bai giang-se-24feb14Bai giang-se-24feb14
Bai giang-se-24feb14
 
RealDay: Angular.js
RealDay: Angular.jsRealDay: Angular.js
RealDay: Angular.js
 
Stop Sucking at Building Stuff!
Stop Sucking at Building Stuff!Stop Sucking at Building Stuff!
Stop Sucking at Building Stuff!
 

Recently uploaded

RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
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
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
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
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
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
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
Hess9
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
farhanaslam79
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
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
 

Recently uploaded (20)

RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
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
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
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
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
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
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
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
 

Moodley Session #02 - pattern libraries