Website Branding Process

In this tutorial, I will be explaining how to choose and set up your website branding strategy.

To start off, the branding process will involve 3 things.

1. choosing the complementary color scheme to use throughout the site,
2. choosing the Fonts for your written content
3. creating a logo for your website

We want to make sure that anything we do on our website is On Brand meaning that pictures, titles, content, logos, layouts etc. across our website follow the same branded theme. This makes the site recognizable to regular visitors and feels more professional and trustworthy.

New Branding Process Tools

Creating a brand from scratch can be daunting, but I will show you a new branding process that anyone can action, even if you’re a complete newbie at this.

We will get branding inspiration from other websites, and we’ll use various free online tools, like the color wheel and the color picker chrome extension.

Throughout the website branding process I suggest you use an online project management tool to document your branding ideas, logo ideas, color choices and any other brand inspiration you come across.

This tool will help you store the branding information in one place which is easily accessible for future reference. I also use the same tool to document my content publishing process and any other regular processes I use to build and maintain my sites.

I like using a free project management tool called Notion.

Once you register an online account with Notion, just add your first page and title it (in this case, I titled mine ‘Website Branding’).

As you go through the process remember to jot down any ideas, images or useful attachments that are relevant in this Notion page. This will come handy as a reference in the future when implementing your website branding features.

Here’s a 1-minute, quick guide to get you started with Notion.

Branding Step 1: Choosing Website Color Schemes

The first part of the branding process is to choose a split complementary color scheme. Meaning we will be choosing 3 or more colors that will be the main brand colors across our site.

Ideally, we don’t use any other colors on our website apart from these and shades of black and white. (Just for the sake of clarity, this does not include colors that come in any external pictures we insert in the site).

I like to pick a total of 5 or 6 brand colors (including black and white shades) and stick with these across my website. So, I use them in the logo, the headers, the links, titles, infographics and so on.

When choosing the colors for our website branding, we need to cater for three main categories.

First Category: Primary and Accent Colors

This is your primary color, and one or two complementary colors. To understand how colors interact with each other you will need to refer to the Color Combination wheel (see below).

Some colors just don’t look good when combined. The color wheel helps you understand which colors complement each other.

You should try and pick those colors that are opposite each other on the color wheel. In the image above you can see that in the smaller color wheel, titled Complementary, purple and yellow are on the exact opposite side of each other. These are complementary colors.

This means that if you pick purple as the primary color for your website, then yellow would fit nicely as the secondary accent color. Same goes for blue and orange, pink and green, etc.

Second Category: White and Off-White

It’s important to always add some shade of white in the chosen set of colors for your site. You will need white as a contrast on darker backgrounds. Vice-versa, you will need a light color background for the darker colored content to stick out and be readable.

Third Category: Dark Colors

You also want to make sure you have a very dark color which will be used for your fonts and footer areas. A dark color will come in useful wherever you need to contrast the lighter colors you have on your site.

Picking Your Brand Colors

Unless you’re a professional designer, you can easily get lost in a never-ending maze when picking colors.

That’s why I like to start first by getting brand inspiration. I do this by looking at other website branding examples and listing the colors they use.

Start with Primary Colors

First look at the primary colors of brands or websites within similar niches or industries that you are targeting for your own website.

For example, in my case, since I am building a site about WordPress, I checked out the brand colors for WordPress and took a similar color scheme shade as my primary color.

To find other brands’ colors, google ‘brand name + logo color hex’ or ‘brand name + branding colors’. If it’s a popular brand you will also find the Hex numbers of their brand colors.

If you don’t find the Hex number from google results, you can use the color picker chrome makes available on its Extensions repository. The one I use is ColorPick Eyedropper.

Install the Extension, click on it, and just hover over the colors you want to find the Hex code for. The extension will magnify the image and give you the Hex code and the RGB color codes.

All you need to do then is copy the code and paste it in your notes.

Take note of all the colors that interest you (including Hex codes) in your Notion or any other software you are using for documenting your process. You will need to refer to these later.

Move on to Secondary Colors

After you choose your primary and accent colors, you can then use a free online site called Coolers.co to help you pick other colors which go well with the initial colors you chose.

Go to the Coolers website and create your free account. Once in, press on the START THE GENERATOR button.

This will take you to a palette showing 5 strips of colors. You can now start playing around with these colors.

First, insert the Hex code of the primary and accent colors you chose in the previous step. Do this by clicking on the large Hex number shown at the bottom of the color and change it to the HEX number of your color.

If you click on the Rubik’s cube like icon (second one from the top on the color box). You will see different shades of your chosen color.

Once you identified the shade you like you can lock this color in by pressing on the little padlock icon. This way the color you chose is locked in the palette.

If you’re not sure what other colors to insert, you can press the space bar and the palette will show you a combination of new colors that complement the locked colors.

Keep pressing on the space bar until you identify all the colors you want. Play around with the shades and lock as soon as you are satisfied with a color.

Remember to select a light color and a dark color also in the palette.

You can also increase or decrease the number of colors you have in your palette. To eliminate a color from the palette, press on the ‘x’ in the color box. To add another color to the palette, hover over the line between any 2 colors and press the ‘+’ sign that comes up.

Another way you can use Coolers to find colors is by uploading an image relating to the brand you are inspired from. This can be a snapshot of their website, their logo, or maybe a picture showing the packaging of their products.

Use the Coolers image upload tool found at the top right side of the palette page (the Camera icon). Click on this and upload the image of the brand you’re inspired from.

Once you’re happy with the colors you chose in your palette, go ahead and press the SAVE button at the top right over the palette. This will save your palette for future reference.

I copy and paste the URL of my palette in the Notion page I created to document my branding guidelines. Apart from this, you can download the palette in pdf and save it in your computer.

Branding Step 2: Choosing Website Fonts

The next part of our website branding process involves choosing the font types for our website. Meaning what will the words look like on our content, links, Headings etc

Some people like to have different fonts for their Headings and their Body. I prefer to have the same font throughout, however.

To try out different Fonts and see which ones pair well together you can use a site called FontPair.

In the Fontpair.co homepage you can scroll through various recommended font type pairs.

You will notice some options that offer 2 different types of fonts for Heading and Body and others that recommend one type of font for both. In the latter case, however it is recommended that the Heading Font is Bold.

When you choose which font type you want, click on the ‘View More’ button in the bottom right corner of the relevant Font box and this will take you to a more detailed page.

Within this page you will also have a link to the google fonts website which gives you further details of the Font and how it looks like in different bold weightings. Here you can type any sentence you want and see how it looks in the chosen font type.

Keep a record of this Font by copying the google font URL and saving it in your Notion branding notes. At a later stage we will include this font in our WordPress dashboard as the default Font for our site.

Branding Step 3: Designing a Logo for your Website

Finally, the scariest or most fun part, depending on how artistic you are. Designing and creating your logo.

You can choose to create a simple logo yourself using a free online tool or else you can order one from a professional graphic artist.

If you decide to order your Logo, I recommend you find a decent artist from Fiverr. I have used this freelance platform on various occasions in the past with good results. Having said this, you should note that a decent Logo will set you back $50 or more.

Also, you need to make sure you find a designer that is highly recommended by others. I have a few good ones I can recommend. Hit me up here if you want some recommendations.

Keep in mind that if this is the first time you’re starting a website you will not need a professional looking Logo, at least until your site starts getting many visitors. So, might as well spend 30 minutes of your time to design a quick one yourself.

Creating your own Logo

There is only one tool I use for any image related needs and that is Canva. This tool can be used for free, or it can be used for a small monthly membership fee.

With the free version you can do many things that are fit for the purposes of your website, however with the paid version you get more features and access to a big library of images.

The premium Canva subscription will also make your life much easier since it saves your predefined settings, including brand colors, image sizes and allows you to resize any images you previously created.

To create your logo, you can start from a blank canvas. I suggest creating one in the size 400 by 90 pixels. This will go at the top of your website.

Now play around with your creation. You can find inspirations from Canva’s own design templates. Make sure you copy the Hex code from the colors you have chosen in the previous section and include these in your logo.

Here’s a good tutorial to get you started.

Creating your Favicon

You will also need to create a smaller logo to be used as the Favicon for the website.

The Favicon is a tiny little logo that appears in multiple locations, most noticeably it appears next to the Title of your site in the Web Browser tab.

For the favicon logo, a square banner of 200px by 200px will be enough.

Download your Logo and Favicon

The Logo and Favicon you create in Canva can then be download by pressing on the DOWNLOAD box at the top right corner of the screen.

When you press on the download button the drop-down box will appear with some options. Always choose the PNG file type.

Also make sure to tick the ‘Transparent Background’ option. This will allow you to save your logo without a background, so when you upload it on your website it will not contrast with your website background.

 I suggest you also tick on the ‘Compress File’ option. This ensures that the image size downloaded is not too big. Large image files will reduce the speed of your website.

Remember that if you download the logo with a transparent background and you have white colors in your logo then the white part will not show if this logo is uploaded on a light color background.

I’m pointing this out because when you upload the logo for the first time on your WordPress website the background of the header is white by default and your logo will not show in its entirety. But don’t worry you can change the header background on WordPress so that your logo shows perfectly.

Obviously if you intend to keep the header white then you should not include white elements in your logo as the contrast will not show clearly.

How to Upload Logo on WordPress

To upload your Logo and Favicon on WordPress, head to your WP dashboard, click on APPEARANCE in the left-hand menu and choose GeneratePress from the drop-down menu.

Scroll down until you hit the ‘Start Customizing’ Heading.

In the Site Identity section click on the OPEN OPTIONS button.

This will take you to the customize page. On the left you will find a menu. Click on the SELECT LOGO button or the SELECT SITE ICON button. (The site icon will be the favicon).

When you click any of these a pop-up box will come up. This is your Image Library within WordPress. If you haven’t yet uploaded any images this will be empty. So next we need to upload the Logo and the Favicon images we just created.

Press on the SELECT FILES button and upload the logo and favicon files you just created. You will need to browse to the folder where you have saved these. In most cases you will find these in the download folder as this is the default folder where the images downloaded from Canva would usually be saved.

Once uploaded in the WordPress Media Library, click on one of them and press the SELECT button at the bottom right corner (choose the logo if you’re uploading for Logo option or the favicon if you’re uploading for the ‘site icon’ option).

WordPress will ask you if you want to crop the image. Check if your logo or favicon are displayed correctly within the cropped box and decide if you need to crop further or skip the cropping option.

Now press the PUBLISH button on the top of the WordPress page. Then press ‘x’ (situated on the left of the publish button) to go back to the WP dashboard.

Website Branding Done. What Next

Now that you set your branding requirements, we can start building our website with WordPress. We will be basing our website on the GeneratePress theme, however, to make it even more unique, we will include our brand guidelines in the GeneratePress settings.

This will ensure that any new content we create automatically follows the brand colors, fonts etc.

So, in the next tutorial we will be including these and other Customization settings for our GeneratePress Theme. Let’s go.

Make sure to also check out my other WordPress Guides.