The What & Why of Pattern Lab

50 %
50 %
Information about The What & Why of Pattern Lab
Gadgets & Reviews

Published on February 18, 2014

Author: dmolsenwvu

Source: slideshare.net

Description

Responsive design is forcing us to reevaluate our design and development practices. It's also forcing us to rethink how we communicate with our clients and what a project's deliverables might be. Pattern Lab helps bridge the gap by providing one tool that allows for the creation of modular systems as well as gives clients the tools review the work in the place it's going to be used: the browser.

This deck reviews some of the features of Pattern Lab. It also discusses how I feel it can fit into the overall workflow of a team. It doesn't cover the technical aspects of the tool but I'm happy to follow-up if anyone wants me to. Also, be sure to check out the documentation at http://pattern-lab.info/docs/

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

Add a comment

Related presentations

Related pages

Pattern Lab | Build Atomic Design Systems

Pattern Lab lets you include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern, and see those changes reflected ...
Read more

The What and Why of Pattern Lab | Brad Frost

The What and Why of Pattern Lab View Link. Dave Olsen , the ...
Read more

Patterns Crustal Activity Lab Answers - duplex.atefoot4.com

weather patterns lab answers PDF lab 17 temperature patterns answers PDF variables and patterns answers PDF lab global wind patterns answers PDF
Read more

dmolsen.com

The real reason why I'm using PHP for Pattern Lab? PHP keeps things simple and simple is good. Dependencies are a Barrier. ... My name is Dave Olsen.
Read more

Patterns Crustal Activity Lab Answers - fahrenzo.link

weather patterns lab answers PDF lab 17 temperature patterns answers PDF variables and patterns answers PDF lab global wind patterns answers PDF
Read more

knit/lab patterns on Pinterest | Ravelry, Renaissance and Labs

knitting patterns by kieran foley | See more about Ravelry, Renaissance and Labs. knitting patterns by kieran foley ...
Read more

The What, Why, and How of Master Data Management

Why Should I Manage Master Data? ... and how to manage it, while identifying some of the key MDM management patterns and best practices that are emerging.
Read more