Page 1 Prototyping Your Way to Happiness: An Adventure with Pattern Lab @mandiwisePage 2 We had a problem.Page 3 Page 4 What you get: Front-end style guide Markup-based mock-ups Responsive deliverablesPage 5 Atomic design?Page 6 bradfrost.com/blog/post/atomic-web-design http://bradfrost.com/blog/post/atomic-web-designPage 7 Icon by Phillip Glenn http://thenounproject.com/term/dr-manhattan/32326/Page 8 Page 9 Icon by Michael Wohlwend http://thenounproject.com/term/methane/80860/Page 10 Page 11 Icon by Timothy Dilich http://thenounproject.com/term/microbe/13599/Page 12 Icon by Joe Simpson http://thenounproject.com/term/dog/14050/Page 13 Page 14 Atoms Molecules Organisms Templates PagesPage 15 Page 16 Benefits: Promotes consistency Makes minutia manageable BYO–anything Scales easily and quicklyPage 17 Getting started…Page 18 Step 1:Download Pattern LabPage 19 Page 20 Step 2:Generate your Pattern Lab site for the first timePage 21 $ php core/builder.php -‐gPage 22 Step 3:Start editing the source filesPage 23 $ php core/builder.php -‐wrPage 24 Lessons learned: Incorporate it from the start Breaking things down into reusable components makes life easier Prototyping saves timePage 25 Thanks!