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