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.
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
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/
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;
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;
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;
34.
35. People Tools
Learn and practice agile practices:
● Continuous Delivery;
● Test driven development;
○ Unit tests;
○ Integration tests;
● Collective Ownership;
● Refactoring;
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;