Downloaded 61 times
Uploaded byDave Olsen
The What & Why of Pattern Lab
The document discusses the concept of Pattern Lab, a set of tools designed for creating modular web design systems while integrating client feedback throughout the process. It emphasizes rethinking the web design approach with deliverables such as mood boards, style tiles, and various mock-ups, and details the importance of toolchains in development. Additionally, it outlines the requirements and features of Pattern Lab, which aims to streamline design and development workflows.
More Related Content
![5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)](https://cdn.slidesharecdn.com/ss_thumbnails/5reasonswhyyourwebsiteisntanativeapp-150604163105-lva1-app6892-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to The What & Why of Pattern Lab
The What & Why of Pattern Lab
- 1. the What &Why of pattern-lab.info dave olsen, @dmolsen
- 2. a roadmap forthe 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 webdesign process: team process linear vs. spiral
- 4. rethinking the webdesign process: spiral process Kick-off Design & Develop Test Client Review Production
- 5. rethinking the webdesign process: for clients the deliverables
- 6. rethinking the webdesign 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 webdesign process: tools our toolchains
- 8. rethinking the webdesign process: toolchains ‣ CSS pre-processors ‣ CSS frameworks ‣ JavaScript frameworks ‣ Build tools ‣ Content Management Systems lots to choose from!
- 9. wouldn’t it becool 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.
- 11. pattern lab is... PatternLab 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 patternlab isn’t... ‣ a fancy UI framework ‣ dependency heavy ‣ incredibly rigid you make it what you want & need
- 22. the requirements: PHP 5.3+ noweb 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 thefront-end: demo.pattern-lab.info
- 25.
- 26. the pattern labteam: brad frost @brad_frost dave olsen @dmolsen
- 27.
- 28. thanks and questions: patternlab pattern-lab.info