Próximos SlideShares
Atomic design
- 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-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
- 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/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+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 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+O2→H20
- 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 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 clients’ needs.-Dave Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
- PATTERN BUILDER
- MOLECULE GUTScode block<div class="block block-inset"><a href="#" class="inner"><div class="b-thumb"><?php inc(atom,landscape) ?></div><div class="b-text"><h2 class="headline">Headline:Lorem ipsum dolor sit amet,consectetur adipisicing</h2></div></a></div>
- BASIC INCLUDEcode block<?php inc(‘molecule’,‘pagination’)?>
- ORGANISM GUTScode block<section class="comments section"><div class="comments-container" id="comments-container"><h2 class="section-title">59 Comments</h2><?php inc(molecule,comment-form); ?><ul class="comment-list"><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?></ul></div><?php inc(molecule,pagination) ?></section>
- 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 class="article"><header class="article-header"><h1>Article Headline Lorem ipsum dolor sit</h1><?php inc(molecule,byline-author-time) ?></header><?php inc(organism,article-body) ?></article><!--end .article--><?php inc(molecule,social-share) ?><?php inc(organism,comment-thread) ?></div><!--end l-main--><div class="l-sidebar"><?php inc(organism,related-posts) ?><?php inc(organism,recent-tweets) ?></div><!--end l-sidebar--></div><!--end l-two-col--></div><!--End role=main--><?php inc(organism,footer); ?>
- 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
- WHAT’S NEXT?
- DAVE OLSEN@dmolsen
- MINIMIZE DEPENDENCIES
- MO LANGUAGES
- INCLUDES ARE INCLUDEScode block//PHP<?php inc(‘molecule’,‘pagination’)?>//Codekit<!-- @import "m-pagination.kit" -->//Hammer<!-- @include _m-pagination.html -->//Ruby (maybe, I don’t 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 YOU’RE FINISHED CHANGINGYOU’RE FINISHED.
- WORK HARD.DON’T BE AN ASSHOLE.SHARE WHAT YOU KNOW.
- THANKS!@brad_frost
Entre para ver os comentários