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.
13. 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/
23. 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
24. Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
25. 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/
42. 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
61. 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
68. 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
69.
70.
71.
72.
73. 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
80. 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
84. 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.
89. 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
90.
91.
92. Pattern Lab is a collection of tools
to help create and maintain
atomic web design systems.
93. WHAT PATTERN LAB IS
āš A comprehensive component library
āš A pattern starter kit
āš A design system builder
āš A practical viewport resizer
āš A design annotation tool
94. WHAT PATTERN LAB ISNâT
āš A UI framework
āš Language/library/style dependent
āš Incredibly rigid
95.
96. 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/
142. 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/
151. 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
161. 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'
162.
163. 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