Services Portfolio Discovery Call

How to Brand for Website Development






web design

Author: Jake Ni
Published: Feb 01, 2021
Updated: Feb 01, 2021
10 min read

Before you start building a website, you should ask yourself these 4 questions:

1. What fonts am I going to use?

2. What colors am I going to use?

3. Do I have a logo to put on the site?

4. What icons should I use for phone, email, social media etc?

The 4 elements mentioned above are the core components of branding. Branding is the soul of your business's digital presence, and should be taken very seriously.

Today, we'll show you how our pros at 1 Stop Coder build "branding boards" for use on websites. Let's dive in!

Original artwork by our team at 1 Stop Coder

Before You Start, Here Are the Tools and Softwares You Need

Make sure you have an Adobe Creative Cloud subscription to their full range of softwares. Or at least have Adobe Photoshop and Adobe Illustrator. One for photo editing and the other for vector graphic design. You could use amateur grade softwares such as Canva, but the functionality will be limited and the end results will not be as professional.

Create a Branding Board Template and Save It for Future Use

In Adobe Illustrator(Ai from hereon), Create an artboard. Set the size to 1920 x 1080 pixels. Divide it into 4 sections: Fonts, Colors, Logos & Icons.

In the font section, create 3 lines of dummy text, and mark them as "Title", "Heading" & "Paragraph" respectively.

In the color section, create 2 rows of 3 squares. Mark the 3 in the first row as "Primary", "Complementary" & "Accent" respectively. Mark the 3 in the second row as "Title", "Heading" & "Paragraph" respectively.

Leave the logo section blank for now.

Leave the icon section blank for now.

Pick Your Fonts

Go to Adobe Fonts, and start searching for fonts. In most cases, one font family is enough for a website. Sometimes, you could use 2. One for titles & headings, and one for paragraphs.

There are 2 categories of fonts, Serif and Sans Serif.

Sans Serif vs Serif
Courtesy of Impact Plus Learning Center

A serif is a decorative stroke that finishes off the end of a letters stem (sometimes also called the “feet” of the letters).

In turn,  a serif font is a font that has serifs, while a sans serif is a font that does not (hence the “sans”). Simple, right?

There is no clear cut directions with regards to when and how these 2 types of fonts should be used. But generally, Serif speaks traditional & classical. Sans Serif speaks modern & simplistic.

Pick wisely, based on how you want to communicate your brand identity to your website users.

Build a Color Palette

Have a primary color, a complementary color and an accent color. 

What's a primary color? Well, when we think of Coca Cola, the color red comes in mind. When we think of AT&T, we think blue. T-mobile? Pink! Every brand has a primary color that represents its identity.

The biggest mistake businesses can make is to have inconsistent colors in their branding.

The go-to place for professionals to pick colors is Adobe Color. Play with the color wheel on the site and find a primary color that best suits your brand identity.

Adobe Color

Second, pick a complementary color. As the name suggests, the purpose of this color is to support the primary color and create some visual diversity. Follow the instructions on the color wheel and pick one that complements your primary color.

Lastly, you can have an accent color for pieces like buttons on your website. This one is optional but nice to have. We typically use the "triad" function on the color wheel to pick this color.

Design Your Logo, 2 Versions of It!

One can go on forever about logo. We're going to stress only one principle today.

You need at least 2 versions of the same logo for your website.

What do I mean by that?

Take a look at the examples below. 

The desktop version of the Adobe logo has both the icon and the "Adobe" text.

Full-size version of the Adobe logo
Mobile version of the Adobe logo

As you can see, depending on the screen size, your logo may vary. If you have an icon + text style logo, sometimes you need to ditch the text to create a mobile version.

Create an Icon Pack That Includes Contact Icons & Social Media Icons

Icons are important for websites. For example, when you see a "Notification" button, there is usually a bell icon next to the text. Like this:

Icons on YouTube

So it is critical to design a complete icon pack for use on your website. The icons should be consistent with your color palette, and your brand identity in general.

An icon package we designed for a client

We hope the above tips are able to guide you through your branding process. We highly recommend business owners to hire a professional web development company like us, for a professional & seamless branding process.


About the Author

Jake Ni


Jake has over 5 years of experience working with small business owners. He believes that small business owners are the backbone of America. They deserve to benefit from the latest technology that fail to trickle down from "big tech". With knowledge and skills in web development, SEO & online advertising, he's ready to help you build a top tier web presence!

Book a video consultation with Jake:

Reviews & Testimonials

Genuine words of appreciation from our loyal clients.

Follow Us on Social Media

See our daily updates on our Instagram page