Essay about 6.Frost-RWDsummit2014-AtomicDesign

Submitted By jeffsmrctest21
Words: 852
Pages: 4

ATOMIC DESIGN
@brad_frost

PAGES
GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/ DESIGN SYSTEMS

WHAT IS AN INTERFACE MADE OF?

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

We’re not designing pages, we’re designing systems of components.
-Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/ http://foundation.zurb.com/

getbootstrap.com

THESE THINGS ARE GREAT, BUT...

FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Compatibility with existing sites
๏ Subscribe to someone else’s structure, naming, style

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 clients’ needs.
-Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/ fivesimplesteps.com/products/front-end-style-guides

BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference

http://24ways.org/2011/front-end-style-guides/

http://gim.ie/fZyK

http://pea.rs/

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

http://patternprimer.adactio.com/

http://malarkey.github.io/Rock-Hammer/

http://barebones.paulrobertlloyd.com

`

http://style.codeforamerica.org/

http://ux.mailchimp.com/patterns/

http://yelp.com/styleguide

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 too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
๏ Often incomplete/only serving present cases
๏ Lacking a clear methodology

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

H2+O2=H20
H2+O2→H20

SEARCH THE SITE

ENTER KEYWORD

SEARCH

SEARCH THE SITE
ENTER KEYWORD

SEARCH

You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is.
-Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always There is a symbiotic relationship between content and design. One cannot thrive without the other.
-Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always 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
๏ Promotes consistency and cohesion
๏ Assembles rather than deconstructs

The idea of designing components like this, out of context and without layout, might sound strange— particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble.
-Andy Clarke http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements DAVE OLSEN
@dmolsen

WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool

WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “just” a pattern library, but also not a production-ready static site generator

SITE BUILDER

MOLECULE GUTS code block
!
<div class="block block-inset">
<div class="b-thumb">
{{>…