Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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 Hayhttp://bradfrostweb.com/blog/mobile/bdconf-ste...
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๏ ...
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 cli...
PATTERN LIBRARIES
We’re not designing pages, we’redesigning 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/...
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 launch...
ATOMIC DESIGN
H2 + O2 → H20C + O2 → CO2CH4 + O2 → CO2 + H2OC8H18 + O2 → CO2 + H20C2H6 + O2 → CO2 + H2O
H2+O2=H20H2+O2→H20
http://joshduck.com/periodic-table.html
ATOMS๏ Building blocks of an interface๏ Can’t be broken down any furtherwithout losing their meaning๏ Abstract๏ Often not ...
Actin’ fool breakin’ shit downto molecules-Busta Rhymes
H2+O2=H20H2+O2→H20
MOLECULES๏ Group of atoms bonded together๏ Smallest fundamental units of acompound๏ More concrete than atoms๏ Encourage a ...
ORGANISMS๏ Group of molecules joinedtogether to form a distinct section๏ Complex molecules๏ Can consist of similar and/ord...
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 overt...
f
PAGES๏ Specific instance of a template๏ Highest fidelity.Template contentis replaced with real/samplecontent๏ The hub for ...
ABSTRACT CONCRETE
ABSTRACT CONCRETECREATORS CLIENTS
REFERENCE BUILD REVIEW
ATOMIC DESIGN๏ Provides a methodology for crafting an effectivedesign system๏ Easily traverse from abstract to concrete๏ P...
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 viewpo...
WHAT PATTERN LAB ISN’T๏ A UI framework๏ Language/library/style dependent๏ Incredibly rigid
Responsive deliverables should looka lot like fully-functioning TwitterBootstrap-style systems customtailored for your cli...
PATTERN BUILDER
MOLECULE GUTScode block<div class="block block-inset"><a href="#" class="inner"><div class="b-thumb"><?php inc(atom,landsc...
BASIC INCLUDEcode block<?php inc(‘molecule’,‘pagination’)?>
ORGANISM GUTScode block<section class="comments section"><div class="comments-container" id="comments-container"><h2 class...
BASIC INCLUDEcode block<?php inc(‘organism’,‘comments’)?>
TEMPLATE GUTScode block<?php inc(organism,header); ?><div role="main"><div class="l-two-col"><div class="l-main"><article ...
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://bradfrostw...
MANUAL
VIEW MODES
WHY PATTERN LAB๏ Serves as a hub for the entire design process๏ Useful tool for everyone: information architects, designer...
WHAT’S NEXT?
DAVE OLSEN@dmolsen
MINIMIZE DEPENDENCIES
MO LANGUAGES
INCLUDES ARE INCLUDEScode block//PHP<?php inc(‘molecule’,‘pagination’)?>//Codekit<!-- @import "m-pagination.kit" -->//Hamm...
HUGE THANK YOU๏ Dave Olsen๏ Dan Mall๏ Josh Clark๏ Jonathan Stark๏ Jennifer Brook๏ Anna Debenham๏ Jeremy Keith๏ Brett Janko...
https://github.com/bradfrost/patternlab
http://patternlab.bradfrostweb.com
WHEN YOU’RE FINISHED CHANGINGYOU’RE FINISHED.
WORK HARD.DON’T BE AN ASSHOLE.SHARE WHAT YOU KNOW.
THANKS!@brad_frost
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
Prochain SlideShare
Chargement dans…5
×

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

1 345 099 vues

Publié le

Publié dans : Technologie, Design

×