Your brand guidelines should form the foundation of all the design work you do, from digital advertising to printed assets and beyond. But your website, which forms the hub of your digital marketing activities, deserves extra attention. Consider putting together a set of website design guidelines to complement your brand guidelines. This allows you to scale your website without introducing brand-fragmenting inconsistencies along the way.

Your website design guidelines should include information about how to treat:

  • Buttons and icons. How should each of these commonly used elements be styled, and what interactions should they trigger?
  • Menus. What should they look like, where should they be located, and how should they respond as users interact with them? Don’t forget to include any rules related to how you organize your information architecture.
  • Forms. Include details about how forms should be styled, including how form fields are labeled and what happens when users submit forms.
  • Interactions and hover states. As users interact with your website, how do you want it to behave? Document each interaction type and hover state in your website design guidelines. For example, your staff bios may appear in black and white but shift to full color on hover.
  • Motion elements. Including motion on your website—and on your homepage, in particular—is a great way to express your brand. Your website guidelines should offer instruction about video quality, content and how motion is to be used on your website.
  • Typography. The fonts you use on your website should reflect your brand even if they include some unique choices you don’t use elsewhere. Document which typefaces to use when to avoid confusion.
  • Images. What kinds of imagery are acceptable on your website, and how will you present them? If you want all the images on your site to get a certain treatment, such as halftone, make sure you document it in your website design guidelines.
  • Accessibility. Your website must be accessible in order to be legally compliant and provide the same excellent experience to all your visitors, regardless of ability. Make sure to include inclusive design best practices—such as color contrast, descriptive labels and font sizes—in your website design guidelines.

Related Posts