It’s Not Always Black and White

The importance of details and your web style guide

If you are planning your website redesign or have just launched your new website, you may find yourself in need of a web style guide. You likely have multiple vendors supporting your site and want to ensure that visually, everybody follows the same standards. Or, you may want to be able to provide guidelines to your internal team to ensure that the design and user experience stays as on-brand as the day you launched. Investing in a web style guide is smart for any company or organization who wants to maintain uniformity across their brand presence in the digital space. Defining the styles and elements in your website upfront takes the grey area out of your brand and creates a consistent user experience across all marketing and communications tactics. After all, your brand is the public face of your institution and your website is its digital branch. 

So, what is a web style guide?

This sharable document is a collection of patterns and rules for using your brand online. Unlike a brand style guide, a web style guide solely focuses on how your brand is translated to and works within the digital space, with a spotlight on brand use and design in your website. The goal is to create a single resource to allow anyone to understand and replicate the styling and brand details for a cohesive brand experience.
 
Your web style guide may include:

• Branding principles such as your mission or guiding purpose as an institution.

• Logo guidelines and examples of how it should be used. If you have a tagline, you may want to define the rules for how and when to include it with your logo.

• Typography such as the correct font family, weight, size, line spacing and color to define the visual hierarchy across various content types. The fonts used on your website may differ than your main brand fonts to provide web-safe alternatives.

• Color palette including the web or HTML mix of your main and accent colors. The web style guide may also recommend color combinations and use cases for ADA Website Compliance, which could vary from overall brand direction.
  

• Links and button styles used on the website, detailing primary and secondary styling as well as rollover states.

• Photography and iconography direction including how to choose photos for the website, considerations for digital (such as various screen sizes and ADA Website Conformance), and how to create new icons following an established style.

• Other brand elements inherent to the visual look of your brand. This could include pattern, texture, graphic elements, and more that make up the recognizable features of your brand.

• How to construct images and promotions using the defined brand elements, including image dimensions and defined content areas. 
  

• Flexible page layouts used on your website, the purpose of each, and the editable elements.

Why do I need a web style guide?

There are many reasons why a company, institution or organization should invest in a web style guide as part of a website redesign project or shortly after. Among these, a web style guide can help:

• Avoid incorrect or inconsistent uses of the elements that make up your brand, which could create mixed marketing messages and confuse audiences.

• Establish a shared vocabulary across teams to create something that both designers and non-designers alike can use and leverage.

• Efficiently onboard new team members.

• Educate third party resources and new vendors about your standards, while maintaining a consistent visual brand.

• Document the elements of your brand (such as fonts or color palette) that may change slightly to be optimized for web use.

• Create a single set of standards and rules to define your digital brand. This strengthens your brand recognition and continues the authentic and trustworthy relationship you have built.

• Invest in the effort to define the elements that go into your website once, and prevent time wasted discussing the details over and over again in the future.

• Allow for the element of change. The details of your website, and even your brand, may change over time. Having a single reference of web guidelines will reduce the effort to maintain and document the changes.

The small details of your brand add up to a lot and maintaining a strong web presence should be a priority. A properly documented web style guide will help ensure the continued success of your online experience. Want to discuss adding a web style guide to your project? Contact us to speak with a digital expert.
 

• Branding
• Website