Web Style Guides and Brand Reach - Foundational Elements

by: dianalien

Web Style Guides and Brand Reach - Foundational Elements

In an earlier post—Branding Translation, the Meaning Behind Visual Language—we discussed the importance of brand consistency and having/creating a thorough brand guideline.

In this post, we will go over Web Style Guides—guidelines to creating web elements, and displaying web assets to fit within a brand style. A style guide, like it sounds, can help guide users and brand advocates on how to design collateral that fits into the brand, and represent it in the most authentic way.

The style guide is a resource for designers, product managers, and developers, providing a common language around UI patterns, and on-page graphical and type treatments.

Foundation

Style guides should have clearly defined foundational elements:

  • Typography - Font family, Header Levels (H1, H2, H3), body text
  • Grid structure - Vertical column grids, widths defined as a percentage (for adaptive interfaces), including gutters and spacing patterns
  • Color palette - Web standards use Hex colors to identify swatches

The Details

TYPOGRAPHY

Typography helps create an experience for users, and the treatment of type can establish the voice and personality of the website. The different font families used on the site should be defined, as well as the way type is laid out on a page. Type should be pleasing to the eye and presented in a predictable rhythm. Titles, subtitles, and body content are defined with CSS.

Type can also be used as a graphical element that is incorporated into the design of a site, through the combination of color and type.

GRID STRUCTURE

Pre-fab layouts establish the main structure of a page. With pre-determined column layouts, there is flexibility while maintaining uniformity.

COLOR PALETTE

The details of color usage can be as specific as background and border colors, to the color of highlighted content and links. Content types (blog posts, news links, CTAs) can have their own defined color schemes as well. Occasionally, there is a need to distinguish some copy from the normal body text. These elements can include bullet points, legal copy, time stamps, and labels. It is helpful to have the appearance of these elements defined for proper implementation.

Other web elements that should have defined styles:

  • Links - show how different types of links should be displayed—inline, below a body of content, in the form of a button. Special link types: read more link, more link, bar link, action link, photo action link.
  • Buttons - default and primary states defined by the UI - color, type, style
  • Forms - text input and text areas, check boxes, radios, selects
  • Lists - round or square bullets, numeric, alpha
  • Tables - View and type treatment / title and colors
  • Popups - View and type treatment / title and colors
  • ​Navigation - Title and vertical / horizontal links

These basic foundational elements are to help you get started in creating the style guide of your site. There are many other elements that can be defined, and the more thorough the guide, the better representation your brand receives.

Outlier

Video, Web, and Design Agency