brad frost: atomic design (webdagene 2014)
DESCRIPTION
Over the past few years, we’ve seen the web community create style tiles, element collages, style guides, pattern libraries, and a slew of other tools in order to break interfaces down to their atomic elements. Our interfaces are going more places than ever before, so this shift is essential to help us better understand what our websites consist of in order for us create smart, scalable, maintainable designs. This session will introduce atomic design, a methodology for creating robust design systems. We’ll cover how to apply atomic design to implement your very own design system in order to set you, your organization and clients up for success.TRANSCRIPT
ATOMIC DESIGN@brad_frost
PAGESGRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
Design systems, not pages. -Andy Clarke
http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
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 everything you need ๏ Compatibility with existing sites ๏ Subscribe to someone else’s structure, naming, style
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 clients’ needs. -Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
http://maban.co.uk/projects/front-end-style-guides/
BENEFITS OF FRONT-END STYLE GUIDES๏ Promotes consistency and cohesion ๏ Easier to test ๏ Better workflow ๏ Creates a shared vocabulary ๏ Useful reference
http://24ways.org/2011/front-end-style-guides/
http://brettjankord.com/projects/style-guide-boilerplate/
http://patternprimer.adactio.com/
http://barebones.paulrobertlloyd.com
http://style.codeforamerica.org/
http://ux.mailchimp.com/patterns/
http://yelp.com/styleguide
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 a designer/developer tool ๏ Often created after a project launches ๏ Often incomplete/only serving present cases ๏ Lacking a clear methodology
ATOMIC DESIGN
2H2 + O2 → 2H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
2H2+O2→2H20
http://joshduck.com/periodic-table.html
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ENTER KEYWORD
SEARCH THE SITE
SEARCH
You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. -Mark Boulton
http://www.markboulton.co.uk/journal/structure-first-content-always
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS๏ A design system builder ๏ Your comprehensive custom component library ๏ A pattern starter kit ๏ A design toolkit (viewport resizer and other tools)
WHAT PATTERN LAB AIN’T๏ A UI framework ๏ Language, library, style, workflow dependent ๏ Incredibly rigid ๏ “Just” a pattern library, but also not a production-ready
static site generator
MOLECULE GUTScode block!!!<div class="block block-post"> <a href="{{ url }}"> <div class="b-img"> {{> atoms-thumb }} </div> <h3 class="b-title">{{ headline }}</h3> <p class="b-excerpt">{{ excerpt }}</p> </a> </div> !
BASIC INCLUDEcode block!!!!!
!
!
!
{{> molecules-block-post }} !
ORGANISM GUTScode block!!!<header class="header" role="banner"> {{> atoms-ad-leaderboard }} {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} {{> molecules-social-nav }} </header>
BASIC INCLUDEcode block!!!!!
!
{{> organisms-header }}
TEMPLATE GUTScode block{{> organisms-header }} <main role="main"> <div class="l-two-col"> <div class="l-main"> {{> organisms-article-body }}
{{> molecules-social-share }} {{> organisms-comments }} </div><!--end l-main--> ! <div class="l-sidebar"> {{> organisms-related-posts }} {{> organisms-recent-tweets }} </div><!--end l-sidebar--> </div><!--end l-two-col--> </main><!--End role=main--> {{> organisms-footer }}
TEMPLATE GUTScode block{{> organisms-header }} <main role="main"> {{# hero }} {{> molecules-hero-video }} {{/ hero }} <section class="section"> {{# experience }} {{> organisms-story-feature }} {{/ experience }} </section> <section class="section"> {{# factoid-advertising }} {{> organisms-factoid }} {{/ factoid-advertising }} </section>
PIPING IN REAL CONTENTcode block{ "title" : "Time Inc.", "bodyClass": "home", "hero" : [ { "headline": { "xs": "Moving People" }, "img": { "hero-full": { "src": "../../images/sample/hero_beyonce.jpg", "alt": "Beyonce" } } }
PIPING IN REAL CONTENTcode block"experience" : { "heroClass" : "experience", "img" : { "hero-main": { "src": "../../images/sample/hero_skater.jpg", "alt": "Olympic Figure Skater" } }, "eyebrow" : "Experiences", "headline" : { "short" : “Champions at the Olympics" }, "excerpt" : { "medium" : "Time Inc’s brands cover every aspect of the Sochi XXII Winter Olympic Games. From the best athletes to the best viewing parties." } } }
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.
ANNOTATIONS
LINEAGE
http://patternlab.io
IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.
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, agnostic of device, screen size, or context. -Dan Mall
http://danielmall.com/articles/the-post-psd-era/
COMPLEX NAVIGATIONDEATH TO THE WATERFALL
GATHER
http://bradfrostweb.com/blog/post/interface-inventory/
๏ Document your interface ๏ Promote consistency ๏ Establish scope of work for translating to a responsive
interface ๏ Lay the groundwork for a future style guide/pattern library
INTERFACE INVENTORY
ESTABLISH DIRECTION
RESOURCEhttp://styletil.es/
ROLL UP OUR SLEEVES
http://trentwalton.com/2011/07/14/content-choreography/
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
MOBILE WEB
THANKS! @brad_frost