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 toolchai...
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
‣ hi...
rethinking the web design process: tools

our toolchains
rethinking the web design process: toolchains

‣ CSS pre-processors
‣ CSS frameworks
‣ JavaScript frameworks
‣ Build tools...
wouldn’t it be cool if a tool...

‣ Covered the entire dev lifecycle
‣ Made it easy for clients to review work
‣ Allowed f...
introducing
pattern lab
pattern lab is...

Pattern Lab is a collection of
tools for creating modular
systems, your very own tiny
bootstraps and in...
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...
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
spect...
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 & ...
the requirements:

PHP 5.3+
no web server required*
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/
the pattern lab team:

brad frost
@brad_frost

dave olsen
@dmolsen
nominated: thenetawards.com
thanks and questions:

pattern lab
pattern-lab.info
Upcoming SlideShare
Loading in...5
×

The What & Why of Pattern Lab

5,309

Published on

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/

2 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,309
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
48
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide

The What & Why of Pattern Lab

  1. 1. the What & Why of pattern-lab.info dave olsen, @dmolsen
  2. 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. 3. rethinking the web design process: team process linear vs. spiral
  4. 4. rethinking the web design process: spiral process Kick-off Design & Develop Test Client Review Production
  5. 5. rethinking the web design process: for clients the deliverables
  6. 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. 7. rethinking the web design process: tools our toolchains
  8. 8. rethinking the web design process: toolchains ‣ CSS pre-processors ‣ CSS frameworks ‣ JavaScript frameworks ‣ Build tools ‣ Content Management Systems lots to choose from!
  9. 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. 10. introducing pattern lab
  11. 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. 12. pattern lab is: build systems, not pages
  13. 13. pattern lab is: build systems, not pages molecules-search organisms-header templates-homepage
  14. 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. 15. pattern lab is: integrated into your process Kick-off Design & Develop Test Client Review Production
  16. 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. 17. pattern lab is: all your deliverables in one place
  18. 18. pattern lab screenshot: pattern example
  19. 19. pattern lab screenshot: annotations
  20. 20. pattern lab screenshot: code view
  21. 21. by default pattern lab isn’t... ‣ a fancy UI framework ‣ dependency heavy ‣ incredibly rigid you make it what you want & need
  22. 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. 23. download pattern lab: github.com/pattern-lab
  24. 24. demo of the front-end: demo.pattern-lab.info
  25. 25. documentation: pattern-lab.info/docs/
  26. 26. the pattern lab team: brad frost @brad_frost dave olsen @dmolsen
  27. 27. nominated: thenetawards.com
  28. 28. thanks and questions: pattern lab pattern-lab.info
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×