style guide tools - may 2015
TRANSCRIPT
A style guide tells the story of your
design solution...
What is a style guide?
http://designmodo.com/style-guides/
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
Anatomy of a style guide● Strategic brand overview
● Logos
● Spacing
● Typography
● Color Palette
● Iconography
● Copy rules
● Imagery
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/
References
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
Not a dumb documentation...A living document!
Working software over
comprehensive documentation
http://agilemanifesto.org/
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;
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;
People Tools
Learn and practice agile practices:● Continuous Delivery;
● Test driven development;
○ Unit tests;
○ Integration tests;
● Collective Ownership;
● Refactoring;
Coding Tools
● CSS Pre Processors;
Coding Tools
● Templating languages
Liquid (ruby)Liquid for designers
Handlebars (javascript)
Distribution Tools
● Version Management
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;
http://twitter.com/filipiz
http://github.com/filipiz
http://www.nextt.com.br
OBRIGADO!