Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
ATOMIC DESIGN
@brad_frost
PAGES
GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
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
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 ev...
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 ...
BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference

ht...
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://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...
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
ABSTRACT

CONCRETE
ABSTRACT

CONCRETE

CREATORS

CLIENTS
REFERENCE

BUILD

REVIEW
DAVE OLSEN
@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A pract...
WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “just” a pattern libr...
SITE BUILDER
BLOW IT UP.
http://www.starbucks.com/static/reference/styleguide/
MOLECULE GUTS
code block
!
<div class="block block-inset">
<div class="b-thumb">
{{> atoms-img-landscape-4x3 }}
</div>
<di...
BASIC INCLUDE
!
!
!
!
!

code block
!
!
!

{{> molecules-block-inset }}
!
ORGANISM GUTS
!
code block
!
!
!
!

<header class="header cf" role="banner">
{{> atoms-logo }}
<a href="#search" class="to...
BASIC INCLUDE
!
code block
!
!
!
!

{{> organisms-header }}
TEMPLATE GUTS
{{>
codeorganisms-header
block

}}

<div role="main">
<div class="l-two-col">
<div class="l-main">
{{> organ...
CONTENT STRUCTURE

ACTUAL CONTENT
TEMPLATE GUTS
code hero }}
{{# block
{{> molecules-block-hero }}
{{/ hero}}
!

<div class="g g-3up">
{{# touts}}
<div clas...
PIPING IN REAL CONTENT WITH JSON
"hero" : [
code {block

}

"img": {
"landscape-16x9": {
"src": "images/sample/mountains.j...
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...
ANNOTATIONS
AUTO-REFRESH &
PAGE FOLLOW
PATTERN LAB

๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Useful tool...
SET EXPECTATIONS
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnos...
B-SIDE
THIS IS NOT
THE WEB.
WEB
WEB
DEATH TO NAVIGATION
COMPLEXTHE WATERFALL
Let’s change the phrase
“designing in the browser”
to “deciding in the browser”
-Dan Mall
http://the-pastry-box-project.ne...
GATHER
http://stylifyme.com/
http://bradfrostweb.com/blog/post/interface-inventory/
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
INTERFACE INVENTORY

๏ Document your interface
๏ Promote consistency

๏ Establish which elements will be challenging to tr...
ESTABLISH DIRECTION
RCE
OU
RES

http://styletil.es/
ROLL UP OUR SLEEVES
CONTENT STRUCTURE

ACTUAL CONTENT
http://www.flickr.com/photos/15609463@N03/7854373494/
COLLABORATION AND COMMUNICATION
TRUMP DELIVERABLES
http://pattern-lab.info
IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME THIS GUY.
HUGE THANK YOU
๏ Dave Olsen

๏ Anna Debenham

๏ Dan Mall

๏ Andy Clarke

๏ Josh Clark

๏ Paul Robert Lloyd

๏ Jonathan Sta...
WHEN YOU’RE FINISHED CHANGING

YOU’RE FINISHED.
THIS IS FUN!
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/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
Próxima SlideShare
Cargando en…5
×

http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/ Atomic Design - BDConf Nashville, 2013

35.685 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
  • 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,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • 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,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Hi
    Could You go out with me?
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • long journey to the end of the slide, but i do like it..
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Great material!
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

×