The What & Why of Pattern Lab

Dave Olsen
Dave OlsenProgrammer/Project Manager at West Virginia University
••
the What & Why of

pattern-lab.info
dave olsen, @dmolsen
a roadmap for the short talk

‣ rethinking the web design process
- linear vs. spiral
- client deliverables
- our toolchains
‣ learning where pattern lab fits
- atomic design
- tiny bootstraps
- an integrated workflow
‣ where to find more info
rethinking the web design process: team process

linear vs. spiral
rethinking the web design process: spiral process

Kick-off

Design &
Develop

Test

Client
Review

Production
rethinking the web design process: for clients

the deliverables
rethinking the web design process: deliverables

‣ mood boards
‣ style tiles
‣ wireframes
‣ low-fidelity HTML mock-ups
‣ high-fidelity HTML mock-ups
‣ ā€œcut upā€ mark-up, CSS, & JS
‣ pattern libraries & style guides
rethinking the web design process: tools

our toolchains
rethinking the web design process: toolchains

‣ CSS pre-processors
‣ CSS frameworks
‣ JavaScript frameworks
‣ Build tools
‣ Content Management Systems
lots to choose from!
wouldn’t it be cool if a tool...

‣ Covered the entire dev lifecycle
‣ Made it easy for clients to review work
‣ Allowed for granular deliverables
‣ Let you use the tools you wanted
‣ Was fast to get up & running
introducing
pattern lab
pattern lab is...

Pattern Lab is a collection of
tools for creating modular
systems, your very own tiny
bootstraps and involve your
entire team & the client
every step of the way.
pattern lab is: build systems, not pages
pattern lab is: build systems, not pages
molecules-search
organisms-header
templates-homepage
pattern lab is: tiny bootstraps of HTML, CSS, & JS

‣ tiny bootstrap as a project starter kit
‣ building clients their own tiny
bootstraps

‣ re-using your tiny bootstraps
http://daverupert.com/2013/04/responsive-deliverables/
pattern lab is: integrated into your process

Kick-off

Design &
Develop

Test

Client
Review

Production
pattern lab is: integrated into your process

Kick-off

Design &
Develop

starter kit

auto-build
auto-reload
atomic
spectrum

Test

page follow
viewport
re-sizer

Client
Review

annotations
pattern states
MQ re-sizer

shared component library & dynamic data

Production

code view
style guide
pattern lab is: all your deliverables in one place
pattern lab screenshot: pattern example
pattern lab screenshot: annotations
pattern lab screenshot: code view
by default pattern lab isn’t...

‣ a fancy UI framework
‣ dependency heavy
‣ incredibly rigid
you make it what you want & need
the requirements:

PHP 5.3+
no web server required*
Mustache is used for patterns.
JSON is used for dynamic data storage.

* - only required for page follow
download pattern lab: github.com/pattern-lab
demo of the front-end: demo.pattern-lab.info
documentation: pattern-lab.info/docs/
the pattern lab team:

brad frost
@brad_frost

dave olsen
@dmolsen
nominated: thenetawards.com
thanks and questions:

pattern lab
pattern-lab.info
1 of 28

Recommended

The Why and What of Pattern Lab by
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern LabDave Olsen
14.3K views•93 slides
Intro to Pattern Lab by
Intro to Pattern LabIntro to Pattern Lab
Intro to Pattern LabPaul Stonier
569 views•11 slides
The Death of Lorem Ipsum & Pixel Perfect Content by
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
13.1K views•98 slides
Brad frost: Atomic design (Webdagene 2014) by
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
8.4K views•164 slides
Atomic Design - An Event Apart San Diego by
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
58.4K views•181 slides
Atomic Design - BDConf Nashville, 2013 by
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
50.7K views•212 slides

More Related Content

What's hot

Style Guides Are The New Photoshop (Fronteers 2012) by
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
44.5K views•52 slides
Untangling spring week5 by
Untangling spring week5Untangling spring week5
Untangling spring week5Derek Jacoby
436 views•26 slides
React Storybook, Atomic Design, and ITCSS by
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
2.6K views•38 slides
Atomic design React Nova Presentation by
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova PresentationSteve Zyglowicz
544 views•18 slides
Component Driven Design and Development by
Component Driven Design and DevelopmentComponent Driven Design and Development
Component Driven Design and DevelopmentCristina Chumillas
1K views•66 slides
Atomic Design by
Atomic Design Atomic Design
Atomic Design Rey Mayson
357 views•41 slides

What's hot(20)

Style Guides Are The New Photoshop (Fronteers 2012) by Stephen Hay
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Stephen Hay•44.5K views
Untangling spring week5 by Derek Jacoby
Untangling spring week5Untangling spring week5
Untangling spring week5
Derek Jacoby•436 views
React Storybook, Atomic Design, and ITCSS by Trevor Pierce
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
Trevor Pierce•2.6K views
Atomic design React Nova Presentation by Steve Zyglowicz
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
Steve Zyglowicz•544 views
Component Driven Design and Development by Cristina Chumillas
Component Driven Design and DevelopmentComponent Driven Design and Development
Component Driven Design and Development
Cristina Chumillas•1K views
Atomic Design by Rey Mayson
Atomic Design Atomic Design
Atomic Design
Rey Mayson•357 views
Adventures in Atomic Design by Andrew Jones
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
Andrew Jones•1.2K views
Atomic design by Brad Frost
Atomic designAtomic design
Atomic design
Brad Frost•2M views
MIMA 2014 - Changing your Responsive Design Workflow by easelsolutions
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
easelsolutions•1.3K views
Beyond Squishy: The Principles of Adaptive Design by Brad Frost
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost•116.7K views
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version) by Dave Olsen
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Dave Olsen•1.6K views
The Server Side of Responsive Web Design by Dave Olsen
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
Dave Olsen•13.7K views
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015) by David Wesst
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
David Wesst•330 views
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework... by Cedric Spillebeen
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Cedric Spillebeen•24.2K views
AngularJS for Legacy Apps by Peter Drinnan
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan•7.3K views
Teams, styles and scalable applications by Vittorio Vittori
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
Vittorio Vittori•424 views
Learning from the Best jQuery Plugins by Marc Grabanski
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski•47.6K views
Twitter bootstrapå…„é–€ #twtr_hack by Toshiaki Maki
Twitter bootstrapå…„é–€ #twtr_hackTwitter bootstrapå…„é–€ #twtr_hack
Twitter bootstrapå…„é–€ #twtr_hack
Toshiaki Maki•22.2K views
What is HTML 5? by Susan Winters
What is HTML 5?What is HTML 5?
What is HTML 5?
Susan Winters•19K views

Viewers also liked

Admissions Brain Dump by
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain DumpDave Olsen
1.1K views•46 slides
Optimizing web performance (Fronteers edition) by
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Dave Olsen
7.4K views•67 slides
Case Study: Automating Outage Monitoring & Communication by
Case Study: Automating Outage Monitoring & CommunicationCase Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & CommunicationDave Olsen
1.9K views•34 slides
Progressive Mobile Strategy Redux: The Future Friendly Enterprise by
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseDave Olsen
2.1K views•82 slides
Reimagining Your Website: What are prospective students looking for and how a... by
Reimagining Your Website: What are prospective students looking for and how a...Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...Dave Olsen
1.7K views•62 slides
Case Study: Rebuilding an Admissions Web Presence by
Case Study: Rebuilding an Admissions Web PresenceCase Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web PresenceDave Olsen
7.4K views•59 slides

Viewers also liked(6)

Admissions Brain Dump by Dave Olsen
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain Dump
Dave Olsen•1.1K views
Optimizing web performance (Fronteers edition) by Dave Olsen
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
Dave Olsen•7.4K views
Case Study: Automating Outage Monitoring & Communication by Dave Olsen
Case Study: Automating Outage Monitoring & CommunicationCase Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & Communication
Dave Olsen•1.9K views
Progressive Mobile Strategy Redux: The Future Friendly Enterprise by Dave Olsen
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Dave Olsen•2.1K views
Reimagining Your Website: What are prospective students looking for and how a... by Dave Olsen
Reimagining Your Website: What are prospective students looking for and how a...Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...
Dave Olsen•1.7K views
Case Study: Rebuilding an Admissions Web Presence by Dave Olsen
Case Study: Rebuilding an Admissions Web PresenceCase Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web Presence
Dave Olsen•7.4K views

Similar to The What & Why of Pattern Lab

Pearls and Must-Have Tools for the Modern Web / .NET Developer by
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperOfer Zelig
1K views•72 slides
The Anchor Store: Four Confluence Examples to Root Your Deployment by
The Anchor Store: Four Confluence Examples to Root Your DeploymentThe Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your DeploymentAtlassian
2.9K views•80 slides
Become a better UX designer through code by
Become a better UX designer through codeBecome a better UX designer through code
Become a better UX designer through codeRamon Lapenta
1.4K views•17 slides
ALM with TFS: From the Drawing Board to the Cloud by
ALM with TFS: From the Drawing Board to the CloudALM with TFS: From the Drawing Board to the Cloud
ALM with TFS: From the Drawing Board to the CloudJeremy Likness
3.5K views•33 slides
Best Practices for Building WordPress Applications by
Best Practices for Building WordPress ApplicationsBest Practices for Building WordPress Applications
Best Practices for Building WordPress ApplicationsTaylor Lovett
6.1K views•50 slides
India GRUC Agility Presentation 2015-6-30 by
India GRUC Agility Presentation 2015-6-30India GRUC Agility Presentation 2015-6-30
India GRUC Agility Presentation 2015-6-30Roger Snook
690 views•38 slides

Similar to The What & Why of Pattern Lab(20)

Pearls and Must-Have Tools for the Modern Web / .NET Developer by Ofer Zelig
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Ofer Zelig•1K views
The Anchor Store: Four Confluence Examples to Root Your Deployment by Atlassian
The Anchor Store: Four Confluence Examples to Root Your DeploymentThe Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your Deployment
Atlassian•2.9K views
Become a better UX designer through code by Ramon Lapenta
Become a better UX designer through codeBecome a better UX designer through code
Become a better UX designer through code
Ramon Lapenta•1.4K views
ALM with TFS: From the Drawing Board to the Cloud by Jeremy Likness
ALM with TFS: From the Drawing Board to the CloudALM with TFS: From the Drawing Board to the Cloud
ALM with TFS: From the Drawing Board to the Cloud
Jeremy Likness•3.5K views
Best Practices for Building WordPress Applications by Taylor Lovett
Best Practices for Building WordPress ApplicationsBest Practices for Building WordPress Applications
Best Practices for Building WordPress Applications
Taylor Lovett•6.1K views
India GRUC Agility Presentation 2015-6-30 by Roger Snook
India GRUC Agility Presentation 2015-6-30India GRUC Agility Presentation 2015-6-30
India GRUC Agility Presentation 2015-6-30
Roger Snook•690 views
Improve your web dev workflow in Visual Studio by David Paquette
Improve your web dev workflow in Visual StudioImprove your web dev workflow in Visual Studio
Improve your web dev workflow in Visual Studio
David Paquette•437 views
Release Management with Visual Studio Team Services and Office Dev PnP by Petter Skodvin-Hvammen
Release Management with Visual Studio Team Services and Office Dev PnPRelease Management with Visual Studio Team Services and Office Dev PnP
Release Management with Visual Studio Team Services and Office Dev PnP
Petter Skodvin-Hvammen•708 views
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e... by Anupam Ranku
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Anupam Ranku•792 views
The API Lifecycle Series: Exploring Design-First and Code-First Approaches to... by SmartBear
The API Lifecycle Series: Exploring Design-First and Code-First Approaches to...The API Lifecycle Series: Exploring Design-First and Code-First Approaches to...
The API Lifecycle Series: Exploring Design-First and Code-First Approaches to...
SmartBear•704 views
selenium_course_content.pdf by aswinisowmiya
selenium_course_content.pdfselenium_course_content.pdf
selenium_course_content.pdf
aswinisowmiya•11 views
Product Management for Startup Founders, CEOs, and CTOs by Chris Cera
Product Management for Startup Founders, CEOs, and CTOsProduct Management for Startup Founders, CEOs, and CTOs
Product Management for Startup Founders, CEOs, and CTOs
Chris Cera•686 views
Revolutionize DevOps lifecycle with Amazon CodeCatalyst and DevOps Guru at De... by Vadym Kazulkin
Revolutionize DevOps lifecycle with Amazon CodeCatalyst and DevOps Guru at De...Revolutionize DevOps lifecycle with Amazon CodeCatalyst and DevOps Guru at De...
Revolutionize DevOps lifecycle with Amazon CodeCatalyst and DevOps Guru at De...
Vadym Kazulkin•30 views
50500113 spiral-model by asidharath
50500113 spiral-model50500113 spiral-model
50500113 spiral-model
asidharath•6.1K views
Advanced Flow Techniques with Apex and Visualforce by Salesforce Developers
Advanced Flow Techniques with Apex and VisualforceAdvanced Flow Techniques with Apex and Visualforce
Advanced Flow Techniques with Apex and Visualforce
Salesforce Developers•2.1K views
Bringing DevOps to the Database by Michaela Murray
Bringing DevOps to the DatabaseBringing DevOps to the Database
Bringing DevOps to the Database
Michaela Murray•143 views
No Feature Solutions with SharePoint by mikehuguet
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePoint
mikehuguet•539 views

More from Dave Olsen

Taking Your HTML Email Communications from "Ew" to "Wow" by
Taking Your HTML Email Communications from "Ew" to "Wow"Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"Dave Olsen
886 views•90 slides
The Google Marketing Workflow Workshop by
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow WorkshopDave Olsen
1.5K views•95 slides
Building an Academic Program Database and API with Contentful and Amazon Web ... by
Building an Academic Program Database and API with Contentful and Amazon Web ...Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...Dave Olsen
1.4K views•83 slides
Implementing Brand Patterns by
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand PatternsDave Olsen
2.8K views•75 slides
The Squishy Future of Content - HEEMAC Edition by
The Squishy Future of Content - HEEMAC EditionThe Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC EditionDave Olsen
1.9K views•90 slides
The Squishy Future of Content - Key Communicators Edition by
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators EditionDave Olsen
2K views•68 slides

More from Dave Olsen(20)

Taking Your HTML Email Communications from "Ew" to "Wow" by Dave Olsen
Taking Your HTML Email Communications from "Ew" to "Wow"Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"
Dave Olsen•886 views
The Google Marketing Workflow Workshop by Dave Olsen
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow Workshop
Dave Olsen•1.5K views
Building an Academic Program Database and API with Contentful and Amazon Web ... by Dave Olsen
Building an Academic Program Database and API with Contentful and Amazon Web ...Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...
Dave Olsen•1.4K views
Implementing Brand Patterns by Dave Olsen
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand Patterns
Dave Olsen•2.8K views
The Squishy Future of Content - HEEMAC Edition by Dave Olsen
The Squishy Future of Content - HEEMAC EditionThe Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC Edition
Dave Olsen•1.9K views
The Squishy Future of Content - Key Communicators Edition by Dave Olsen
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators Edition
Dave Olsen•2K views
The Squishy Future of Content - Penn State Edition by Dave Olsen
The Squishy Future of Content - Penn State EditionThe Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State Edition
Dave Olsen•1.4K views
The Squishy Future of Content by Dave Olsen
The Squishy Future of ContentThe Squishy Future of Content
The Squishy Future of Content
Dave Olsen•29.4K views
Measuring Web Performance - HighEdWeb Edition by Dave Olsen
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
Dave Olsen•6.9K views
Web Performance & You - HighEdWeb Arkansas Version by Dave Olsen
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version
Dave Olsen•16.8K views
Web Performance & You by Dave Olsen
Web Performance & YouWeb Performance & You
Web Performance & You
Dave Olsen•2.7K views
Measuring Web Performance (HighEdWeb FL Edition) by Dave Olsen
Measuring Web Performance (HighEdWeb FL Edition)Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
Dave Olsen•3.2K views
Measuring Web Performance by Dave Olsen
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
Dave Olsen•39K views
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ... by Dave Olsen
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Dave Olsen•12.9K views
The Future Friendly Campus (Workshop Edition) by Dave Olsen
The Future Friendly Campus (Workshop Edition)The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)
Dave Olsen•21.3K views
RESS: An Evolution of Responsive Web Design by Dave Olsen
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen•25.3K views
Developing a Progressive Mobile Strategy (J. Boye edition) by Dave Olsen
Developing a Progressive Mobile Strategy (J. Boye edition)Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)
Dave Olsen•28.1K views
The Future Friendly Campus by Dave Olsen
The Future Friendly CampusThe Future Friendly Campus
The Future Friendly Campus
Dave Olsen•9K views
Developing a Progressive Mobile Strategy (M3 Conf version) by Dave Olsen
Developing a Progressive Mobile Strategy (M3 Conf version)Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)
Dave Olsen•42.4K views
Developing a Progressive Mobile Strategy (Key Comm Version) by Dave Olsen
Developing a Progressive Mobile Strategy (Key Comm Version)Developing a Progressive Mobile Strategy (Key Comm Version)
Developing a Progressive Mobile Strategy (Key Comm Version)
Dave Olsen•1.3K views

The What & Why of Pattern Lab

  • 1. the What & Why of pattern-lab.info dave olsen, @dmolsen
  • 2. a roadmap for the short talk ‣ rethinking the web design process - linear vs. spiral - client deliverables - our toolchains ‣ learning where pattern lab fits - atomic design - tiny bootstraps - an integrated workflow ‣ where to find more info
  • 3. rethinking the web design process: team process linear vs. spiral
  • 4. rethinking the web design process: spiral process Kick-off Design & Develop Test Client Review Production
  • 5. rethinking the web design process: for clients the deliverables
  • 6. rethinking the web design process: deliverables ‣ mood boards ‣ style tiles ‣ wireframes ‣ low-fidelity HTML mock-ups ‣ high-fidelity HTML mock-ups ‣ ā€œcut upā€ mark-up, CSS, & JS ‣ pattern libraries & style guides
  • 7. rethinking the web design process: tools our toolchains
  • 8. rethinking the web design process: toolchains ‣ CSS pre-processors ‣ CSS frameworks ‣ JavaScript frameworks ‣ Build tools ‣ Content Management Systems lots to choose from!
  • 9. wouldn’t it be cool if a tool... ‣ Covered the entire dev lifecycle ‣ Made it easy for clients to review work ‣ Allowed for granular deliverables ‣ Let you use the tools you wanted ‣ Was fast to get up & running
  • 11. pattern lab is... Pattern Lab is a collection of tools for creating modular systems, your very own tiny bootstraps and involve your entire team & the client every step of the way.
  • 12. pattern lab is: build systems, not pages
  • 13. pattern lab is: build systems, not pages molecules-search organisms-header templates-homepage
  • 14. pattern lab is: tiny bootstraps of HTML, CSS, & JS ‣ tiny bootstrap as a project starter kit ‣ building clients their own tiny bootstraps ‣ re-using your tiny bootstraps http://daverupert.com/2013/04/responsive-deliverables/
  • 15. pattern lab is: integrated into your process Kick-off Design & Develop Test Client Review Production
  • 16. pattern lab is: integrated into your process Kick-off Design & Develop starter kit auto-build auto-reload atomic spectrum Test page follow viewport re-sizer Client Review annotations pattern states MQ re-sizer shared component library & dynamic data Production code view style guide
  • 17. pattern lab is: all your deliverables in one place
  • 18. pattern lab screenshot: pattern example
  • 19. pattern lab screenshot: annotations
  • 21. by default pattern lab isn’t... ‣ a fancy UI framework ‣ dependency heavy ‣ incredibly rigid you make it what you want & need
  • 22. the requirements: PHP 5.3+ no web server required* Mustache is used for patterns. JSON is used for dynamic data storage. * - only required for page follow
  • 23. download pattern lab: github.com/pattern-lab
  • 24. demo of the front-end: demo.pattern-lab.info
  • 26. the pattern lab team: brad frost @brad_frost dave olsen @dmolsen
  • 28. thanks and questions: pattern lab pattern-lab.info