1. Pattern Libraries
session #02

2. agenda
● styleguides / atomic design
● pattern libraries
● styleguides workflow

3. ...let’s recap first
styleguides / atomic design

4. atomic design

5. Atoms
●
●
●
●
labels
input fields
buttons
…

6. molecules
● combination of atoms

7. organisms
●
●
●
●
headers / footers
sidebars
content-area
...

8. templates
● groups of
organisms
● to form
pages

9. pages
● real content
● show
variations of
templates
● e.g. different
headlines
(lenght)

10. i told you
it’s all about ...

11. Consistency

12. well that’s true
BUT...

13. what are important
aspects of web design /
develpment?!
give it another try :)

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. consistency is
consistency is the key to
the key to
efficiency
efficiency
which leads to ...

16. ● happy clients

17. ● happy clients
● happy designers

18. ● happy clients
● happy designers
● happy programmers

19. ●
●
●
●
happy clients
happy designers
happy programmers
happy project managers

20. ●
●
●
●
●
happy clients
happy designers
happy programmers
happy project managers
happy everybody

21. consistency has
a little brother
REUSABILITY

22. Pattern Libraries
styleguides + code

23. some libraries
●
●
●
●
mailchimp.com
this is responsive
pattern primer
bootstrap

24. no worries!
you never have to touch a single line of code

25. just like playing LEGO

26. hey! we need a
workflow!
let’s talk about it!