SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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/
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
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.
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
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