Hi!Content. Collaboration. Experience.
Content. Collaboration. Experience.
Info: http://patternlab.ioDemo: http://git.io/pldemo
How Atomic Design WorksPattern Lab Philosophy
Content. Collaboration. Experience.
by Brad Frost http://bradfrost.com/blog/post/atomic-web-design
Atoms Molecule
Organism
Old Design WorkflowGeneralized & Simplified
Content. Collaboration. Experience.
IA, Wireframes Static Comps
Back End Dev
Front End Theming of CMSPrototyping
maybe?
Content. Collaboration. Experience.
Prototypical Fate
Folder Structure
Content. Collaboration. Experience.
/theme
/css /js /pattern-lab
Parallel, Iterative ProcessGeneralized & Simplified
Design
Back End Dev
HTML/CSS/JS in Pattern LabFeedback
Website
Content. Collaboration. Experience.
Pattern Lab StarterPhase2’s Front End Starter
Content. Collaboration. Experience.
http://git.io/p2pls
Content. Collaboration. Experience.
An empty canvas
Photo by Forbairt
Gather all the things
Content. Collaboration. Experience.
Design DiscoveryVisual Inventory
Content. Collaboration. Experience.
by Dan Mall http://danielmall.com/
ConstraintNarrowing the visual range
Content. Collaboration. Experience.
SUBJECTIVEINTO
OBJECTIVEContent. Collaboration. Experience.
Start StrongMulti-disciplinary teams
Content. Collaboration. Experience.
Design Thinking
Brings together humanperspective with what isboth economically viableand technologically feasible
Content. Collaboration. Experience.
Collaborative Design
Content. Collaboration. Experience.
Setting The FoundationTypography
Content. Collaboration. Experience.
http://typecast.com
Visual LanguageLight-weight artifacts
Content. Collaboration. Experience.
http://styletil.es by Samantha Warren
Visual LanguageBuilding up
Content. Collaboration. Experience.
Element Collages invented by Dan Mall
Visual LanguageThe birth of a design system
Content. Collaboration. Experience.
PARALLEL WORK
COLLABORATE
ITERATE
Content. Collaboration. Experience.
Process Re-Cap
LEARN HTML/CSS
STILL OK TO USE PHOTOSHOP
BE AVAILABLE THROUGHOUT PROJECT
EXCELLENCE THROUGH DESIGN QA
Content. Collaboration. Experience.
Designer Take-Aways
Content. Collaboration. Experience.
Design Systems
Content. Collaboration. Experience.
Front-end Architecture
Content. Collaboration. Experience.
Pillar 1: Code
Content. Collaboration. Experience.
Pillar 2: Testing
Content. Collaboration. Experience.
Pillar 3: Process
Content. Collaboration. Experience.
Pillar 4: Documentation
Content. Collaboration. Experience.
C’est Fini
Content. Collaboration. Experience.
Thank you!
Content. Collaboration. Experience.
Evan LovelyDeveloper
@EvanLovely
Joey GrohDirector, Creative Design
@rasskull
Micah GodboltDeveloper
@micahgodbolt
@phase2repo git.io/p2pls
slides bit.ly/new-design-workflow