Want Your Social Impact Website to Look Good? Start Here.

It takes about 50 MILLISECONDS (that’s 0.05 seconds) for users to form an opinion about your website that determines whether they like your site or not, whether they’ll stay or leave.

- SWEOR

Ummmmm….ok, that’s FAST (and scary!) That means your website needs to pack a visual punch in a hurry. So, let me ask you, how does your website look?

Does your nonprofit or social enterprise website look like it’s worthy of the dollars you’re asking people for, or does it look like you’re still trying to get your act together?

As a copywriter, obviously, I believe that the words on your site matter a great deal—and they do. But the first thing people will notice is the design.

And once you’ve made it past the hurdle of having a well-designed website that people stick around for, there’s something else you should consider that I see overlooked all the time, especially on DIY websites.

If you want your website to look good, you need to think about the consistency of your visual identity, or visual brand:

  • It needs to be unmistakeable.

  • It needs to be cohesive.

  • And it needs to reflect your organization’s mission and personality.

A simple tool that will help you get there is a style guide, or brand guide. With it, your nonprofit, social enterprise, or social impact company can look like a million bucks (even if you aren’t). Without it, your organization can unknowingly communicate that you’re an amateur.

Let’s talk about how you can create your own style guide, even if you don’t have a designer on staff.

Want Your Social Impact Website to Look Good? Start Here.

Let me give you two caveats before we jump in:

  1. I think, whenever possible, you should work with a professional graphic designer or brand agency. I regularly get compliments on my logo, website, and branding, and that’s because I went to the pros. Even as a marketing consultant, I couldn’t have done this on my own. They set me up for success. And certain colors make people feel a certain way, so depending on your area of work, there may be colors they can advise you to run toward, or run away from. (It’s not always just based on what you personally like.)

  2. If you weren’t aware by now, I’m not a graphic designer. I can Canva the heck out of a project, and I’ve art directed many times over the years, but it’s not my main focus. However, I keep coming across this problem with clients and friends, and felt the need to address it here on the blog.

Why DoES YouR Nonprofit or Social Enterprise NEED A STYLE GUIDE or brand guide?

Let’s do a quick refresher on what a “brand” is, in case you’re unfamiliar with the term, but nod along in a crowd like you understand, or in case someone made the mistake of telling you that a brand was a logo.

First of all, a brand is not a logo!

My designer friends really want you to know that.

This misunderstanding is where many organizations go wrong from the beginning.

In simple terms, think about your organization like a person. A person is made up of lots of characteristics, like what they look like and how they make you feel. A brand is similar. It’s all the little details, physical, emotional, and more, that make them who they are. So, it’s way more than just a logo.

Now that we’re on the same page, let’s talk about the importance of a style guide, also sometimes known as a brand guide. (I’ll distinguish the two of them for you below.)

A style guide, or brand guide, can be your best friend when you’re designing something new. This might be a website, social media posts, printed materials, or anything else that has a visual component.

Having a style guide (or brand guide) is important because it helps ensure that everything you design looks consistent and cohesive. It makes you look professional, and maybe even like you’re a bigger organization than your actual head count.

“The more cohesive and consistent you branding, the easier it will be for your audience to recognize you. Constantly switching up fonts, colors, and photography styles seems exciting, but it can actually cause you and your brand to get lost in the crowd.”

- Madison Beaulieu of Mad + Dusty

WHAT DOES A STYLE, OR BRAND, GUIDE DO FOR YOUR SOCIAL IMPACT ORGANIZATION?

Let’s think beyond social impact organizations for a moment.

  • Do you have a favorite sports team? I bet you can tell me what their colors are immediately.

  • FedEx and UPS? You can probably tell me their colors, too.

  • The Disney font? Yep, you can see it in your mind.

  • The Apple and Windows logos? They might be in front of you as you read this post!

  • The shape underneath the word Amazon? You’ve seen that curved arrow a million times.

See what I mean? When you think about brands that you know and love, you can instantly recall their logo, colors, fonts, and more. Their visual identity is the same no matter where it shows up.

What if you went to the UPS website and saw neon green everywhere? It would stop you in your tracks, and you’d probably wonder if someone hacked their site.

This is why you need to think about creating a style guide for your nonprofit or social enterprise. You want people to have the same, thoughtful experience with your brand.

You should think about a website, social media posts, and collateral as all part of the same family. The design, look, and feel should be intentional and made to go together.

Brands with a consistent visual identity look more professional and trustworthy.

Don’t unintentionally send up red flags to your donors and customers with a brand that looks haphazard and amateur. You’ve worked too hard for that—even if you’re just starting your nonprofit.

Plus, it can be hard enough to keep your brand consistent when it’s just you, but add team members into the mix, and it can get out-of-hand quickly. This is especially true because, if you don’t have any guidelines, people may choose what they personally like best, whether you’d consider it in-line with your brand on not.

“Brand guidelines are so important. You need more than just a logo, you also need a guide to using your branding across both print and digital media. Stick with the same colors, fonts, and photography styles. I know it can feel boring to you after a while, but it’s not to your customers! You're in it every day, whereas your customers or donors may only interact with you once or twice a month, or even just a few times per year.”

- Madison Beaulieu of Mad + Dusty

TWO EXAMPLES OF WHAT CAN HAPPEN WHEN YOU DON’T HAVE A STYLE GUIDE

As I mentioned above, having an inconsistent visual identity often shows up in DIY websites. And why wouldn’t it? That probably means that the site is usually create by someone who is not a professional designer, so it makes perfect sense that they wouldn’t know better.

However, it can happen even when you hire someone to design your website. Let me give you two examples:

Client #1:

One of my clients is a nonprofit who has been around for over 15 years. They do incredible work overseas, but like many nonprofits, they bootstrapped, utilized volunteers, and called in favors when it came to their website design.

I started working with them on what I think was the third iteration of their website. I was asked to audit their marketing and communications before they launched their brand new website to their donors and stakeholders.

What I immediately noticed was that their brand lacked cohesion. A lot of the same colors were used in the design, thanks to a WordPress template, but the colors in the photos were all across the board. So, they didn’t have a look and feel that I could easily identify as theirs.

In fact, in 15 years and three websites, I was the first person to suggest that they use a cohesive color scheme or color palette! They really liked the idea, but had never heard it before.

Now, they have a color palette that they intentionally chose, and use it as a guide for anything new that they create. And it’s helped them look more polished, which is a better reflection for their years of experience.


Client #2:

Another client is a for-profit social impact company, who also works on a global scale. He’s been in business for about 10 years, and is currently in the process of launching his company’s second website.

The same graphic design agency who built his first website is completing the rebrand. Not long ago, he and I sat down to discuss the changes that should be made before the site goes live.

In clicking through the pages and links, he stopped on one page in particular, which had caught his eye for a very good reason!

He said, “I don’t like the photo at the top. It just doesn’t feel right.”

And he was correct. The stock photo on this page was completely off-brand. His colors are bright blue, red, and gray, for the most part. This photo was pastel. So, he couldn’t articulate why “one of these things was not like the other,” but he knew something was wrong.

This example goes to show you that even professionals can make a mistake. And it again reinforces the importance of having a style guide. If he had been given a style guide, or if the designers had been working with one, they would have immediately been able to see that the photo didn’t make sense.

how to diy a STYLE GUIDE OR visual brand guide

When we’re talking solely about design, I prefer the term style guide. If we’re talking about the brand as a whole, down to the brand message and brand voice, I like the term brand guide. But I wanted you to be aware of both because they’re frequently used interchangeably.

So, whether you DIY’d your website and need to create a style guide, or your graphic designer didn’t provide you with one, let’s talk about how you can create your own.

Basics to Include in Your Style Guide

Here are the nonnegotiables you should include in a style guide:

  • Logo colors and usage: What are the correct proportions of your logo, and what colors should it only appear in?

  • Brand mark colors and usage: Do you have only a portion of your logo that gets used from time-to-time? If you look at your website tabs above, you’ll see that mine is just the lightbulb part of my logo. (This section of your style guide can also include icons that you frequently use.)

  • Brand color palette: You’ll likely have two to four main colors that should be front-and-center at all times. Then you should have another two to four-ish that get used only as accent colors. As an example, my primary colors are red, yellow, and light gray. My accent colors are a teal, dark gray, and two other green-ish colors. Of course, they all have fancy names, but this gives you an idea.

  • Typography: What are your fonts? You probably have a primary font and one or two secondary fonts. My primary font is Raleway and my secondary is Arvo. This gives me a sans serif font and a serif font to play with.

“Let your branding be a reflection of your values. Design trends come and go, but values rarely change. Personal values (honesty, courage, kindness) spill into your business. It's a great place to start when thinking about how you'd like to translate your business to the visual space.”

- Madison Beaulieu of Mad + Dusty


other ideas IN CASE you want to go the extra mile:

  • Mood board to give examples of colors, photos, and textures

  • Basic details about your organization that might affect the visual design, such as values

  • Key messages to keep in mind and reinforce when sharing in different formats such as a website or social media

  • Contact info in case there are any questions or decisions to be made



Want to include the entire kitchen sink?

Create a brand guide that encompasses the A to Z of your organization. One of my clients has a brand guide that’s 100 pages—no joke! But you don’t have to go that far.

Here are additional components for your brand guide:

  • Examples of what was done well in the past

  • Market research or details about your target audience, including words and emotions that represent them and what they’re looking for from your organization

  • Goals and objectives for different mediums, such as how specific stories should be used or what is considered a win

  • Brand message and brand voice, including words and sentiments that should and shouldn’t be used



Which is right for you?

I think just starting with a basic style guide is a terrific idea, especially if you’re a small nonprofit, social enterprise, or social impact company. If you’re a little larger, or frequently utilize contractors and freelancers, I think you should expand your guide to ensure that your brand stays tight, even as it grows.



SIGNIFY’S Brand Guide As An Example

Want to see what a brand guide looks like? Here’s mine!

Click the image below to see the full, nine-page PDF.

 
 

3 PRO TIPS to Help You Keep Your Brand Consistent

1) Pinterest

What do you do if you don’t have a graphic designer handy, don’t know what your colors are outside of “green” and “blue", or don’t consider yourself a style guru?

You turn to Pinterest!

And you thought it was only for recipes and hair styles . . .

Head on over to Pinterest, and type in some variation of “color scheme", such as “light green color scheme”, for example. There are thousands of color palettes already put together by professional designers that you can use!

Just type in one or two colors plus “color scheme” or “color palette” and you’ll be amazed at what you see. This is exactly what I suggested to my nonprofit client above, and they quickly found one that worked for them.

2) Canva

I can’t believe how many people still don’t know about Canva! This amazing (and free) website lets anyone become a competent graphic designer. There are hundreds of templates for social media posts, presentations, flyers, and much more. You can even pre-set a couple of your main brand colors so that they’re always handy.

But use responsibly!

Just because you have so many templates at your disposal doesn’t mean you have to use them all! The idea is to create consistency, right? Find a template that can be used over and over again for social media posts, brochures, flyers, presentations, and more.

My Canva account is set up for my social media posts, Pinterest posts, and more. So, when I or my interns log in to create new ones, all we have to do is make a copy of a previous design. This keeps the same look and feel intact each and every time. Remember, you want a brand that is recognizable.

3) Professional Photography

Of course, we can’t talk about a style guide or brand identity and leave out photography. But if you don’t have a photographer on staff or aren’t planning a photo shoot anytime soon, you want to find photos that both look good and also fit within your color scheme.

For this purpose, I like Unsplash. But other great options include Pexels, Pixabay, and Pikwizard. These are all royalty-free sites, meaning you don’t have to pay to use the photos. Choose whichever site has the best options for your brand.

In Unsplash, I have an account so that I can earmark photos that work well for my brand as I come across them. Because I post on this blog twice per month, I’m always searching for new photos, or looking to see what I’ve already saved. This not only makes them easy to find in the future, but again, my interns can choose from photos I’ve already approved.

Before I go, let me reiterate: I still suggest working with a professional designer whenever possible. They can help you set up colors and templates to use on your own when you can’t afford them, or are capable of creating something in-house. I never would have achieved the consistency that I have no without help from the pros in the beginning.



PIN THIS POST FOR LATER:

Does your nonprofit or social enterprise website look like it’s worthy of the dollars you’re asking people for, or does it look like you’re still trying to get your act together?

Kristi Porter, founder of Signify

I’m Kristi Porter, and I help cause-focused organizations understand and execute effective marketing campaigns so they can move from stressed to strategic. Your resources may be limited, but your potential isn’t. Whether you’re a nonprofit, social enterprise, or small business who wants to give back, I’ll show you how to have a bigger impact.