All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
DESIGN SYSTEMS http://styletil.es
http://sparkbox.github.com/style-prototype/ COMPONENTS Were not
designing pages,were designing systems of components.-Stephen
Hayhttp://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
FRAMEWORKS RESOURCEhttp://foundation.zurb.com/
RESOURCEhttp://twitter.github.com/bootstrap/ THESE THINGS ARE
GREAT, BUT... FRAMEWORK POTENTIAL PITFALLS Subscribe to other
developers structure/naming/style Lookalike issues
One-size-fits-all Potential for bloat/unneeded stuff Might not do
everything you need Ability to scale Compatibility with existing
sites Tiny Bootstraps, for every client.-Dave
Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
Responsive deliverables should looka lot like fully-functioning
TwitterBootstrap-style systems customtailored for your clients
needs.-Dave
Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
PATTERN LIBRARIES Were not designing pages, weredesigning systems
of components.-Stephen
Hayhttp://24ways.org/2011/front-end-style-guides/ BENEFITS OF
FRONT-END STYLE GUIDES Easier to test Better workflow Shared
vocabulary Useful
referencehttp://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://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
launches Often too abstract Seen only as a designer/developer tool
Often incomplete/only serving present cases Lacking a methodology
ATOMIC DESIGN H2 + O2 H20C + O2 CO2CH4 + O2 CO2 + H2OC8H18 + O2 CO2
+ H20C2H6 + O2 CO2 + H2O H2+O2=H20H2+O2H20
http://joshduck.com/periodic-table.html ATOMS Building blocks of an
interface Cant be broken down any furtherwithout losing their
meaning Abstract Often not too useful on their own Good as an
at-a-glance reference See all your global styles laid outat once
Actin fool breakin shit downto molecules-Busta Rhymes
H2+O2=H20H2+O2H20 MOLECULES Group of atoms bonded together Smallest
fundamental units of acompound More concrete than atoms Encourage a
do one thing anddo it well philosophy Often serve as the backbone
for amore complex system ORGANISMS Group of molecules
joinedtogether to form a distinct section Complex molecules Can
consist of similar and/ordifferent molecule types Encourages
creating standalone,portable, reusable components
http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
TEMPLATES Page-level Mostly comprised of groups oforganisms Begin
their life as HTMLwireframes, increase fidelity overtime Client
facing.Very concrete. Eventually becomes thedeliverable/production
code f PAGES Specific instance of a template Highest
fidelity.Template contentis replaced with real/samplecontent The
hub for most people involvedin the process. Test the effectiveness
of thesystem Test variations in the template:design/content tweaks,
include/exclude organisms, etc. ABSTRACT CONCRETE ABSTRACT
CONCRETECREATORS CLIENTS REFERENCE BUILD REVIEW ATOMIC DESIGN
Provides a methodology for crafting an effectivedesign system
Easily traverse from abstract to concrete Promotes consistency and
cohesion Assembles rather than deconstructs Pattern Lab is a
collection of toolsto help create and maintainatomic web design
systems. WHAT PATTERN LAB IS A comprehensive component library A
pattern starter kit A design system builder A practical viewport
resizer A design annotation tool WHAT PATTERN LAB ISNT A UI
framework Language/library/style dependent Incredibly rigid
Responsive deliverables should looka lot like fully-functioning
TwitterBootstrap-style systems customtailored for your clients
needs.-Dave
Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
PATTERN BUILDER MOLECULE GUTScode block
Headline:Lorem ipsum dolor sit amet,consectetur
adipisicing
BASIC INCLUDEcode block ORGANISM GUTScode block
59 Comments
BASIC INCLUDEcode block TEMPLATE GUTScode block
Article Headline Lorem ipsum dolor sit
f 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
Hayhttp://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
MANUAL VIEW MODES WHY PATTERN LAB Serves as a hub for the entire
design process Useful tool for everyone: information architects,
designers,developers, clients Can easily traverse from abstract to
concrete Write HTML/CSS/JS as you please. Name things as youplease.
Start with a system rather than deconstruct later Encourages
flexibility Document as you go WHATS NEXT? DAVE OLSEN@dmolsen
MINIMIZE DEPENDENCIES MO LANGUAGES INCLUDES ARE INCLUDEScode
block//PHP//Codekit//Hammer//Ruby (maybe, I dont know)load
m-pagination.rb HUGE THANK YOU Dave Olsen Dan Mall Josh Clark
Jonathan Stark Jennifer Brook Anna Debenham Jeremy Keith Brett
Jankord Paul Robert Lloyd Tyler Sticka Harry Roberts Dan Cederholm
https://github.com/bradfrost/patternlab
http://patternlab.bradfrostweb.com WHEN YOURE FINISHED
CHANGINGYOURE FINISHED. WORK HARD.DONT BE AN ASSHOLE.SHARE WHAT YOU
KNOW. THANKS!@brad_frost
