Warning: Declaration of ET_Theme_Builder_Woocommerce_Product_Variable_Placeholder::get_available_variations() should be compatible with WC_Product_Variable::get_available_variations($return = 'array') in /home/customer/www/yonderdesign.co/public_html/wp-content/themes/Divi/includes/builder/frontend-builder/theme-builder/WoocommerceProductVariablePlaceholder.php on line 8
Branding and Website Design: 7 Ideas For Branding Your Website

One of the most common things I see across the web is a failure to keep websites branded–and I cringe a little bit every time.

The thing is, even if a business has beautiful branding they often forget to carry it over to their website. It’s like people think once they have a logo they’re done and dusted. But that’s definitely not the case!

In fact, a logo is just the tip of the iceberg when it comes to branding your website. There is so much more to be done when it comes to creating a consistent, branded experience on your virtual home base.

In this blog post, I’m going to dig into all of it: from how to go about branding your website to why you actually need to do it. So let’s get started!



I’ve talked about it before, but let’s be real–I’m never going to stop saying it: when it comes to branding, consistency is key.

I could cite a million different statistics about how consistency in branding is one of the most important things you can do for your business, but the bottom line is this: you can’t have consistency if you’re not carrying your branding over to your website.


Branding your website is also a super great way to make your website stand out. So many websites these days just choose a basic Squarespace template and don’t bother to customize it. Which results in a lot of websites looking the same and, well, boring.

Taking a few extra minutes to purposefully customize your website to match your branding will help you really stand out from the crowd. It also creates even more opportunity for brand recognition, which is always a good thing.


If there’s one thing you don’t want, it’s an unusable website (57% of users say they won’t recommend a business with a poorly designed mobile site, for example).

By focusing on incorporating your branding into your website, you’ll also be spending more time looking at each individual part of your site and, as a result, will notice when things aren’t as user-friendly as they should be.

In addition, consistent colors and fonts just make things way more user-friendly.


Now that you know why branding your website is so important, it’s time to dig into the best (and easiest!) ways to do just that. None of these suggestions require any crazy coding or tech knowledge–oftentimes all you need to do is change one little thing and you’ll be good to go!

So without further ado, here are 7 tips to make branding your website a breeze.


Adding your logo might seem like a no-brainer, but lots of people forget about it–especially if they’re using a website building platform like Squarespace where they might be tempted to stick with the text title the template provides them.

For the sake of brand recognition, you should be sticking your logo literally wherever you can (as long as it makes sense), so your website shouldn’t be any different.

The main place you should be putting your logo is at the top of your website in the header bar where your navigation is. You can also put it in your website footer (this is generally a good spot for a sub mark/alternative logo if you have one) and maybe even in your blog sidebar if it fits.

Addie Abroad's navigation bar with the Addie Abroad logo in the middle

For my personal blog, Addie Abroad, I placed the logo in the center of the navigation bar.


A brand color palette is one of the simplest and most common pieces of branding that a business should have. And yet, when it comes to website design, I can’t tell you how often I’ve seen that brand color palette just thrown out the window.

Other than black and white, you shouldn’t be using a single color on your website that isn’t in your brand color palette. It’s really as simple as that.

Most website building tools these days make color customization the #1 customization option, so utilize it! Use your color palette to customize:

  • Headers
  • Links
  • Buttons
  • Backgrounds
  • Divider lines
  • And anything else you can think of!

the sidebar of the Addie Abroad blog website - perfectly branded

I used my brand colors to spruce up different elements in the sidebar.

Of course, when it comes to branding your website with colors you don’t want to go too overboard. Here are a few tips and tricks to keep in mind:

  1. Keep body text a neutral black or dark grey even if it’s not part of your color palette. You want people to actually be able to read to content on your website, and black and dark grey are by far the most legible colors.
  2. Use the bolder colors in your color palette for things like buttons, headers, and borders. That way the colors are still there but they aren’t too overwhelming.
  3. Be sure to keep things consistent. Buttons, headers, etc. should always be the same color.


Changing the fonts on their website is one thing that a lot of people overlook, but it’s a really simple way to improve brand consistency.

Instead of sticking with the default fonts on your theme, go ahead and change them to your brand fonts.

A paragraph of text on the Addie Abroad blog

Here’s what the text on a blog post on Addie Abroad looks like – totally branded!

If your brand fonts aren’t the typical web fonts that are available, it’s generally still possible to use them. You can use Adobe Typekit with Squarespace, for example, and the Use Any Font plugin for WordPress makes this super easy.

If you had professional design work done, your brand style guide should include instructions on how to use each font that is in your brand’s font toolbox: follow these!

If you don’t have specific brand fonts yet, now is the perfect time to choose them! Elle & Company Design has a great guide to finding, choosing, and pairing brand fonts that you can find here.


A favicon is a small icon that is associated with a website and shown up at the top of a tab, in bookmark menus, etc.

Because favicons are so small, they’re easy to overlook. I can’t tell you how many times I’ve gone to a website and seen that their favicon is still the default hosting one. This looks so unprofessional!

Although finding the setting for changing your favicon might be a little bit harder than, say, the color customization panel, it is possible on every single website builder. So do a little bit of digging (or a simple Google search) and go in and change your favicon.

Addie Abroad website tab in Google Chrome

The Addie Abroad favicon is the balloon icon from the logo

When it comes to choosing your favicon, keep these things in mind:

  • Your favicon should be simple and easy to see, as it will only ever be displayed in a very small format.
  • Your favicon should be in line with the rest of your branding. One easy way to do this is to take the icon part of your logo, if you have one, or the first letter of your brand’s name in your logo font and color.


Custom graphic elements like social media buttons, icons, and dividers are a really fun way to add some more branding to your website. It’s also a great way to stand out from everyone else because they’re something that absolutely no one else has!

Ask your graphic designer to whip up some fun, custom graphic elements for your website if they haven’t already and then stick them in.

polka dot divider line

Here’s one of the custom graphic elements for Addie Abroad: a divider line


Because they often take up a huge amount of space, the images used on a website can really make or break the success of its branding. Even if you have all of the other things mentioned in this post down pat, if your images don’t match up to your branding then nothing really matters.

It’s really easy to end up with a bunch of images on your site that don’t look the same or match your branding–especially if you’re using stock photos. A good way to combat this is to establish a brand image style and follow it.

If you’re taking your own photos for your website, then emulate this image style in each and every one. If you’re using stock photos, then always search out ones that match your brand image style. Then use them exclusively. If you have a photo that doesn’t match your style, then don’t use it.


Website copy is one of those intangible branding things, but it’s just as important as visual branding on your website.

If your website’s copy doesn’t match up with your visual branding, it creates a sense of discord that you definitely don’t want.

The easiest way to make sure that the two match up is to channel your brand personality when you’re writing your website copy. Instead of writing as yourself, write as your brand personality and you’ll be good to go. And if you don’t have a brand personality yet, now is a great time to make one!

So there you have it: 7 ways to brand your website.

When it comes to website design, both visual and intangible branding are super important. From creating a sense of consistency, to making things fun and easy to use, branding and website design go hand in hand.

If you incorporate these seven ideas for branding your website you’ll be well on the right track!

Still feeling confused about all of the things you need to have to create a rocking brand? Download this complete branding checklist and you’ll never feel lost again!

Pin It!

So you have an awesome brand identity designed. But how do you go about using it on your website? Branding and website design go hand in hand, but a lot of people forget about branding their website. Don't let that be you! Here are 7 ideas for branding your website that you don't need to be a designer to implement. #webdesign #branding


Not sure where to start when it comes to branding your blog? Sign up today to get a free branding checklist sent straight to your inbox!

Success! Check your inbox for your freebie :)

Pin It on Pinterest

Share This