Click here to load reader
Upload
brad-frost
View
35.964
Download
3
Embed Size (px)
Citation preview
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
The idea of designing components like this, out of context and without layout, might sound strange—particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble. -Andy Clarke
http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS๏ A design system builder ๏ A comprehensive custom component library ๏ A pattern starter kit ๏ A practical viewport resizer ๏ An annotation tool
WHAT PATTERN LAB AIN’T๏ A UI framework ๏ Language, library, or style dependent ๏ Incredibly rigid ๏ “Just” a pattern library, but also not a production-ready
static site generator
MOLECULE GUTScode block!!<div class="block block-inset"> <div class="b-thumb"> {{> atoms-img-landscape-4x3 }} </div> <div class="b-text"> <h2>{{ headline.short }}</h2> </div> </div> !
BASIC INCLUDEcode block!!!!!
!
!
!
{{> molecules-block-inset }} !
ORGANISM GUTScode block!!!<header class="header" role="banner"> {{> atoms-header-ad }} {{> 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 }} !
CONTENT STRUCTURE ACTUAL CONTENT
TEMPLATE GUTScode block{{# hero }} {{> molecules-block-hero }} {{/ hero}} !
<div class="g g-3up"> {{# touts}} <div class="gi"> {{> molecules-inset-block }} </div> {{/ touts}} </div>
PIPING IN REAL CONTENT WITH JSONcode block!!"hero" : { "img": { "landscape-16x9": { "src": "images/sample/mountains.jpg", "alt": "Mountains" } }, "headline" : { "medium" : "Top 10 mountin ranges" } }
PIPING IN REAL CONTENT WITH JSONcode block"touts" : [ { "img": { "landscape-4x3": { "src": "../../images/sample/climber.jpg", "alt": "Climber" } }, "headline" : { "short" : "Extreme climbing tips" } }, { "img": { "landscape-4x3": { "src": “../../images/sample/stream.jpg", "alt": "Stream" } }, "headline" : { "short" : “Stream Hiking" }
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.
RESOURCEhttp://bradfrostweb.com/demo/ish/
ANNOTATIONS
code block!!{ "el": ".header", "title": "Header", "title": "The header is a global element…" }, { "el": ".nav", "title": "Primary Navigation", "title": "The navigation is…" }
ANNOTATIONS WITH JSON
LINEAGE
A BUNCH OF OTHER STUFF๏ Code view (Mustache and rendered HTML) ๏ Pattern status ๏ Auto-refresh ๏ Page follow ๏ Future: plugins
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://stylifyme.com/
http://bradfrostweb.com/blog/post/interface-inventory/
๏ Document your interface ๏ Promote consistency ๏ Establish which elements will be challenging to translate
into a responsive environment ๏ Lay the groundwork for a future style guide/pattern library
INTERFACE INVENTORY
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
ESTABLISH DIRECTION
RESOURCEhttp://styletil.es/
ROLL UP OUR SLEEVES
CONTENT STRUCTURE ACTUAL CONTENT
http://trentwalton.com/2011/07/14/content-choreography/
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
MOBILE WEB
THANKS! @brad_frost