moodley session #02 - pattern libraries
TRANSCRIPT
Pattern Librariessession #02
agenda● styleguides / atomic design
● pattern libraries
● styleguides workflow
...let’s recap firststyleguides / atomic design
atomic design
Atoms
● labels● input fields● buttons● …
molecules● combination of atoms
organisms● headers / footers ● sidebars● content-area● ...
templates● groups of
organisms
● to form pages
pages● real content● show
variations of templates
● e.g. different headlines (lenght)
i told youit’s all about ...
Consistency
well that’s trueBUT...
what are important aspects of web design / develpment?!give it another try :)
there is a lot!!!consistency ipad styleguides screen-resolution ux
interaction design performance desktop
web mobile usercontent sliders
social media call to action fullscreen buttons
consistency is the key to efficiency
consistency is the key to efficiencywhich leads to ...
● happy clients
● happy clients● happy designers
● happy clients● happy designers● happy programmers
● happy clients● happy designers● happy programmers● happy project managers
● happy clients● happy designers● happy programmers● happy project managers● happy everybody
consistency has a little brotherREUSABILITY
Pattern Librariesstyleguides + code
some libraries● mailchimp.com● this is responsive● pattern primer● bootstrap
no worries!you never have to touch a single line of code
just like playing LEGO
hey! we need a workflow!let’s talk about it!