the what & why of pattern lab
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/TRANSCRIPT
the What & Why of
pattern-lab.infodave 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
linear vs. spiral
rethinking the web design process: team process
rethinking the web design process: spiral process
Kick-off Design &Develop Test Client
Review Production
the deliverables
rethinking the web design process: for clients
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
our toolchains
rethinking the web design process: tools
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
http://daverupert.com/2013/04/responsive-deliverables/
‣tiny bootstrap as a project starter kit
‣building clients their own tiny bootstraps
‣re-using your tiny bootstraps
Kick-off Design &Develop Test Client
Review Production
pattern lab is: integrated into your process
Kick-off Design &Develop Test Client
Review Production
pattern lab is: integrated into your process
atomicspectrum
viewportre-sizer
annotationspage followpattern states
shared component library & dynamic data
MQ re-sizer
starter kit auto-reloadcode viewauto-build
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*
* - only required for page follow
Mustache is used for patterns. JSON is used for dynamic data storage.
download pattern lab: github.com/pattern-lab
demo of the front-end: demo.pattern-lab.info
documentation: pattern-lab.info/docs/
brad frost@brad_frost
dave olsen@dmolsen
the pattern lab team:
nominated: thenetawards.com
pattern labpattern-lab.info
thanks and questions: