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 468 197 vues

Publié le

Publié dans : Technologie, Design
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

×