Creating a Bottom-Up Design System with Style Tiles and Atomic Design

Brian Graves@briangraves

Ryan Heap@ryanmheap

https://www.flickr.com/photos/otterman/4475203104

Design Front-End Back-End Launch!

Linear Workflow

https://www.flickr.com/photos/brad_frost/10413977065/in/album-72157636818350863/

https://www.flickr.com/photos/lukew/10460063574/in/album-72157636814608894/

We’ve changed the end product.But most people are still working in the same old way.

https://www.flickr.com/photos/otterman/4475203104

https://www.flickr.com/photos/samuraislice/2985048261

https://www.flickr.com/photos/samuraislice/2985914042

TODO: Make the green arrows point in both directions and jump from various stages

Photoshop(or Sketch)

Pattern Lab

http://patternlab.io

Pattern Lab: Your Site Generator

Pattern Lab: Your Style Guide

Pattern Lab: Your Project Hub

Designers

Developers

Managers & Clients

@ryanmheap @briangraves

Thank You!

bit.ly/1G27mV3

Resources & Slides