Style guide tools - May 2015
49
The Developer’s Conference 2015 14/05/2015 Style Guide Tools
-
Upload
filipi-zimermann -
Category
Technology
-
view
234 -
download
0
Transcript of Style guide tools - May 2015
The Developer’s Conference 2015
14/05/2015
Style Guide Tools
Scenario #1
The missed child
Scenario #2
The Janitor
Filipi Zimermann filipiz filipiz
WHAT IS A STYLE GUIDE
?
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
A framework.
What is a style guide?
ZIMERMANN, 2015 :)
WHAT DOES IT CONTAINS
?
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
WHY BUILD A STYLE GUIDE
?
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
What is it for?● Ease maintenance;
● Development playground;
MINDSET
Every style guide should stand for● Communication;
● Reuse;
● Maintainability;
● Productivity;
Not a dumb documentation...A living document!
Working software over
comprehensive documentation
http://agilemanifesto.org/
EASIER SAIDTHEN DONE...
OBSTACLES
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;
OK, GIMME THE TOOLS
Style guide tools● People Tools;
● Prototyping tools;
● Coding tools;
● Distribution tools;
PEOPLE TOOLS
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;
PROTOTYPING TOOLS
CODING TOOLS
Coding Tools
● CSS Pre Processors;
Coding Tools
● Templating languages
Liquid (ruby)Liquid for designers
Handlebars (javascript)
DISTRIBUTION TOOLS
Distribution Tools
● Version Management
WRAPPING UP
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!
