SlideShare a Scribd company logo
1 of 25
Download to read offline
Prototyping Your
Way to Happiness:
An Adventure with Pattern Lab
@mandiwise
We had a problem.
What you get:
Front-end style guide
Markup-based mock-ups
Responsive deliverables
Atomic design?
bradfrost.com/blog/post/atomic-web-design
Icon by Phillip Glenn
Icon by Michael Wohlwend
Icon by Timothy Dilich
Icon by Joe Simpson
Atoms
Molecules
Organisms
Templates
Pages
Benefits:
Promotes consistency
Makes minutia manageable
BYO–anything
Scales easily and quickly
Getting started…
Step 1:
Download Pattern Lab
Step 2:
Generate your Pattern Lab site for the first time
$	
  php	
  core/builder.php	
  -­‐g
Step 3:
Start editing the source files
$	
  php	
  core/builder.php	
  -­‐wr
Lessons learned:
Incorporate it from the start
Breaking things down into reusable
components makes life easier
Prototyping saves time
Thanks!

More Related Content

What's hot

Question 6:What have you learnt about technologies from the process of constr...
Question 6:What have you learnt about technologies from the process of constr...Question 6:What have you learnt about technologies from the process of constr...
Question 6:What have you learnt about technologies from the process of constr...kelseyhaslam
 
Q6 – evaluation question
Q6 – evaluation questionQ6 – evaluation question
Q6 – evaluation questionjemmaashaw
 
Evaluation 6 what have you learnt about technologies from the process of cons...
Evaluation 6 what have you learnt about technologies from the process of cons...Evaluation 6 what have you learnt about technologies from the process of cons...
Evaluation 6 what have you learnt about technologies from the process of cons...MaxSunnar
 
6- What have you learnt about technologies from the process of constructing t...
6- What have you learnt about technologies from the process of constructing t...6- What have you learnt about technologies from the process of constructing t...
6- What have you learnt about technologies from the process of constructing t...ErnestSadowski
 
How did you use media technologies in the
How did you use media technologies in theHow did you use media technologies in the
How did you use media technologies in the19105hj
 
App Smashing FULL CUE version
App Smashing FULL CUE versionApp Smashing FULL CUE version
App Smashing FULL CUE versionJon Corippo
 
Evaluation question 6
Evaluation question 6Evaluation question 6
Evaluation question 6Lauryn Hall
 
Evaluation 4
Evaluation 4Evaluation 4
Evaluation 4Qainaat
 
Evaluation question power point
Evaluation question power pointEvaluation question power point
Evaluation question power pointjemsjems61
 
Question 6 A-level Media evaluation
Question 6 A-level Media evaluationQuestion 6 A-level Media evaluation
Question 6 A-level Media evaluationNathan Gilbert
 
What have you learnt about technologies from the process of constructing this...
What have you learnt about technologies from the process of constructing this...What have you learnt about technologies from the process of constructing this...
What have you learnt about technologies from the process of constructing this...Necmiye97
 
Cool Tools for Academic Reference/Instruction Librarians
Cool Tools for Academic Reference/Instruction Librarians Cool Tools for Academic Reference/Instruction Librarians
Cool Tools for Academic Reference/Instruction Librarians nclatechandtrends
 
Final presentaion
Final presentaionFinal presentaion
Final presentaionDebowen
 
Question 4 (evaluation)
Question 4 (evaluation)Question 4 (evaluation)
Question 4 (evaluation)danitirel1
 
Q6: what have you learnt about the technologies from the process of construct...
Q6: what have you learnt about the technologies from the process of construct...Q6: what have you learnt about the technologies from the process of construct...
Q6: what have you learnt about the technologies from the process of construct...millanasmedia
 
‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...
‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...
‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...SchoolNet SA
 

What's hot (19)

Question 6:What have you learnt about technologies from the process of constr...
Question 6:What have you learnt about technologies from the process of constr...Question 6:What have you learnt about technologies from the process of constr...
Question 6:What have you learnt about technologies from the process of constr...
 
Q6 – evaluation question
Q6 – evaluation questionQ6 – evaluation question
Q6 – evaluation question
 
Evaluation 6 what have you learnt about technologies from the process of cons...
Evaluation 6 what have you learnt about technologies from the process of cons...Evaluation 6 what have you learnt about technologies from the process of cons...
Evaluation 6 what have you learnt about technologies from the process of cons...
 
6- What have you learnt about technologies from the process of constructing t...
6- What have you learnt about technologies from the process of constructing t...6- What have you learnt about technologies from the process of constructing t...
6- What have you learnt about technologies from the process of constructing t...
 
How did you use media technologies in the
How did you use media technologies in theHow did you use media technologies in the
How did you use media technologies in the
 
App Smashing FULL CUE version
App Smashing FULL CUE versionApp Smashing FULL CUE version
App Smashing FULL CUE version
 
Evaluation question 6
Evaluation question 6Evaluation question 6
Evaluation question 6
 
Evaluation 4
Evaluation 4Evaluation 4
Evaluation 4
 
Evaluation question power point
Evaluation question power pointEvaluation question power point
Evaluation question power point
 
Question 6 A-level Media evaluation
Question 6 A-level Media evaluationQuestion 6 A-level Media evaluation
Question 6 A-level Media evaluation
 
What have you learnt about technologies from the process of constructing this...
What have you learnt about technologies from the process of constructing this...What have you learnt about technologies from the process of constructing this...
What have you learnt about technologies from the process of constructing this...
 
Evaluation: Q4
Evaluation: Q4Evaluation: Q4
Evaluation: Q4
 
Cool Tools for Academic Reference/Instruction Librarians
Cool Tools for Academic Reference/Instruction Librarians Cool Tools for Academic Reference/Instruction Librarians
Cool Tools for Academic Reference/Instruction Librarians
 
Final presentaion
Final presentaionFinal presentaion
Final presentaion
 
Question 4 (evaluation)
Question 4 (evaluation)Question 4 (evaluation)
Question 4 (evaluation)
 
Q6: what have you learnt about the technologies from the process of construct...
Q6: what have you learnt about the technologies from the process of construct...Q6: what have you learnt about the technologies from the process of construct...
Q6: what have you learnt about the technologies from the process of construct...
 
Evaluation 6
Evaluation 6Evaluation 6
Evaluation 6
 
‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...
‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...
‘Microsoft Sway – what it is, how to use it in the classroom, and how to crea...
 
Top technologies I use
Top technologies I useTop technologies I use
Top technologies I use
 

Viewers also liked

App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...
App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...
App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...Mandi Wise
 
Get More Out of Gravity Forms
Get More Out of Gravity FormsGet More Out of Gravity Forms
Get More Out of Gravity FormsMandi Wise
 
Editorial Checklist for Web Content
Editorial Checklist for Web ContentEditorial Checklist for Web Content
Editorial Checklist for Web ContentMandi Wise
 
Content-First Content Management
Content-First Content ManagementContent-First Content Management
Content-First Content ManagementMandi Wise
 
A Practical Guide to Awesome Web Writing
A Practical Guide to Awesome Web WritingA Practical Guide to Awesome Web Writing
A Practical Guide to Awesome Web WritingMandi Wise
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your BusinessBarry Feldman
 

Viewers also liked (6)

App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...
App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...
App-ifiying WordPress: Practical Tips for Using WordPress as an Application P...
 
Get More Out of Gravity Forms
Get More Out of Gravity FormsGet More Out of Gravity Forms
Get More Out of Gravity Forms
 
Editorial Checklist for Web Content
Editorial Checklist for Web ContentEditorial Checklist for Web Content
Editorial Checklist for Web Content
 
Content-First Content Management
Content-First Content ManagementContent-First Content Management
Content-First Content Management
 
A Practical Guide to Awesome Web Writing
A Practical Guide to Awesome Web WritingA Practical Guide to Awesome Web Writing
A Practical Guide to Awesome Web Writing
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Similar to Prototyping Your Way to Happiness

Making your design vision a reality
Making your design vision a realityMaking your design vision a reality
Making your design vision a realityGrant Thomas-Lepore
 
Essential Prototyping for Entrepreneurs
Essential Prototyping for EntrepreneursEssential Prototyping for Entrepreneurs
Essential Prototyping for EntrepreneursBow Kraivanich
 
From the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPadFrom the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPadReba Gordon Matthews
 
1 intro ciid slide deck day1
1 intro ciid slide deck day11 intro ciid slide deck day1
1 intro ciid slide deck day1Gabriella Levine
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a proAmir Khella
 
schedule_SPRING_dm77
schedule_SPRING_dm77schedule_SPRING_dm77
schedule_SPRING_dm77tutorialsruby
 
schedule_SPRING_dm77
schedule_SPRING_dm77schedule_SPRING_dm77
schedule_SPRING_dm77tutorialsruby
 
Graduation Project Presentation - Design of Web Based E-learning as an Assist...
Graduation Project Presentation - Design of Web Based E-learning as an Assist...Graduation Project Presentation - Design of Web Based E-learning as an Assist...
Graduation Project Presentation - Design of Web Based E-learning as an Assist...R. Bambang Widiatmoko
 
Evaluation 4
Evaluation 4Evaluation 4
Evaluation 4msk9
 
Optimizing developer onboarding
Optimizing developer onboardingOptimizing developer onboarding
Optimizing developer onboarding🌯 Brian Douglas
 
How to start developing iOS apps
How to start developing iOS appsHow to start developing iOS apps
How to start developing iOS appsAndrew Kozlik
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshopPatrick McNeil
 
Trial engineering moving parts
Trial engineering moving partsTrial engineering moving parts
Trial engineering moving partsSV.CO
 
Interview Projects
Interview ProjectsInterview Projects
Interview Projectsyichen
 
How can we enhance our technology
How can we enhance our technologyHow can we enhance our technology
How can we enhance our technologyapalmisano
 

Similar to Prototyping Your Way to Happiness (20)

Soft Eng 1st PPT
Soft Eng 1st PPTSoft Eng 1st PPT
Soft Eng 1st PPT
 
Making your design vision a reality
Making your design vision a realityMaking your design vision a reality
Making your design vision a reality
 
Essential Prototyping for Entrepreneurs
Essential Prototyping for EntrepreneursEssential Prototyping for Entrepreneurs
Essential Prototyping for Entrepreneurs
 
From the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPadFrom the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPad
 
1 intro ciid slide deck day1
1 intro ciid slide deck day11 intro ciid slide deck day1
1 intro ciid slide deck day1
 
Prototype like a pro
Prototype like a proPrototype like a pro
Prototype like a pro
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a pro
 
Usable Software Design
Usable Software DesignUsable Software Design
Usable Software Design
 
schedule_SPRING_dm77
schedule_SPRING_dm77schedule_SPRING_dm77
schedule_SPRING_dm77
 
schedule_SPRING_dm77
schedule_SPRING_dm77schedule_SPRING_dm77
schedule_SPRING_dm77
 
Graduation Project Presentation - Design of Web Based E-learning as an Assist...
Graduation Project Presentation - Design of Web Based E-learning as an Assist...Graduation Project Presentation - Design of Web Based E-learning as an Assist...
Graduation Project Presentation - Design of Web Based E-learning as an Assist...
 
Evaluation 4
Evaluation 4Evaluation 4
Evaluation 4
 
Optimizing developer onboarding
Optimizing developer onboardingOptimizing developer onboarding
Optimizing developer onboarding
 
How to start developing iOS apps
How to start developing iOS appsHow to start developing iOS apps
How to start developing iOS apps
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshop
 
Trial engineering moving parts
Trial engineering moving partsTrial engineering moving parts
Trial engineering moving parts
 
How eCoach was built
How eCoach was builtHow eCoach was built
How eCoach was built
 
Tools of the Trade
Tools of the TradeTools of the Trade
Tools of the Trade
 
Interview Projects
Interview ProjectsInterview Projects
Interview Projects
 
How can we enhance our technology
How can we enhance our technologyHow can we enhance our technology
How can we enhance our technology
 

Recently uploaded

How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 

Recently uploaded (20)

Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 

Prototyping Your Way to Happiness