DESIGN SYSTEMS http://styletil.es
http://sparkbox.github.com/style-prototype/ COMPONENTS Were not
designing pages,were 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 Were not designing pages, weredesigning 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+O2H20
http://joshduck.com/periodic-table.html ATOMS Building blocks of an
interface Cant 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+O2H20 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 ISNT 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
Headline:Lorem ipsum dolor sit amet,consectetur
adipisicing
BASIC INCLUDEcode block ORGANISM GUTScode block
59 Comments
BASIC INCLUDEcode block TEMPLATE GUTScode block
Article Headline Lorem ipsum dolor sit
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 WHATS NEXT? DAVE OLSEN@dmolsen
MINIMIZE DEPENDENCIES MO LANGUAGES INCLUDES ARE INCLUDEScode
block//PHP//Codekit//Hammer//Ruby (maybe, I dont 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 YOURE FINISHED
CHANGINGYOURE FINISHED. WORK HARD.DONT BE AN ASSHOLE.SHARE WHAT YOU
KNOW. THANKS!@brad_frost
