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/

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