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 views93 slides
Intro to Pattern Lab by
Intro to Pattern LabIntro to Pattern Lab
Intro to Pattern LabPaul Stonier
569 views11 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 views98 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 views164 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 views181 slides
Atomic Design - BDConf Nashville, 2013 by
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
50.7K views212 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 views52 slides
Untangling spring week5 by
Untangling spring week5Untangling spring week5
Untangling spring week5Derek Jacoby
436 views26 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 views38 slides
Atomic design React Nova Presentation by
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova PresentationSteve Zyglowicz
544 views18 slides
Component Driven Design and Development by
Component Driven Design and DevelopmentComponent Driven Design and Development
Component Driven Design and DevelopmentCristina Chumillas
1K views66 slides
Atomic Design by
Atomic Design Atomic Design
Atomic Design Rey Mayson
357 views41 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 Hay44.5K views
Untangling spring week5 by Derek Jacoby
Untangling spring week5Untangling spring week5
Untangling spring week5
Derek Jacoby436 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 Pierce2.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 Zyglowicz544 views
Atomic Design by Rey Mayson
Atomic Design Atomic Design
Atomic Design
Rey Mayson357 views
Adventures in Atomic Design by Andrew Jones
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
Andrew Jones1.2K 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
easelsolutions1.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 Frost116.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 Olsen1.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 Olsen13.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 Wesst330 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 Spillebeen24.2K views
AngularJS for Legacy Apps by Peter Drinnan
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan7.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 Vittori424 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 Grabanski47.6K views
Twitter bootstrap入門 #twtr_hack by Toshiaki Maki
Twitter bootstrap入門 #twtr_hackTwitter bootstrap入門 #twtr_hack
Twitter bootstrap入門 #twtr_hack
Toshiaki Maki22.2K views

Viewers also liked

Admissions Brain Dump by
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain DumpDave Olsen
1.1K views46 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 views67 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 views34 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 views82 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 views62 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 views59 slides

Viewers also liked(6)

Admissions Brain Dump by Dave Olsen
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain Dump
Dave Olsen1.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 Olsen7.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 Olsen1.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 Olsen2.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 Olsen1.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 Olsen7.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 views72 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 views80 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 views17 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 views33 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 views50 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 views38 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 Zelig1K 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
Atlassian2.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 Lapenta1.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 Likness3.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 Lovett6.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 Snook690 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 Paquette437 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
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 Ranku792 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...
SmartBear704 views
selenium_course_content.pdf by aswinisowmiya
selenium_course_content.pdfselenium_course_content.pdf
selenium_course_content.pdf
aswinisowmiya11 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 Cera686 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 Kazulkin30 views
50500113 spiral-model by asidharath
50500113 spiral-model50500113 spiral-model
50500113 spiral-model
asidharath6.1K views
No Feature Solutions with SharePoint by mikehuguet
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePoint
mikehuguet539 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 views90 slides
The Google Marketing Workflow Workshop by
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow WorkshopDave Olsen
1.5K views95 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 views83 slides
Implementing Brand Patterns by
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand PatternsDave Olsen
2.8K views75 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 views90 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 views68 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 Olsen886 views
The Google Marketing Workflow Workshop by Dave Olsen
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow Workshop
Dave Olsen1.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 Olsen1.4K views
Implementing Brand Patterns by Dave Olsen
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand Patterns
Dave Olsen2.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 Olsen1.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 Olsen2K 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 Olsen1.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 Olsen29.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 Olsen6.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 Olsen16.8K views
Web Performance & You by Dave Olsen
Web Performance & YouWeb Performance & You
Web Performance & You
Dave Olsen2.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 Olsen3.2K views
Measuring Web Performance by Dave Olsen
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
Dave Olsen39K 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 Olsen12.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 Olsen21.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 Olsen25.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 Olsen28.1K views
The Future Friendly Campus by Dave Olsen
The Future Friendly CampusThe Future Friendly Campus
The Future Friendly Campus
Dave Olsen9K 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 Olsen42.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 Olsen1.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