Creating a Graphic Design Style Guide

Nonprofit marketing can be an overwhelming job, but it’s one that you can make much easier by using a handful of simple tools, including a Graphic Design Style Guide.

A graphic design style guide puts in writing all the various decisions you’ve made about how things should look both in print and online. While many of the same decisions will be reflected in a Cascading Style Sheet (CSS), they are not the same document. A CSS is written in code for your website, producing a consistent look across your web pages; a graphic design style guide is written for humans to read, especially those who aren’t familiar with code or even technical design terms!

Here are the kinds of decisions that should be on your graphic design style guide . . .

Fonts, Sizes and Styles

What fonts will you use for headlines, subheads, body copy, and captions? What point sizes will they be, and when is it appropriate to use bold, italics, and underline?

You may decide to use a different set of fonts, sizes, and styles online and in print, so note where staff should use which sets of guidelines.

You may also choose some “display” fonts that are only used for big signs, graphic headers, or event invitations, for example.

Also include notes on the spacing, such as how big margins should be and how much space should go between the bottom of the headline and the top of the body copy.

Need help deciding which fonts to use?

Here are a few resources I like:

Top 100 Best Fonts of All Time

16 Gorgeous Web Safe Fonts

17 Designers Favorite Fonts

Color Palette

You should also select a limited number of colors (think 3-6, not including black and white) for your palette. That doesn’t mean you will never use any other colors, but you should start with this set and only stray from it when additional colors are really called for.

Each color you pick will have a few different codes or modes, depending on which process you are using.

For online use, you’ll want at least the RGB and the HEX codes for the colors. For example, the purple I use at Nonprofit Marketing Guide is 196-175-232 in RGB mode (which stands for Red-Green-Blue). But it’s #C4AFE8 in HEX or Hexidecimal or HTML color codes.

For print use, you’ll probably want the CMYK values (for four-color process printing) and the closest Pantone color value.

Need help picking a color palette?

I like these two tools:

ColorBlender asks you to pick one color and then gives you suggestions for complementary colors, which you can adjust until you are happy.

The DeGraeve Color Palette Generator creates a palette based on a photograph. Just input the URL of the image, and it will give you 10 colors.

Images

On your design style sheet, also make notes about how you want images to appear. Are they usually right or left-justified? How much of a margin should surround a photo or graphic? Where do the caption and the credit lines appear and how do those look?

Logo and Name Usage

Describe how and when your nonprofit’s logo and name can be used. For example, should it always appear in a certain corner of the page? What colors can it be printed in? Can it be printed in reverse (such as in white on a black background)? Can background colors show through the “white space” in the logo, or not? What uses are unacceptable?

Layouts

If your organization has preferred layouts for items like letterhead, envelopes, business cards, basic website pages, press releases, flyers, PowerPoint presentations etc., include templates with instructional notes in your design style guide.

What else would you include?

  • Sarah Durham

    So glad you’ve covered this, Kivi! I’m a big advocate for style guides, too. In addition to the items you mentioned, a style guide can also serve as a way to ‘institutionalize’ your organization’s messaging, too. You might, for instance, cover how to correctly abbreviate your org’s name in it, what the final, approved mission statement is, your key messages, even how and when to use your tagline or elevator pitch. For my money, a good guide is, hands down, the best way to create long-term institutional memory in any organization.

  • http://twitter.com/kylacromer Kyla Cromer

    Great info and links. I think the biggest point here is just start writing it down!

    A Style Guide is important for any instructions on your site, and good for internal documents, too. Include terms – do you “click” on a menu option, or “select” it, or “choose” it? When you save something does a “window” appear, or a “box” or a “pop up”?

    For italics, here’s a phone training snippet from a client: “Good morning, this is (name)…” I’ll use that in the sections I’m writing. Another example: I have a client who uses some Hebrew on his blog – we italicize it and then put the English translation in parentheses next to it.

    Make sure if you choose unusual fonts they’ll be easy for someone other than you to find and use. And don’t forget usability – you may think blue underlined links are “So last century!” but they’re important for less experienced users and people with various vision impairments – even colorblindness. Here’s a recent Talance post on accessibility http://goo.gl/Ppy84

    Thanks, Kivi!

  • http://www.nonprofitmarketingguide.com/blog Kivi Leroux Miller

    Great points Sarah and Kyla! Those are some of the things I would put on an editorial style guide, as opposed to the design guide I’m talking about here. Of course, in practice, it makes sense to put all of those things together into one guide. I’ll be blogging about the editorial style guide next week and will add your examples to it! Thanks!

  • http://twitter.com/artifexnet Audrey Nezer

    I have found that it needs to be brief. Anything too long tends to be constraining and difficult for fast-moving organizations to follow.

    I have started to make style guides more interactive. On a page where you have instructional notes about logo use, you can link to the actual files. Where there are guidelines on internal documents, the user can link to a Word template with styles in place. Where there are presentation guidelines, a user can link to a PowerPoint template with a few backgrounds and layouts in place. Same with graphics and headers for e-newsletters. That way users can quickly access what they need rather than trying to create a document or presentation from scratch following guidelines that make perfect sense to a designer, but may be a little confusing to an intern or other staff member.

    I have also started including guidelines for social networking. For example, on the logo page there is a graphic that represents the org on Twitter. It is the right size and easily accessible to fundraisers, event organizers and staff. That way they can set up an user profile on their own computer or phone that represents the organization.

    Thanks for writing!

  • Pingback: Creating an Editorial Style Guide

  • Pingback: Graphic Design Style Guides, Part II – With Examples

  • Pingback: Graphic Design Style Guides, Part II – With Examples «

  • Pingback: Marketing styleguide | Pnbreak

  • Pingback: Custom Wedding Album Design » Wedding Album Design, Post Production

  • Pingback: Brant Aschenbrener