Atomic design

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

ATOMIC DESIGN@brad_frost

DESIGN SYSTEMS

http://styletil.es

http://sparkbox.github.com/style-prototype/

COMPONENTS

We’re not designing pages,
we’re designing systems of components.
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-...

WHAT IS AN INTERFACE MADE OF?

http://bradfrost.github.com/this-is-responsive/patterns.html

FRAMEWORKS

RESOURCE
http://foundation.zurb.com/

RESOURCE
http://twitter.github.com/bootstrap/

THESE THINGS ARE GREAT, BUT...

FRAMEWORK POTENTIAL PITFALLS
๏ Subscribe to other developers’ structure/naming/style
๏ Lookalike issues
๏ One-size-fits-al...

Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/

Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your ...

PATTERN LIBRARIES

We’re not designing pages, we’re
designing systems of components.
-Stephen Hay
http://24ways.org/2011/front-end-style-guid...

BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Shared vocabulary
๏ Useful reference
http://24ways...

http://gim.ie/fZyK

http://pea.rs/

http://brettjankord.com/projects/style-guide-boilerplate/

http://patternprimer.adactio.com/

http://barebones.paulrobertlloyd.com

http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/

I LOVE THESE.

MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often created after a project lau...

ATOMIC DESIGN

H2 + O2 → H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O

H2+O2=H20
H2+O2→H20

http://joshduck.com/periodic-table.html

ATOMS
๏ Building blocks of an interface
๏ Can’t be broken down any further
without losing their meaning
๏ Abstract
๏ Often...

Actin’ fool breakin’ shit down
to molecules
-Busta Rhymes

H2+O2=H20
H2+O2→H20

MOLECULES
๏ Group of atoms bonded together
๏ Smallest fundamental units of a
compound
๏ More concrete than atoms
๏ Encoura...

ORGANISMS
๏ Group of molecules joined
together to form a distinct section
๏ Complex molecules
๏ Can consist of similar and...

http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups

TEMPLATES
๏ Page-level
๏ Mostly comprised of groups of
organisms
๏ Begin their life as HTML
wireframes, increase fidelity ...

PAGES
๏ Specific instance of a template
๏ Highest fidelity.Template content
is replaced with real/sample
content
๏ The hub...

ABSTRACT CONCRETE

ABSTRACT CONCRETE
CREATORS CLIENTS

REFERENCE BUILD REVIEW

ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete...

Pattern Lab is a collection of tools
to help create and maintain
atomic web design systems.

WHAT PATTERN LAB IS
๏ A comprehensive component library
๏ A pattern starter kit
๏ A design system builder
๏ A practical vi...

WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language/library/style dependent
๏ Incredibly rigid

Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your ...

PATTERN BUILDER

MOLECULE GUTS
code block<div class="block block-inset">
<a href="#" class="inner">
<div class="b-thumb">
<?php inc('atom',...

BASIC INCLUDE
code block
<?php inc(‘molecule’,‘pagination’)?>

ORGANISM GUTS
code block<section class="comments section">
<div class="comments-container" id="comments-
container">
<h2 c...

BASIC INCLUDE
code block
<?php inc(‘organism’,‘comments’)?>

TEMPLATE GUTS
code block<?php inc('organism','header'); ?>
<div role="main">
<div class="l-two-col">
<div class="l-main">
...

VIEWER

320PX.

320PX.
480PX.

320PX.
480PX.
768PX.

320PX.
480PX.
768PX.
1024PX.

320PX.
480PX.
768PX.
1024PX.
THE FOLD.

320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.

DISCO MODE

HAY! MODE

Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
-Stephen Hay
http://bradfr...

MANUAL

VIEW MODES

WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Useful tool for everyone: information architects, design...

WHAT’S NEXT?

DAVE OLSEN@dmolsen

MINIMIZE DEPENDENCIES

MO LANGUAGES

INCLUDES ARE INCLUDES
code block//PHP
<?php inc(‘molecule’,‘pagination’)?>
//Codekit

/...

HUGE THANK YOU
๏ Dave Olsen
๏ Dan Mall
๏ Josh Clark
๏ Jonathan Stark
๏ Jennifer Brook
๏ Anna Debenham
๏ Jeremy Keith
๏ Bre...

https://github.com/bradfrost/patternlab

http://patternlab.bradfrostweb.com

WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.

WORK HARD.
DON’T BE AN ASSHOLE.
SHARE WHAT YOU KNOW.

THANKS!@brad_frost

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

Getting started with your research ... by L. D. Morris 9256 views
Planning Innovations: Conjoint Anal... by QuestionPro 2949 views
CSS pattern libraries by Russ Weakley 83834 views
The Server Side of Responsive Web D... by Dave Olsen 13718 views
Responsive Design Workflow (Breakin... by Stephen Hay 42252 views
Content Design, UI Architecture and... by Wolfram Nagel 13963 views

Top clipped slide

1 of 173 Ad

1 of 173 Ad