Embed Size (px)
DESCRIPTION
How to Make a Style Guide Last. Kimberly Blessing @ obiwankimberly. Design style guides document information architecture practices, aspects of the user interface , such as grids and layouts, graphic design elements, such as color and typography, and branding. - PowerPoint PPT Presentation
Citation preview
How to Make a Style Guide Last
Kimberly Blessing
@obiwankimberly
Design style guides document information architecture practices, aspects of the user interface, such as grids and layouts, graphic design elements, such as color and typography, and branding.
Modern “front-end” style guides pair design specifications with code in order to give a complete picture of how the visual design language is implemented.
ROI of Front-End Style Guides
Efficiency Reduces development and QA time, improving time to market for new features
Collaboration Builds cross-functional teamwork and knowledge, eliminates miscommunication
Consistency Creates a consistent user experience, reduces need to reinvent the wheel
Clarity Makes it easy to identify gaps or inconsistencies
Pride Is the mark of a team focused on quality, which commits people to maintaining quality standards
Typical Complaints
Irrelevance The style guide is out of date or isn’t followed consistently.
Lack of Detail The style guide isn’t thorough enough – or it’s too specific to be applied broadly.
No Autonomy The style guide prevents individuals from being creative problem-solvers.
Poor Communication
Lack of information about the style guide is causing confusion.
Lack of Consensus
[Group X] disagrees with and isn’t following the style guide.
The Circle of Standards
Creation andDocumentati
on
Training andCommunicati
on
Review and ApprovalProcess
Creation and Documentation
• Start with the fundamentals• Investigate the live site and work in
progress• Think ahead to future needs• Review regularly• Monitor projects for efforts
that require standardizationCreation and
Documentation
Training andCommunicati
on
Review and ApprovalProcess
Training and Communication
• Make training mandatory for everyone• Offer training regularly• Communicate on a regular basis• Make information available
in a convenient formatCreation and
Documentation
Training andCommunicati
on
Review and ApprovalProcess
Project Review and Approval Process
• Make adherence to the style guide part of the project requirements and acceptance or launch criteria• Formal design and technical/code
reviews look for standards-related issues• New work gets fed back
into the Creation phase
Creation andDocumentatio
n
Training andCommunicati
on
Review and ApprovalProcess
The Standards Manager
• Champion for the style guide and standards• May run a team dedicated to maintaining
the style guide• Must understand the related
disciplines and work to be effective
Style Guide References
• A List Apart article by Anna Debenhamhttp://alistapart.com/blog/post/getting-started-with-pattern-libraries
• Collection of public style guideshttps://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
Good Luck Making Your Style Guide Last!
Kimberly Blessing
@obiwankimberly
