A style guide is important because it makes for a cohesive application and helps adhere to brand standards. Teams can grow and change along the way and when new people come onto the project they have a quick reference to go to for all design questions.
With one of my ongoing projects we are developing a large robust application. For this project we are building out a front-end style guide. There are a lot of moving parts to this project and the style guide will be a one-stop place for all interface design elements.
It will also help the developer’s workflow be more efficient. Rough wireframes can quickly transition into reality when design components from the style guide are applied. As well as their codebase can be smaller since design is consistent.
An added benefit from a style guide is that it reduces the amount of pages that need to be designed. The team can look at the established standards and then determine it needs further designs need to be developed.
Below is my checklist for creating a successful front-end style guides:
- Typography – Start by specifying header tags, font sizes and colors. Next show the specifications for the default body content and content blocks. Indicate the link states include the static, hover, active, and visited states.
- Color Palette – Display the colors swatches with assigned hex numbers. Sometimes a name or description for each color can be helpful in identifying colors and their use.
- Grid System – To achieve a clean aesthetic, demonstrate a grid layout. Use blocks to show how the content should layout in the grid and flow through responsive-designs.
- Navigation Menus – Display how the main navigation and their drop-down menus will appear. Don’t forget about breadcrumbs and pagination components.
- Buttons & Tabs – Showcase each component with the default state plus the hover, press, and disabled states.
- Form Elements – Include text inputs, drop-downs, checkboxes, radio buttons, toggle switches, and other form elements. Indicate the default styling as well as styles for disabled, view-only and form validation.
- Iconography – Assemble all icons with descriptions for their use.
- Tables & Lists – Be sure to provide designs for tables and lists. Since unformatted bulleted lists and tables will stand out from the consistency of the design.
- Charts & Graphs – Display and example of pie and bar charts with labels. Provide colors that can be expanded upon the color palette and fit within the brand standards.
- Notifications – Display instances of alerts, pop-outs, callouts, tooltips, and modal windows.
- Printouts & Plain Text Views – Plain text and print outs are often overlooked. It’s good practice to provide mockups for these views.
- Miscellaneous – Remember to add any additional elements that are unique to your design.
Collect all the interface elements into a well documented library. Be as precise as possible with your documentation so there are no unanswered questions. Clearly label each section and include a table of contents so others can quickly navigate the document. Then package this all up into a deliverable PDF or interactive web asset for the front-end developers. Now if questions come up or new co-workers join the project they can be directed to the style guide.
Although much of the work is done upfront, a style guide should be a living document. So your work will never be truly finished while the project continues. This allows for constant update to the look and feel of a company as the project progresses. Be sure to make your style guide flexible for future additions.
Having trouble getting started with your style guide? Google’s Material Design is a great place to get some ideas.