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
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?
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?
