The Importance of Using a Style Guide
Most big companies have style guides to help designers and developers make products that align with their brand. One of the best I’ve come across is Spotify’s guide. It clearly goes over the “do’s and don’ts” for integrating their product into your own app or website. There’s a section for logos, icons, colors, widgets, and restrictions. Each section includes images, downloads, and examples on what Spotify will allow you to use.
The reason these style guides are so important is because brands what to be represented correctly. If you don’t respect the guide, you can get into trouble. They exist to protect you just as much as they protect the product you’re using.
Style guides are also great resource for personal projects that don’t require integrating other brands or products. When designing for a new brand, or just a personal side project, creating a style guide beforehand will save you lots of time when it comes to putting your ideas and sketches into prototypes and final products. If you’re a designer, creating a style guide helps you know what kind of icons, buttons, and colors will go onto a page. If you’re a developer, the style guide can assist you in knowing exactly how each icon and symbol should look.
Here’s an example of a style guide I created in a website redesign of a nonprofit organization. I laid out how I wanted my forms and buttons to look, as well as the mobile menu and desktop navigation bar.
Colors are so versatile in design, they can group like items together, draw attention to something specific, or enhance a theme or an idea. Color, when used correctly, also provides uniformity. That’s why it’s important to decide what colors to use before you start designing or developing. If you add random colors, you will lose that cohesive look, which worsens the overall user experience.
Icons and colors aren’t the only important parts of a style guide. If your project contains a lot of text, your style guide should most definitely address how the text should look. Having well-defined use cases for text makes creating a product that much easier because you can utilize this knowledge to maximize the space you have available in your design.
Not all style guides are created equal. Some contain a lot of detail about icon usage, while others are very specific about widgets or colors. It really depends on the product and what the overall vision for it is. Companies like Spotify don’t have a lot of information on text in their style guides because the product doesn’t contain huge amounts of writing, and most designers using their product didn’t choose to use it for their text. If you’re creating a style guide, use your best judgment on which items are most necessary to include.
In my design project, I followed my style guide to create high fidelity layouts. Taking the time to put a guide together helped me a lot when I created my designs.
Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to the non-profit website redesign project in the DGM 1230 Course and representative of the skills learned.
