The objective of a hybrid design and living style guide
For Vroom.com, I presented the differences between a design style guide and a living style guide. I also showcased a prototype.
Because the concept is confusing, best practices and references were researched and presented.
Definition
A style guide or manual of style is a set of standards for the writing, formatting and design of documents. (Wikipedia)
A design style guide addresses logo usage, fonts, colors, and sometimes page layouts. (Marketing Partners)
Living style guides aid in building well-organized documentation of front-end codebases.
Smashing Magazine
Goals
Designers, developers, project managers, and stakeholders can access and reference the HTML/CSS style guide. This guide can show real-time interaction. Finally, it should not hinder the business needs.
Prototype
The prototype includes tips for: semantic writing, SEO, accessibility, and other site structures. Because this is a hybrid style guide, the first portion includes traditional design elements. The second portion includes website elements.
Since the icons were not delivered with rules, a series of construction rules were created. I designed additional icons and created a CSS sprite file and font library.
As a result of this style guide, new designers and developers can design and develop with consistency.
