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.

Style guide tools - May 2015

752 views

Published on

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.

Published in: Technology
  • Be the first to comment

Style guide tools - May 2015

  1. 1. The Developer’s Conference 2015 14/05/2015 Style Guide Tools
  2. 2. Scenario #1 The missed child
  3. 3. Scenario #2 The Janitor
  4. 4. Filipi Zimermann filipiz filipiz
  5. 5. WHAT IS A STYLE GUIDE ?
  6. 6. A style guide tells the story of your design solution... What is a style guide? http://designmodo.com/style-guides/
  7. 7. 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
  8. 8. A framework. What is a style guide? ZIMERMANN, 2015 :)
  9. 9. WHAT DOES IT CONTAINS ?
  10. 10. Anatomy of a style guide ● Strategic brand overview ● Logos ● Spacing ● Typography ● Color Palette ● Iconography ● Copy rules ● Imagery
  11. 11. 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/
  12. 12. REFERENCES
  13. 13. References
  14. 14. References
  15. 15. References
  16. 16. References
  17. 17. References
  18. 18. References
  19. 19. WHY BUILD A STYLE GUIDE ?
  20. 20. 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
  21. 21. What is it for? ● Ease maintenance; ● Development playground;
  22. 22. MINDSET
  23. 23. Every style guide should stand for ● Communication; ● Reuse; ● Maintainability; ● Productivity;
  24. 24. Not a dumb documentation... A living document! Working software over comprehensive documentation http://agilemanifesto.org/
  25. 25. EASIER SAID THEN DONE...
  26. 26. OBSTACLES
  27. 27. 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;
  28. 28. OK, GIMME THE TOOLS
  29. 29. Style guide tools ● People Tools; ● Prototyping tools; ● Coding tools; ● Distribution tools;
  30. 30. PEOPLE TOOLS
  31. 31. 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;
  32. 32. People Tools Learn and practice agile practices: ● Continuous Delivery; ● Test driven development; ○ Unit tests; ○ Integration tests; ● Collective Ownership; ● Refactoring;
  33. 33. PROTOTYPING TOOLS
  34. 34. Prototyping Tools
  35. 35. CODING TOOLS
  36. 36. Coding Tools ● CSS Pre Processors;
  37. 37. Coding Tools ● Static Site Generators;
  38. 38. Coding Tools ● Templating languages Liquid (ruby) Liquid for designers Handlebars (javascript)
  39. 39. DISTRIBUTION TOOLS
  40. 40. Distribution Tools
  41. 41. Distribution Tools ● Version Management
  42. 42. Distribution Tools ● Build tools Rake Make
  43. 43. Distribution Tools ● Package Managers
  44. 44. WRAPPING UP
  45. 45. 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;
  46. 46. http://twitter.com/filipiz http://github.com/filipiz filipi@nextt.com.br http://www.nextt.com.br OBRIGADO!

×