Why Your Brand Needs a Style Guide
Like the key on a map, a style guide outlines the rules and logic of a design in isolation. These guidelines are crafted to be easily digestible, while full designs show them in context. Other terms (mostly coined by software companies) include “design system” or “style library.” But what exactly is a style guide, and how do they enhance brand presentation?
Let’s explore style guides, including their general makeup and benefits for web and app usage. We’ll even walk through how we make best-in-class versions here at BrainDo. And once you know how to craft your own brand, you’ll never want to risk going without one again.
You may already be familiar with the concept of brand guidelines. They’re pretty common within business and marketing. Your organization may already have brand preferences for everything from logo style to font selection—even email signatures.
Different mediums have their own standards and capabilities. As such, brand guidelines can differ depending on the context, and companies may develop multiple style guides to accommodate their needs.
For example, Print uses CMYK colors, and Web uses RGB colors or hex codes; they would look very similar (if not the same) to the naked eye and still adhere to brand guidelines. But the individual Web and Print style guides would only provide the codes relevant to their use cases.
For many types of internal documentation, maintaining one document is often the most efficient approach. Everything is consolidated in one place, and there are no version control issues to track and remedy.
Style guides, however, are an exception—and for very good reason.
Style guides are important reference resources when working on specific projects or brand executions. While you may need a type of branding information specific to your position, the details you’re looking for may be of little use to a team member working in a different discipline.
Separate guides can be created to help solve this challenge.
Along with maintaining a cohesive brand look, style guides are important for team communication and synergy. This holds true throughout the ideation, design, and execution process of a project.
One Design document may have pages upon pages of artboards, including hundreds of elements. The Design style guide catalogs important, reiterated elements all in one place. This way, all parties working on the project can find each needed element quickly and easily understand the rules surrounding them. No need to go digging aimlessly through the whole file!
For a website or app, there are also many variations of a single component. To use a theoretically simple call-to-action button as an example, hierarchy on a web page calls for primary, secondary, tertiary, and text link versions of the same button. States also include default, focused, hover, pressed, and disabled. That’s a grand total of 20 different button variations!
All those variations are very helpful to a developer, but not as useful to a print designer looking for something specific.
Comprehensive style guides can be overwhelmingly robust. Keeping separate documents can save time and just be more practical for day-to-day use.
Example excerpt from Frontify example brand guidelines to compare against a web style guide of inputs or (as we call them) form fields, in various versions and states in a design system template by José Flores
As a digital marketing practice, we’re most familiar with Website and App style guides. We’ve even built them out retroactively from existing designs to support our development team.
We often get web design projects that have no web-specific style guide attached to them — just general brand guidelines. If we’re starting from scratch, that’s easy to remedy. If we’re building new pages with existing styles, however, this often leaves us scouring the site, cataloging different elements and styles that can be used.
Sure, a Chrome plugin is great for pulling colors or fonts. But the interactive or design elements like buttons, content layouts, and form fields are not as easy to export.
Since they are so vital and underrepresented, let’s get more in-depth on what is in a Web/App-specific style guide.
Web or Mobile App style guides often include categories such as color palette, font styles, icons, images, and components. The components section which is typically Web or App-specific also outlines how those elements will change when interacted with by the user, such as a hover, click, or touch.
Different agencies and designers may structure or group their guides differently — or use different titles. But all the information listed below should be represented.
Example of fonts from one of our style guides
When we start a Web or App style guide from scratch, we typically use the current branding as a launching point, pulling colors and imagery from existing assets. If a brand guidelines document already exists, we’ll start with that.
We will evaluate what works best to pull into the new website styles, considering best practices and the client’s goals. We ensure that everything is up to date with best practices and translates well to the digital platform on which it will live.
If the brand guidelines were made without Web optimization in mind, there may be some adjustments to basic elements you may not expect. We’ll find a similar browser-friendly font if needed.
Colors may be adjusted to be compliant with ADA (Americans with Disabilities Act) regulations. A certain amount of contrast is required to have colors layered over each other and legible. These initial building blocks are laid out and set up as styles. This approach allows them to be linked to and updated universally as we begin to build out the designs.
Screenshot contrast checking two colors for compliance on WebAim
So let’s say we’re designing a new client website. Keeping the client’s goals in mind, we usually create two unique design concepts using the homepage as the example.
As we work through the designs, elements such as buttons are added to the style guide right as they are created. This ensures that all subsequent occurrences are linked to the initial component.
Once a concept is chosen by the client and feedback is implemented and approved, our guide gets more detailed. Components from the approved concept are built out further within the style guide to include various states and iterations — all of which are needed to support the rest of the page designs across the site.
As the new look is versioned out for all pages and new features or challenges present themselves, the style guide is updated accordingly with all relevant assets. Once the i’s are dotted and the t’s are crossed, the style guide is complete … for now!
The style guide keeps a record of information that is essential to your website or app design. Designers use it as a manual to edit or add to designs, and developers use it as a foundation for building out a user interface and bringing a site to life.
So hold on to it, because it will definitely come in handy down the line as you grow and come across new design needs!
If you’re adding to your site in the future or developing a new asset or product, designers and developers alike can quickly interpret the design standards to create a seamless customer experience. Having a document that clearly defines this information reduces back and forth questions and reestablishing elements, creating more efficiency in the workflow.
Depending on the capabilities of the tool you are using to document your style guide, linking styles and elements will save a lot of time through the design process and beyond. A linked style (like a color, drop shadow, font, or component) and reused elements (like buttons or form fields) will be universally updated after being changed in one central location.
This blog article from Figma explains their version of this feature in more depth. It’s an amazing time saver, especially through various rounds of feedback and revisions. The client asked that the green be brighter? Update the saved color style, and every single instance where that color is linked will be changed throughout all documents using it. It’s basically magic.
A style guide may seem like a large up-front investment for a supporting document, but in the context of an overall project, it truly saves so much time in the long run.
Inevitably something will change, whether it’s an update a couple years later or late-stage feedback. As long as the style guide is properly set up from the beginning and the links are ready, there’s no time spent wading through pages of designs for the “old green.”
If the style guide is made after the designs, every instance of a style will have to be individually, manually linked. That is why it is imperative to create a style guide right off the bat.
In addition to efficiency, style guides also make collaboration easier!
Whether working between teams, departments, or multiple agencies, the style guide is a point of reference everyone can use. An exported guide provides foundational information that can be read independent of software settings.
Adobe vs. Figma. Mac vs. PC. It makes no difference. They can all follow along and collaborate with the same guide.
While collaboration is great, if the project is being handed off between multiple designers or agencies, discrepancies are more likely to happen without an official guide to reference For instance, a component might be used inconsistently or colors slightly shifted.
A classic anecdote that illustrates this is sending a final design to developers and finding out there were 12 shades of extremely similar, but different grays used.
Even Google, who many consider an industry leader in design practices, had to do a major overhaul after 15+ years of Google Maps. David Cronin, UX Director of Google Maps, vouched for the importance of documentation and the challenges of not having it.
“One of the challenges with legacy systems is that parts of it may be undocumented. In this case, we needed to look for color patterns in the code itself.,” Cronin recounted. “The team started by attempting to fully understand the range of colors that had been implemented over the years. When I saw the inventory, I remember my jaw dropping because there were so many colors.”
They had over 700 colors they were using! After the simplification of the color palette, they were down to 25 major and minor tones.
There are more abstract risks to not having a style guide. Without clear rules and guidelines, there’s more room for interpretation. This can lead to inconsistencies in how the brand is represented.
Having clear and consistent brand representation is key for consumer memorability and trust. Using Google as an example again, their products are very recognizable with their colors and icon/design style. Seeing those visual indicators allows users to feel comforted, subliminally recognizing that they are indeed in the space where their brand trust and loyalty lies.
A lack of defined style leads to inconsistent branding. Inconsistent branding leads to lack of brand recognition. Poor brand recognition leads to low brand trust and, ultimately, a lack of business. So a little documentation can go a long way towards safeguarding your bottom line!
Style guides are important. You might even say they’re the unsung heroes of the design process — like the editor of a book or the accountant for a marketing team.
The creative itself may be flashier, but the style guide provides the backbone of standardization and efficiency. And when you’re working with an hourly project, time is money.
Keep your projects efficient and your brand consistent with a style guide!
If you would like more information about redesigns, style guides, or support in crafting one of your own, drop us a line and say hi!