One of the most interesting things about working here at eROI is the variety of clients in which we deal with on a regular basis. On any given day we work with large national brands, and then turn around and help a start up company grow from the ground up. In both cases, it has become essential to have a comprehensive style guide for several reasons:
For the larger brands, it is a simple way for a client to communicate the essential elements and rules as they apply to their brand in a concise document. A large brand may have multiple agencies working on projects at any given time, and this ensures consistency across the board. This is especially important when working on projects with tight timelines; there is little time for brand misinterpretation. A good style guide will cover all of the major elements, which allows for a Creative Brief to be more focused on the project at hand.
For smaller companies, a style guide is equally important as it becomes the blueprint from which the brand evolves. A small company may not have the resources to employ a marketing/brand manager, and so a style guide needs to work that much harder.
While many companies are already familiar with brand guidelines that include things like logo usage and brand statements, I want to focus instead on what specific elements should be considered for the digital space and the screen.
1) Typography & Color
It’s important to have specifications around typography for both print and the web. For instance, a brand font might be Aksidenz Grotesque but the web font may be Helvetica or Arial. It’s also important to define font sizes as they relate to screen. There’s no such thing as points or picas on a screen, so all typography should be defined in pixels. Color should be handled similarly. Brand guidelines go to great lengths to define color in terms of Pantone, CMYK, and RGB, but they often leave out the hexadecimal values for color that a developer needs.
2) Grid Layouts & Forms
In some cases a website design might be done by one company and developed by another. In these instances, it’s important to define some basic rules around global elements. For example, a design might be based on a 12-column, grid structure on a 960 pixel wide design with a 300 pixel sidebar. Having these dimensions clearly defined allows for a developer to easily create new pages without having to make design decisions that they may or may not be comfortable making. The same goes with elements such as forms; a designer can define what a basic form layout should look like and then a developer can apply those rules across the board.
3) Spacing & Alignment
Again, define all spacing in pixels. It’s important to specify column width, gutter width, and line-height as they apple to the CSS. A style guide may even go so far as to define the text alignment (e.g. left aligned, centered, fully justified etc.). One of the biggest issues I see during our eROI Q/A sessions is sloppy spacing. It saves an enormous amount of time to have this spelled out ahead of time.
4) Button Usage
Buttons are an important way-finding element for any website, but especially for larger sites that have many content levels. For example, there may be a primary button style and a secondary button style followed by a text link call to action in order of importance. Many designs now have buttons that utilize web-text and are styled using CSS. This may not look as custom in every case but it allows the developer or client to easily update it, and eliminates the step of having a designer fire up Photoshop just to change the copy on a button.
5) Tone of Voice
While many style guides cover high-level tone of voice for copy writing, they frequently overlook the nuances of writing for the web. For example, the way in which a brand talks to its users on a website is just another extension of its customer service and should be valued equally. This plays in important role when a user is in a scenario like a checkout process, or inputting personal information. Buttons, instructions, confirmations, and error handling should all have a consistent tone of voice.
Every company’s needs are different, but its become increasingly important to address some basic definition around how brand exist in the online space. Consider a style guide a living, breathing document that may need to be updated periodically as the different ways a brand interacts with its customers expands to new technologies.
Here are a few examples to explore:
We the Media’s style guide for the Nike We portal
2 Comments
Great post Sam – all really great points. It’s amazing how long you can go without developing this sort of thing, but it really makes life so much easier once you do. The rabbit hole can go pretty deep (it’s easy to end up with massive styleguides), but it’s so worth it; making those preemptory decisions while still in the context of the bigger picture is incredibly helpful.
Thanks for the tips here, especially on spacing and grids – so important but always so easy to overlook!
I like to consider them working documents that get updated throughout a project, versus having to formulate it after the fact. By acknowledging it as a deliverable, it forces a designer to make more deliberate and systematic decisions.