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!
 | |
|
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.
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.
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.
 |
| 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.
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.
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.
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.