The What & Why of Pattern Lab
ā¢22 likesā¢8,512 views
Report
Share
Download to read offline
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/
More Related Content
What's hot
What's hot(20)
![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=768&fit=bounds)
Viewers also liked
Viewers also liked(6)
Similar to The What & Why of Pattern Lab
Similar to The What & Why of Pattern Lab(20)
More from Dave Olsen
More from Dave Olsen(20)
The What & Why of Pattern Lab
- 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 ļ¬ts - atomic design - tiny bootstraps - an integrated workļ¬ow ā£ where to ļ¬nd 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-ļ¬delity HTML mock-ups ā£ high-ļ¬delity 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
- 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
- 26. the pattern lab team: brad frost @brad_frost dave olsen @dmolsen
- 28. thanks and questions: pattern lab pattern-lab.info