Designing a Great Branding

We’ve already gone through how to make a branding. Now we’ll show you how to design one that looks professional and polished.

Color

First, you’ll want to make sure that your branding looks like an extension of your website. The background color is key to maintaining that consistency. Since you may not know the exact hex color code for your organization , there’s a color picker that pops up when you click on the “Background Color” field. Choose your color and it will fill in the appropriate color code for you.

Color Picker

If you want to match the shade exactly, follow these steps:

Mac: Go to your applications folder and click on Utilities. Open the application called DigitalColor Meter. You’ll have a few options in the box for how to display the color. You should choose Adobe RGB. Hover your mouse over the color you’d like to identify and write down the R, G, and B values.

Next, go to this site: http://htmlcolorcodes.com/color-picker/ and type the values in on the right side of the color picker. You’ll get the hexcode for your color, which you can type in on the brandings page. Now you’ve got that perfect shade of blue!

Color Picker

PC: There are lots of tools out there for you to use, but we recommend the Google Chrome ColorPicker Eyedropper, which you can use with a Google Chrome browser. It’s easy and safe to use.

You can find the extension here. Click the + Free button to install the software. Then click on the ColorPicker icon to the right of your website bar. Click once on your page to activate the picker and then click on the color you’re trying to match on your webpage. The hex code will pop up, which you can copy and use for your branding.

Image

Make sure you keep your logo short so that it doesn’t push your contribution form down on the screen. This is critical to the conversion rate and something we’ve tested here. You don’t want your supporters to have to do any extra work in order to donate.

You want to choose a high quality version of your logo (or as high quality as you have available). Try to stay away from using only big pictures related to your organization or candidate, as well as distracting images. Your logo is the unifying image in your campaign or organization, so it will make donors feel more at home when you use it here.

CSS

If you’ve got a tech person on staff who knows how to do CSS, you can get in touch with us, as we’d love to talk through any design ideas with you. However, you don’t need any custom CSS to make your branding look great, so if you don’t have experience with CSS, it’s much better not to edit this section at all.

Examples

We’ve created some amazing brandings here at ActBlue, and also seen campaigns and organizations create their own beautiful designs. Here are some of our favorites, which can serve as inspiration.