A few concepts about successful style guides and tools used to build them. Slides supported the presentation on The Developers Conference - Florianópolis - Brazil, at May 14, 2015.

1. The Developer’s Conference 2015
14/05/2015
Style Guide Tools

2. Scenario #1
The missed child

3. Scenario #2
The Janitor

5. Filipi Zimermann filipiz filipiz

7. WHAT IS A
STYLE GUIDE
?

8. A style guide tells the story of your
design solution...
What is a style guide?
http://designmodo.com/style-guides/

9. A living document of code, which details
all the various elements and coded
modules of your site or application.
What is a style guide?
http://alistapart.com/article/creating-style-guides

10. A framework.
What is a style guide?
ZIMERMANN, 2015 :)

11. WHAT DOES IT
CONTAINS
?

12. Anatomy of a style guide
● Strategic brand overview
● Logos
● Spacing
● Typography
● Color Palette
● Iconography
● Copy rules
● Imagery

13. Anatomy of a style guide
● Grid system
● Form elements
● Button Hierarchy
● Navigation
● Coding style
● Examples… lots of them!!
http://www.smashingmagazine.com/.../designing-style-guidelines-for-brands-and-websites/
http://designmodo.com/create-style-guides/

14. REFERENCES

15. References

16. References

17. References

18. References

19. References

20. References

21. WHY BUILD A STYLE GUIDE
?

22. What is it for?
● Communicate!
● Document the visual language
● Accurate overview of the UI;
● Ensure consistency
● Develops the “product first” rather than “layout in”
● Enforce reuse of standard patterns
● Component culture
● Promote productivity

23. What is it for?
● Ease maintenance;
● Development playground;

24. MINDSET

25. Every style guide should stand for
● Communication;
● Reuse;
● Maintainability;
● Productivity;

26. Not a dumb documentation...
A living document!
Working software over
comprehensive documentation
http://agilemanifesto.org/

27. EASIER SAID
THEN DONE...

28. OBSTACLES

29. Obstacles
● People don’t see value on the effort;
○ Teammates (the lazy and the ignorant ones);
○ Managers and clients;
● Ignorance about the style guide target;
● Tecnical ignorance;

30. OK, GIMME THE TOOLS

31. Style guide tools
● People Tools;
● Prototyping tools;
● Coding tools;
● Distribution tools;

32. PEOPLE TOOLS

33. People Tools
● Embrace the mindset;
Educate yourself;
Practice… A LOT!
● Review your team habits;
Educate your team;
● Develop processes around the mindset;
● Know your audience, focus on them;

35. People Tools
Learn and practice agile practices:
● Continuous Delivery;
● Test driven development;
○ Unit tests;
○ Integration tests;
● Collective Ownership;
● Refactoring;

36. PROTOTYPING TOOLS

37. Prototyping Tools

38. CODING TOOLS

39. Coding Tools
● CSS Pre Processors;

40. Coding Tools
● Static Site Generators;

41. Coding Tools
● Templating languages
Liquid (ruby)
Liquid for designers
Handlebars (javascript)

42. DISTRIBUTION TOOLS

43. Distribution Tools

44. Distribution Tools
● Version Management

45. Distribution Tools
● Build tools
Rake
Make

46. Distribution Tools
● Package Managers

47. WRAPPING UP

48. Wrapping up
● Start by the style guide.
Refactor and evolve… forever;
Be open to changes;
● Know your audience;
● Product First;
● Componentize it, reuse it.
● Use distribution tools to integrate the style guide to
production code;
● You will need people skills anyway, embrace it;

49. http://twitter.com/filipiz
http://github.com/filipiz
filipi@nextt.com.br
http://www.nextt.com.br
OBRIGADO!