How to create your brand style guide

All of the websites I’ve designed are a unique combination of websites I’ve loved at the time.

Just like with reading, you have to visit A LOT of good, bad and phenomenal websites to understand the difference among them. This will lead you to find your own unique style, which definitely takes time to develop and just gets better and better the more you design.

 

“If you see a great master, you will always find that he used what was good in his predecessors, and that it was this which made him great… Ultimately it comes down to taste. It comes down to trying to expose yourself to the best things that humans have done, and then try to bring those things into what you’re doing.” (source)

Knowing what and when to steal isn’t always that straight-forward though.

Just because a site is ugly doesn’t mean the content or architecture is necessarily bad.

It can be hard to generate copy for small business websites.

Fortunately, many small businesses’ websites just brain dump everything they can think of onto their websites, kind of like this

So pay attention to even the ugliest site’s content. You never know — the copy might be fantastic or at least inspire some ideas for page content/copy.

Pay attention to everything — the headline copy to the types of images and illustrations, menu navigation structures, page layouts and about page stories, typography and colors used. Collect and make note of the things you like on each site you visit.

Here’s where I look for inspiration.

Where do I find inspiration?

Review competitor websites.

Because most of you are making local, small business websites, you’re going to find a lot of nearby businesses either don’t have a website or their websites look like they’re from 1929.

I don’t usually get very inspired by these types of websites (obviously), but I do it because I need to know what my direct competition is doing or not doing, so I can do it wayyyyyyyy better.

Here’s a few ways to find local competitors’ websites:

  • Search Yelp
  • Search Facebook
  • Google, which will mostly just pull up Yelp and other directory listing sites

Review ALL industry websites.

After you’ve researched your local competition, it’s time to find the best of the best industry websites so you can get inspired to make a phenomenal website specifically tailored for this type of business.

For example, I’m making a cupcake website, and during this inspiration phase, I discovered some decent websites by Googling “best cupcakes in the world.”

From the search results, I clicked on a post that featured a long list of the best cupcake bakeries.

Then I visited every website featured on the list. What did I find?!

A few were actually pretty good, and I even really liked one.

Scour inspiration directories.

Last and certainly not least, I scour popular “inspiration” websites, which are directories of the best website designs out there. This gives me inspiration for page layouts, content, color palettes and overall UX.

Here’s some of my favorites:

How do I document my inspiration?

You’ll want to document your inspiration so you can refer back to it when you’re creating your brand style guide.

In this lesson, you’ll create a Pinterest board, and add screenshots of things you liked from the various websites you visited as well as a brief note about what you liked about it.

Once you finish adding screenshots, figure out which elements (if any) don’t “go” with the rest of the shots you collected. This is good to do because it’s likely you’ll have some elements that clash with each other.

By the end of this lesson, you should have chosen a color palette and fonts for your website. You’ll also have an idea of which types of visuals your site will include.

Step 1: Create a secret Pinterest board.

Because WordPress is massively popular, it has significantly more plugins, themes and talent readily available to help you if you get stuck on something.

Seriously, just join a Slack group with technical people (here’s another list of Slack groups and one more), and anyone will be able to help you. There’s also probably Facebook Groups you could join as well.

“There’s a HUGE support community. WordPress isn’t just software, it has become a community. Some might even say a movement. In fact, WordCamps (1-3 day training sessions) have sprung up from grassroots efforts.” (Source)

What should you search for?

It can be difficult to know what exactly you’re searching for at first so I’ll use my fictional cupcake bakery as an example to jump start your brainstorming.

I started by searching “cupcake bakeries” on Pinterest because I wasn’t really sure what to search for at first.

This didn’t turn out to be such a bad search term because it pulled up some pictures of beautiful bakery storefronts, which I saved to give me inspiration for the pictures I’ll need of my bakery’s storefront.

I even got some copy ideas.

Then, I stumbled upon some gorgeous, girly logos, which brought me to this cute, little website, filled with tons of pre-made logos. I went through all of the logos, and saved the ones I liked to my board.

Next, I began thinking about the actual cupcakes — my “product” — because I wanted my cupcake photos to look beautiful.

I wasn’t finding anything I really loved the style of on Pinterest, so I went to Google and did an image search for a website I knew had the type of photos I wanted.

Then I saved the photos I found and liked to my board.

Finally, I started thinking about the “about” page and the “team” shots that I’d need.

So I searched for “businesswoman” etc. on Pinterest, but remember, I need some bakery-esque shots, so that wasn’t really the right term.

I went onto to Google and image searched the founder of the cupcake website I love. That gave me some inspiration.

Finally, I thought it might be cool to have some shots of the kitchen, so I did some searching for kitchen bakery shots.

I also knew I wanted my client to have a cute dog to include on the team page so I did a Pinterest search for adorable dogs.

Step 2: Look for patterns and similarities.

Once you have about 30 to 40 images, it’s time to look for similarities and patterns between your pinned images.

After reviewing my board (and even before I did), I have a clear idea of what I want my website to feel like although there are some things that clash with each other.

For example, I seem to love bright colors but then I go on this gold and pale pink binge. #clashing

As much as I personally love loads of colors, I think the pale pink and gold fit my client’s clientele better, and so, I’ll probably stick to those types of colors.

Step 3: Refine and layout.

After I’ve found the patterns, I save the most fitting images to a folder on my desktop.

Then I open a grid template in Photoshop, and I start dropping these images into the grid. I resize them as needed, to fit into the grid.

 

The only reason I do this is so I can figure out my color palette. Here’s what I came up with for my cupcake bakery:

Once I solidified my photos, I used the “color picker” tool in Photoshop (Use the Chrome extension ColorZilla, if you don’t have Photoshop), and picked colors from my pictures.

This process can be a bit frustrating. I didn’t decide on this color palette until about an hour after playing around with it.

Walk away when you feel you’ve given it your all — even if you’re not 100 percent happy with the results. Let it sit (at least overnight), and come back to it the next day with fresh eyes.

COLOR PALETTES
A color palette should include 3-6 colors.

  • 1-3 main colors: The most used colors in your branding
  • 1-2 pop colors (optional): Sparingly used to highlight important information on your website
  • 1-2 neutral colors: Used in your body and paragraphs and throughout your website and brand (Must be easy to read!!)

Keep in mind that color palettes very much affect the personality of a website.

Step 4: Choose your fonts.

Brands usually include three core fonts:
  1. a hero font (for headings),
  2. a support font (for subheadings or emphasis),
  3. and a highly legible body font for large areas of text (like paragraphs).

These fonts do not change, except to be used in italics or bold (in some applications).

Make sure your fonts look good together, and make sure it’s a GOOGLE FONT!

I choose my fonts by Googling stuff like “Best font pairings” and “Google font pairings” and/or by searching Google Fonts. If you’re a beginner, I recommend going with a recommended font pairing that you find in your search.

If you want to dive deeper into learning how to pick and pair fonts, check out this article on Canva.

Step 5: Put it all together in a style guide.

A style guide can be as in-depth or minimal as you want it to be. For the purpose of this section, I wouldn’t go overboard. I’d make this minimal and tweak as needed when you’re building your site.

Minimal could mean as simple as a Google Doc that just lists your fonts and colors.

You can use an array of different tools to generate your style guide. Here’s a Google Slides template I made for you guys, which you can make a copy of (and edit) here.

If you don’t want to make your guide in Google Slides, then consider using this more in-depth, free style guide generator.

And if you want even more options, check out this listicle of style guide templates.

NEXT: Create a Website Outline