Seven checklist items to make sure your website is on brand

Does your website feel like the perfect extension of your brand – or is it working against it?

Your website is one of the few online spaces where you have complete control, so every aspect should reflect your brand. If you’re simply choosing a template and not customizing it enough, you may be creating brand confusion. To avoid this, follow these seven checklist items to ensure your website branding is aligned with your brand.

1. Clearly display your logo on your website

When you first open a website, what is the first thing you see? In most cases, it’s likely the logo. It is the way a website visitor can immediately visually identify your brand on a website. And as you build recognition of your logo it also becomes that stamp of approval saying “Yes, this is my website” building trust with your audience for the content they are about to see.

There are three places you should make sure to display a logo: 

• The top – in your header, likely with the navigation.
• Footer
• Favicon 

Header

You want to clearly display your logo at the top of your website — again, it’s the first thing someone sees. The ideal placement is in the upper left, following the way most cultures read from left to right. But a logo placed in the top center can also work.

Footer

For the footer, left, right or center is not as important but it is good to place your logo here as this bottom space of your website can hold important information like your navigation or an email sign-up. This is especially true if you don’t have a sticky navigation that is visible as you scroll. Bonus points if you have an alternative variation of your logo that can be used in the footer so as not to have the same image twice on the page.

Favicon

Lastly, for the favicon, it is a way for someone to quickly identify which tab is your website. I’m calling out my all-the-tabs-open-at-once friends. Remember, this is a smaller space. That means you’ll likely use the icon from your logo if you have one, or a monogram that can still be easily identifiable. A full logo will be too hard to read!  

Tip: If you’re fresh to starting a business, it’s understandable if you can’t invest in a professionally designed logo right away. Simply choose a font that gives a similar feeling to what you want your brand to be (professional, playful, modern, etc.) to type out your business name and use that. 

2. Add your brand fonts to your website

This might surprise you, but fonts have personalities!

That is why having brand fonts that you can use in social graphics and elsewhere, including your website is so important. If your brand is fun and quirky, the serious and professional Times New Roman has no business showing up in your space.

When it comes to fonts and your website, here are three things to do: 

• Use your brand fonts whenever possible, uploading them if you need to
• Have similar alternatives for when you can’t rely on your brand fonts
• Set up a system for how you use and style your brand fonts 

There are too many website platforms and themes for me to list out the “how-to” on uploading your brand fonts. But a quick Google search, “How to add custom fonts to…” should give you the answer on if it is possible or not and how.

At Rising Tide we love using ShowIt for our websites. Here is a helpful link to learn how to upload a custom font to your ShowIt website.

And if you can’t upload a custom font or it feels way too complicated…

When you can’t upload a custom font

It’s always good to have similar alternatives for when your brand font is not available, or in this case, cannot be added to your website. A good place to start when considering font alternatives is Google Fonts. Their collection is available on most website builders. Just remember, an alternative should not look too different from your brand font.

Create a system of styles for how you use fonts on your website

Nothing ruins the website viewing experience quite like poor design. And having a party of fonts and font sizes with no plan is no good party to be at, let alone read through. 

If you’ve had visual branding done for your business you might already have a set of style guidelines for what fonts to use for headings, subheadings, and body text. Maybe even ideal sizes and colors. If this is you – great! Follow the same rules on your website. 

If you don’t have this yet, you’ll want to create the rules that you will follow. But whatever you choose, be consistent with it.

Here is what you’ll need to decide:

• What are your heading and subheading fonts and sizes? Typically these are identified as H1, H2, H3, etc. Ideally, H1 is your largest font size and they get smaller with each heading level (like hierarchy on an outline.)
• What is the font and size of your body copy?
• What is your link style? For example, is a link underlined, bolded, and/or italicized?

Tip: To meet accessibility standards your website body copy should be at minimum 16px in size. 

3. Brands are often identified by color – use yours

Aside from your logo, your brand color is often the most identifiable element of your brand visually. So being consistent with the colors you use in your branding is important.

How to use your brand colors on your website:

• Determine which colors are primary, secondary, and accent colors. The primary should be the most prominently used.
• Like with fonts, choose colors for headings, body copy, and links
• What colors are you using for backgrounds 
• How heading and body copy colors will change on a dark background color
• Button color – try to be consistent with one button color throughout your website
• What colors will you be used for other design elements like borders or dividing lines

Tip: To meet accessibility standards for color your text needs to have enough contrast with its background color. To test color contrast you can use the free Contrast Checker by WebAIM. Input your color hex codes and it will tell you pass or fail.

4. Choose a photography style to help communicate your brand

When pictures speak 1,000 words, having a mix of photo styles can create a confusing message. You want to make sure the images on your website work for you and not against you. Here are a few tips for brand photography on your website.

Work with a brand photographer

Working with a brand photographer whose portfolio is in a similar style to your branding so all your images have the same editing style and feel can do wonders for your website branding. The photographer will help you tell your story visually and get a mix of photos to create dynamic imagery to work alongside your website copy. 

Consider getting these photos for use on your website:

• Headshots, including full body shots
• Behind-the-scenes action shots of you doing your work, including close-ups
• Interactions with clients/customers
• Your space
• Stylized flatlays of your work or working space
• Photos of you showing off your brand personality

Tip for product makers: Consider how you can weave your products into each of those photo types.

Tip for those with teams: Don’t forget to highlight team members in photos and how you interact together.

You’ll still need to use stock photography occasionally (but keep it on brand!)

If you can’t invest in brand photography yet, or you’re between shoots and need *that image* you may choose to use stock photography. Put in that little extra work to make sure you’re grabbing stock images that feel aligned with your branding and style. Avoid using any stock photography that can misrepresent what you do or who you serve. Unsplash is my favorite recommendation for free for commercial use photography. 

5. Add personality to your website with other visual elements

Logos, fonts, colors, and photography are key elements of a visual brand, but we can take it one step further to add your brand personality and interest to your website. 

How do we do that? By including other visual elements from your brand on your website like custom patterns or textures, branded icons or illustrations, brand badges, and unique styling.

Some examples of unique styling that a brand may have include:

• Color highlights on text
• Unique underlines – wave, hand-drawn line, etc.
• Borders or boxes around or behind images or other elements
• Shapes, like a wave or diagonal used as section dividers
• Mixed fonts in a heading
• “Handwritten” notes or callouts

6. Write in your brand voice

We’ve covered a lot of checklist items for the visuals, but your brand goes beyond items 1-5, so let’s talk about your copy. It could be argued that your copy is the most important element on your website. It’s what does the work to convert visitors into paying clients.

Keep your tone on brand

Just like you shouldn’t use different colors on your website than you do an Instagram – that’d be confusing – you want to be sure to use the same brand voice on your website. It may help to remember to write as if you were speaking. Especially if you are a team of one or a personal brand.

But also make sure your copy comes across in the tone you want for your brand: friendly, professional, casual, etc. Grammarly and ChatGTP are two great tools to analyze the tone of your copy. 

Tip: It’s subtle, but choosing or creating a single editing style and sticking to it will work to create a cohesive brand. For example, if you use the Oxford comma in one instance, do the same for all instances. 

7. Speak to your ideal client or customer

Who we serve has the biggest influence on our brand, so make sure your brand visuals and copy speak to your ideal client or customer. If you make flower crowns for a mostly female audience, the darker colors, chunky fonts, and aggressive “keep going” attitude of a performance gym will not connect.

Use your client or customer’s words

As you listen to your client or customer you will start to pick up on common themes for what their struggles and desires are. Use that! Reiterate what they are saying in your own brand voice on the pages of your website so that they feel seen and understood. They connect with what you are saying and say “Yes, that’s me. I need that!”

It’s not actually you who determines your brand, it is your clients and customers. Does that surprise you? Completing these seven checklist items will help you shape the perception and experience a website visitor has about your brand.

Some items, like your logo, will be easy and done in minutes. Others, like your copy, may take longer, and that’s okay. The best thing about a website is that it will always be evolving as you learn to better share your message and your brand.

---