Atomic Design

Frameworks and tools have pitfalls

Possible solution:

Atomic Design with @brad_frost at #uxlx pic.twitter.com/gz4XOe3Gc8

— Rafa Torres (@RafaTorres) June 4, 2015

Analogy for Atomic Design:

Pattern Lab

https://patternlab.io/

Dave Olsen

• A design system builder
• your comprehensive interface design kit

static site generator

At its core, Pattern Lab is a custom static site generator that constructs an interface by stitching atoms, molecules, and organisms together to form templates and pages.

component library

Pattern Lab serves as your project’s pattern library and frontend style guide, but you’re simultaneously able to see components abstractly and in context.

pattern starter kit

Pattern Lab provides a whole slew of patterns just to get you started. Don’t use them all. You should use Pattern Lab to create your own atoms, molecules, organisms, templates, and pages.

viewport resizer

It’s our job to make sure our designs look and function beautifully across a whole slew of Web-enabled devices. Pattern Lab provides a robust viewport resizing tool to help you create great designs across all screens.

annotation tool

Pattern Lab provides a way to annotate your interface to better communicate design and development decisions to clients and team members.

auto refresh tool

Pattern Lab can reload your browser automatically whenever you save changes to patterns, images, CSS or anything in your project. Make a change and see the results instantly.

page follow tool

Testing across multiple browsers and devices is tedious. Page Follow streamlines the development process by syncing navigation from one browser with any other browser connected to the same Pattern Lab site.

Set expectations

Abandon the waterfall process

IA Design and Dev should be working together from the start

Interface Inventory

collect unique interface design patterns

• Document your interface
• highlight inconsitencies
• establish scope
• …
• …

A website drawn by a child #uxlx pic.twitter.com/64QcVFwJ5n

— Silvia (@silvinet) June 4, 2015