Kristine Neil

Guidelines for Online Brands

Design, StrategyKristine NeilComment

Take a look at the brand guideline documents for some of your favorite companies, and you’ll find rules about everything from packaging to permitted verbiage for retail displays, all outlined in great detail. Brand designers agonize over every little pixel when putting guides like these together and define usage rules for every type of scenario imaginable. It makes sense to have guides like this if you’re Starbucks or Apple; with thousands of employees spread across the country and the globe, brand guidelines docs are the best way to get everyone on the same page and ensure brand consistency. They cover everything from the expected (color codes, fonts) to the mundane (signage templates, letterhead layouts).

But what if you’re a small business or a business that doesn’t have a location at all? It can be easy for online-only brands to think they can forego brand guidelines altogether and just wing it when creating new brand assets. Unfortunately, without defined parameters in place, it’s all too easy to get busy and settle for “close enough” instead of “on brand.” Getting your brand assets organized is super important, and it doesn’t have to be as rigid or complex as the big guys; after all, the strength of most small businesses is that we’re way more nimble and adaptive than large corporations. Here are our best tips and resources for online brands:

1. Have more than one logo

Right away, I know what you’re thinking: I thought you said this was going to be less work. And now you’re saying I need more things?! Yes, but hear me out. We often see clients that have invested in a logo design. A logo design - as in, ONE logo. And then we see them use that logo on everything. Good intentions, sure, because at least they are being consistent! But it’s nearly impossible to have one modern logo that works for all applications, scales, and sizes so we recommend that at a minimum, you should have at least three versions or variations or your logo. This is true especially for online brands and even service-based companies because, for you, exposure to your brand depends entirely on a great online experience! You don’t have a storefront or in-person employees to help make up for an inferior digital look.

The three versions we recommend are:

  • A version that is taller than it is wide

  • A version that is wider than it is tall

  • A version that works cropped into a square or circle (i.e., for social media profile pics)

If you feel like being an overacheiver, here are a couple bonus variations that can come in handy:

  • An icon or submark

  • A text-only version

In the olden days, we used to say that people also needed to include logo variations that are suitable for all sorts of various print applications, but if you’re an online business, chances are you aren’t printing much. That being said, it doesn’t hurt to make sure your logo does work well as one color (in both white and black) so that when you need to, you can have that ready to go. What’s most important now is not so much the number of colors in your logo (used to be a huge factor in determining printing costs) but that your brand can be identifiable in very small situations at a glance (i.e., while scrolling on social media).

2. Understand web colors

Speaking of social media, this is where color can make or break you. We’re all exposed to so many brands online every day that our brains can barely process them all. To take it all in and attempt to make some sense of it, our minds use color as a shortcut. Just seeing Starbucks green, or Coke red or Facebook blue can trigger you to pull up all of the associated feelings you have with those companies - good, bad, or otherwise. This is why it’s so critical for online brands to define their exact brand color palette and never deviate from it.

Color tip: define exact colors using web-based color codes (HEX codes) and not just general colors. This is the difference between saying our brand color is #052d52 and our brand color is navy. One looks like this:

HEX #052d52

HEX #052d52

And the other looks like this:

50 Shades of Navy

50 Shades of Navy

Using a close approximation isn’t good enough when it comes to color. At best, you’re diluting your own brand identity, and at worse, you’re risking people confusing your brand with another altogether.

3. Don’t go bananas with fonts

One of the things we love about working with online brands is that there’s a little wiggle room to adapt and fudge some of the design “rules” that we wouldn’t have the freedom to do when working with a larger company. The downside to this is that it’s pretty easy to adapt and fudge some of the design rules and end up with a brand asset that looks nothing like the brand. 🙃

The rule when it comes to fonts should really just be: “just because you can, doesn’t mean you should” and that’s a pretty easy rule to remember. Just like color, your fonts need to be consistent so that people can see it and know that it’s you. It’s not enough to say that your font is “cursive.” Cursive is not a font. Adorn Smooth is a font. For website design projects, we usually define up to four fonts: H1, H2, H3 & body but most of those are usually just variations of one or two fonts. For example, we may use an all caps version of the brand font for an H1 and a smaller, sentence-case version of that same font as an H3, etc. For most online brands, we recommend defining your primary brand font (the on that is used the most) and one or two “accent” fonts that can be used sparingly as headlines, callout text or as an embellishment to the primary font.

4. Have a photographic style

We were so excited when Squarespace announced last year that it would be including our favorite stock photo site, Unsplash, as a built-in integration. With a massive library of gorgeous photos that are free to use, Unsplash images are a great way to flesh out a website if client’s don’t have many pictures of their own.

Stock photos can also just be used as a nice background to set the “mood” for a site while your content takes center stage. We know that photos have the power to shape the way we feel about what we see online - bright, colorful images can make us feel happy; dark, moody photos evoke a more serious feel. Including both on a website - confusing!

When it comes to photos, we suggest letting your web design team work with you to pull just the right selection. Visual communication is our strong suit so if you tell us that you need to convey to your visitors that you’re sophisticated, or funny, or an expert in your field - we’ll find photos to do just that. It’s often difficult for clients to disassociate from their own feelings about the visual elements enough to understand how someone that’s never experienced their brand (or maybe even their industry) sees things. For example, what you see as a photo showing a specific type of tool or technique or technology, visitors see as “someone who does what you do.”

Keep in mind that these photos can also be used in blog posts, social media promotions or even digital advertising so building a library of on-brand photographic assets is super helpful!

5. Put it all together - Canva for Work

If you’d have asked me, a serious graphic designer, a couple of years ago if I would use Canva more than I do Adobe Photoshop or Illustrator, I would have laughed at you. That’s because I was caught up in the idea that Creative Suite was for “pros” and new, web-based products like Canva were for amateurs. I was wrong. Very, very wrong. Canva for Work is a fantastic way to keep your brand assets organized and quickly pump out on-brand social media posts, blog headers, Facebook ads and more. Here’s the thing: you gotta spring for the Canva for Work option. It’s $10 a month, but as an online business, you’re not paying to erect a monument sign in your front yard so I think you can handle it.

With Canva for work, you can define all of your brand fonts and colors, make templates that you can quickly use and re-use and organize all of your assets like photos and logo variations, so they’re always ready to go. No more excuses that you just picked the closest color you could find or used a font that was close-ish to your own. This is not a paid endorsement of Canva for work, and the link above is not an affiliate link. This is just us telling you that this is the best tool we’ve found to help online brands get their act together when it comes to managing their identities.

WRAPPING UP

As an online brand, you may not need to worry about things like signage or employee uniforms but taking the time to get your brand assets organized will help you start building brand recognition and save you time in the long run. Whether you’re posting on social media, writing a new blog post or creating a landing page for a new product or service, it’s essential that you have the assets you need right at your fingertips. Brand consistency is what helps build trust and confidence in your business, and an organized aesthetic can easily turn casual fans into dedicated devotees. Done right, your brand will be ready to compete with the big guys in no time!

https://markonbrands.com/blog/gudelines-for-online-brands