Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Moodley Session #02 - pattern libraries

440 views

Published on

Published in: Design
  • Login to see the comments

Moodley Session #02 - pattern libraries

  1. 1. Pattern Libraries session #02
  2. 2. agenda ● styleguides / atomic design ● pattern libraries ● styleguides workflow
  3. 3. ...let’s recap first styleguides / atomic design
  4. 4. atomic design
  5. 5. Atoms ● ● ● ● labels input fields buttons …
  6. 6. molecules ● combination of atoms
  7. 7. organisms ● ● ● ● headers / footers sidebars content-area ...
  8. 8. templates ● groups of organisms ● to form pages
  9. 9. pages ● real content ● show variations of templates ● e.g. different headlines (lenght)
  10. 10. i told you it’s all about ...
  11. 11. Consistency
  12. 12. well that’s true BUT...
  13. 13. what are important aspects of web design / develpment?! give it another try :)
  14. 14. there is a lot!!! consistency ipad styleguides screen-resolution ux interaction design web mobile social media performance usercontent call to action fullscreen desktop sliders buttons
  15. 15. consistency is consistency is the key to the key to efficiency efficiency which leads to ...
  16. 16. ● happy clients
  17. 17. ● happy clients ● happy designers
  18. 18. ● happy clients ● happy designers ● happy programmers
  19. 19. ● ● ● ● happy clients happy designers happy programmers happy project managers
  20. 20. ● ● ● ● ● happy clients happy designers happy programmers happy project managers happy everybody
  21. 21. consistency has a little brother REUSABILITY
  22. 22. Pattern Libraries styleguides + code
  23. 23. some libraries ● ● ● ● mailchimp.com this is responsive pattern primer bootstrap
  24. 24. no worries! you never have to touch a single line of code
  25. 25. just like playing LEGO
  26. 26. hey! we need a workflow! let’s talk about it!

×