SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
Web Designer, Speaker, and Consultant
at
Brad Frost Web
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
We’re not designing pages, we’re
designing systems of components. -Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
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
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/
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
ATOMS ๏ Building blocks of
an interface ๏ Can’t be broken down any further without losing their meaning ๏ Abstract ๏ Often not too useful on their own ๏ Good as an at-a-glance reference ๏ See all your global styles laid out at once
MOLECULES ๏ Group of atoms
bonded together ๏ Smallest fundamental units of a compound ๏ More concrete than atoms ๏ Encourage a “do one thing and do it well” philosophy ๏ Often serve as the backbone for a more complex system
ORGANISMS ๏ Group of molecules
joined together to form a distinct section ๏ Complex molecules ๏ Can consist of similar and/or different molecule types ๏ Encourages creating standalone, portable, reusable components
TEMPLATES ๏ Page-level ๏ Mostly
comprised of groups of organisms ๏ Begin their life as HTML wireframes, increase fidelity over time ๏ Client facing.Very concrete. ๏ Eventually becomes the deliverable/production code
PAGES ๏ Specific instance of
a template ๏ Highest fidelity.Template content is replaced with real/sample content ๏ The hub for most people involved in the process. ๏ Test the effectiveness of the system ๏ Test variations in the template: design/content tweaks, include/ exclude organisms, etc.
ATOMIC DESIGN ๏ Provides a
methodology for crafting an effective design system ๏ Easily traverse from abstract to concrete ๏ Promotes consistency and cohesion ๏ Assembles rather than deconstructs
WHAT PATTERN LAB IS ๏
A comprehensive component library ๏ A pattern starter kit ๏ A design system builder ๏ A practical viewport resizer ๏ A design annotation tool
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/
Start with the small screen
first, then expand until it looks like shit. Time for a breakpoint! -Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
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 you please. ๏ Start with a system rather than deconstruct later ๏ Encourages flexibility ๏ Document as you go
INCLUDES ARE INCLUDES code 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