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

10.
introducing
pattern lab

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

20.
pattern lab screenshot: code view

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

25.
documentation: pattern-lab.info/docs/

26.
the pattern lab team:
brad frost
@brad_frost
dave olsen
@dmolsen

27.
nominated: thenetawards.com

28.
thanks and questions:
pattern lab
pattern-lab.info