Website branding is both simple and nuanced. There are some basic elements that every website should have in order to support the identity and niche of your blog or online business. Once you identify those essential elements, it’s up to you how you choose to design them.
Creating the branding for your website is a lot like building the wardrobe in your closet. Just like a stylist would tell you that every woman needs a Little Black Dress or the perfect-fitting pair of jeans, a web designer will tell you that every website needs a few key pieces to complete your branding collection.
Website Branding: The 5 Essential Elements You Need
1. Color Palette
When I’m designing a website branding package like the premade kits in my Etsy shop, I usually start by choosing the color palette. This gives me a better idea of the overall look and feel for the total brand. Most website color palettes include five to seven shades (including a shade of white and black).
In general, it’s good to have a combination of light and dark shades in your color palette. For the sake of this article, we won’t go too deeply into color theory. Just remember that your color palette should have the following:
- 2 darker shades that ere easy to read on a white screen
- A fun accent color that really pops (great for hyperlinks, eye-catching buttons and call-to-action sections)
- 1-2 light colors that can be used to break up large sections of white screens
Of course, there are exceptions to every rule. I’ve seen websites that are completely designed in black and white and they looked super chic. I’ve also seen monochromatic palettes where everything is made up of several shades of pink.
2. Font Choices
Picking the fonts for your website branding package can be really fun once you understand the way fonts express certain moods and feelings.
There are four main types of fonts that most web designers will choose from:
- Serif: Recognizable by the little feet on the letters, serif fonts evoke classic and traditional design. They are perfect for titles or headers and large blocks of text.
- Sans Serif: Meaning “without serif,” Sans Serif fonts are have clean, minimal and modern lines. They are also perfect for titles/headers and large blocks of text.
- Display: These fonts are very stylized, like something you might find in a sci-fi logo or Broadway marquee. They should be used sparingly as a logo only and not for large blocks of text.
- Scripts: These fonts look like handwritten lettering or cursive. They can add a very personal touch. Like display fonts, they are meant to be used sparingly.
Font Pairing is a major trend in website branding. That means picking two fonts that work well together. For example, you could pick a serif font for your headers and titles, and pair it with a sans-serif for your paragraph texts.
Lately font pairings have expanded into trios, and web designers will add a third font (usually a script or display) that can be used sparingly as an accent.
A free tool like Google Fonts [insert link] is a perfect place to search through hundreds of fonts. They also include recommendations for pairings.
3. Header Logo
The header logo is the main focal point of your website branding. As you are preparing to build your website [insert link], you’ll want to have your header logo created so you can get a sense of how it will look on your navigation bar.
A lot of people over-design their header logos with fanciful font choices or graphic images. If you’ve ever watched Project Runway, you know Tim Gunn is always telling the contestants to edit their designs. The same principle applies to your website’s header logo.
It’s perfectly okay to keep it simple and just stick with a text logo that doesn’t have any graphics or icons. If you’re just starting out and you don’t have the budget to get your logo professionally designed, take the pressure off of yourself to design something that’s too intricate. It’s not uncommon to see blogs and online businesses go through a rebrand ever few years or so as they grow.
4. Alternative Logo
An alternative logo is something you can use when the dimensions of your main logo won’t fit into the space of wherever you’re placing it. For example, if your logo is a long rectangle that isn’t very tall, it might not be the right size for a Facebook profile image, which is more of a square.
Alternative logos aren’t used as often as your main logo, but it’s nice to have a backup in case you need it.
Submarks are the final icing on the cake that is your website branding. Submarks are also known as site icons or favicons. Basically, a submark is a small accent element.
If you’ve ever looked at a Google Chrome tab, you’ve seen a submark in action. It’s the little icon on the left hand side of a web browser tab. For example, Google’s submark is the letter G inside a white circle.
Submarks can also be used as social media profile images or your brand’s icon. I like to think of using submarks the same way you might use a rubber stamp on paper.
Don’t overthink your website branding. Some of the best branding out there is as simple as can be, and that’s why it stands the test of time and is still relevant. In the end, it’s all digital. Nothing is done that can’t be redone or undone. You should always feel free to change your brand design if it no longer represents you and your business.
Before you build your website, I want to say congratulations for taking the leap towards creating your blog or business!
You may be thinking that the next step you need to take is to buy your domain name and some web hosting. You could start there.
You may be thinking that you need to create some visual branding for your website. I’ll admit, that is a super fun and creative exercise, and one of my favorite parts about web design.
However, I strongly suggest that you complete the tasks in this article before you dream of domain names, website themes or color palettes.
What I’m about to share with you is what I tell all of my web design clients who are starting from scratch. I even tell this to clients who did a DIY build and now want to refresh and rebrand their site.
The tips below will help you whether you decide to do a DIY website build or if you choose to hire a web designer to do it for you.
Trust me, if you follow these steps you will save yourself so much time preparing to launch your website.
Do These 7 Things Before You Build Your Website
1. Get clear on who you are and who you work with
Many business coaches will tell you that you need brand clarity before you launch your business. So what does that even mean?
Well, basically it means figure out what makes you unique in your industry. How can you help your ideal client? Who is your ideal client, anyway? What makes you an expert? How can you provide solutions to the things your ideal client is struggling with?
Now, don’t freak out! Answering these questions doesn’t have to be a deep soul-searching quest. The answers could be as simple as “I empower women who are creative entrepreneurs and bloggers by providing them with website design, vibrant visual branding and social media marketing strategies.”
But enough about me! What about you? lol
You don’t have to be all things to all people. Often times business coaches will refer to this as “niching down,” which means you pick a niche within your field and you focus your intentions on how you can serve that group.
For example, I may be a web designer, but I work with a specific niche of clients. That way I can develop services for that audience without feeling feeling overwhelmed to serve too many types of clients.
We all work in broad industries. You may be a health coach, for example, but that’s a pretty general title. Try niching it down to get more specific.
What type of health coach are you? You could be coaching women on how to lose post-pregnancy weight. You could be coaching men on how to build huge muscles. You could be coaching diabetics on what foods will keep their sugar levels in check.
See what I mean about getting clear on who you are and who you work with?
At the very least, create an “elevator pitch” for who you are and what you do. Write that down. Keep it simple.
2. Do some market research
Now that you have a some brand clarity, it’s time for you to find out what your ideal clients are struggling with. This will help you create services that offer solutions to those pain points.
One way to do some research is by joining Facebook groups.
When I first launched my web design business, I joined about 10 Facebook groups for women who are bloggers and entrepreneurs. Overall, I was surrounded by hundreds of women who were actively engaging in discussions.
Eventually, I started promoting a survey that I created so I could gather research about what my niche struggled with relating to their websites.
You don’t have to get as involved as creating a survey, though. You could ask questions and keep track of the comments you receive.
Facebook groups also allow you to create polls, which is an awesome market research tool.
I’ve seen several women basically create their own mini-surveys with a group poll and the feedback responses have been incredible! There was one poll that got over 30 comments.
That kind of feedback is invaluable, and it’s free. All you have to do is spend the time to gather it.
In Facebook, simply search for groups by typing in some keywords for your niche, and filter for closed groups. You’ll find that people in closed groups are more involved and engaged.
Also, make sure that the closed Facebook groups have at least 1,000 people in them if not more. That way you will get a higher volume of comments and thread activity.
I recommend gathering your research for at least 30 days.
It is going to take time to get the info you need, so start with 15 minutes per day so you don’t get overwhelmed.
Keep track of comments, questions, or struggles in doc. That way you’ll start to see trends and themes.
The trends you identify will come in handy when you’re preparing for the next step.
3. Write the copy for your website pages
Website copy is the content that you write for each page on your site. The words you use on your Home, About, Contact, Services and Resource pages.
For example, on your Contact page, you wouldn’t just slap a contact form on there and call it a day. You would write a little blurb as an invitation for someone to use the form first.
Even something as simple as “Do you have questions about XYZ? Use the contact form below to get in touch with me. I’d love to chat more with you.”
See, that wasn’t so hard to write, but it still had to come from somewhere.
Now, to be fair, there is a bit more to writing website copy than that.
The main purpose of your website copy is that it directly speaks to your audience so they know that you are the person they want to work with.
Your website copy should clearly express that you understand who your ideal client is. You know what they are struggling with, and what their pain points are. You can relate to them.
Your website copy should also let your ideal clients know that you have the solutions they are looking for.
A big part of what makes good website copy is the tone of your writer’s voice. Are you casual and friendly? Are you a cool gal pal or an empathetic and soothing expert? Are you an optimistic cheerleader who loves to use multiple punctuation marks?!?
Once you’ve figured out your writer’s voice, aim to write at least 300 words per page.
A minimum of 300 words per page will increase your SEO (search engine optimization) ranking, which makes your website easier to find when someone searches by keywords relating to your business.
Of course, it probably doesn’t make sense to write 300 words for your Contact page, but you will definitely want to do this for your Home page and About page.
Your Home page is often the only page someone will see when they visit your website, so make that copy count.
Treat your Home page as a mini sales page. Again, let your ideal client know you understand them and what they are struggling with. Let them know what kind of solutions you can provide them.
Keep in mind that your website copy is not about you, it’s about your client. It’s about talking directly to them. If you find yourself using “I” more than you are using “you,” it’s time to edit your website copy.
4. Develop an idea for an email opt-in
One strategy that I give all of my clients for marketing their website and their business is that they need to create an email opt-in.
An email opt-in, also known as a freebie, is an incentive you offer people in exchange for their email address.
Your email list is the lifeblood of your business, so you want that list to grow with engaged subscribers.
So what should you offer people in exchange for their email address?
There are plenty of options, actually.
The strategy is to create a freebie based on all of the market research you did in those closed Facebook groups I told you about.
You may think you already know what to offer as a freebie, but it is important to validate your idea with the research you’ve done. You may find out that what you want to offer and what your audience needs are two different things.
Again, keep your freebie simple. Online marketing experts like Amy Porterfield will tell you that it’s best to give your audience a “quick win” at first.
Avoid starting out with a long ebook or multi-day course that will take weeks to complete.
You could create a simple checklist, specialized planner, a cheatsheet or video.
Keep it to 1-2 pages long, or a few minutes for a video. Remember, you’re just developing the content for now. Once you have your visual branding, you can add it to the final product.
5. Write at least 3 blog posts
Every website should have a blog page. If you don’t think you need to be blogging for your niche, you are missing out on some serious marketing opportunities.
Blogging is the best way to create content that provides value to your ideal client. Blogging also creates an opportunity for you to create social media posts to promote your business.
I recommend writing three blog posts before you build your website.
Ideally, you want to write about topics that tie into the freebie you just created. You can use your blog posts as a call to action to get people to opt in and sign up for your email list.
Also, if you can create internal links within your blog posts that take the reader to some other blog post or page on your website. This is a fantastic SEO strategy. It keeps people on your site longer.
Aim for blog posts that are at least 400-800 words long. This will also help boost your SEO ranking, too.
Need some tips on how to write blog posts? Check out my freebie The Ultimate Blog Post Cheatsheet for some tips.
6. Get photos of yourself
One of the biggest mistakes people make on their websites is not including a picture of themselves.
Your audience needs to know that you are a real human behind your business. They need to see you so they can get to know you, like you and trust you enough to work with you.
Before you build your website, please, please do me a favor and have at least two pictures of yourself ready to go.
If you’re not sure what kinds of pictures to take, I would suggest these:
- a wide shot where you are off to the far left or right. This will make a great base for a homepage banner that you can layer some text on top of.
- A headshot that you can crop into a circle and use on your about page or sidebar.
Of course, you can have many more pictures of yourself than that, but this is the bare minimum.
If you’re feeling shy, just get those two basic pictures together. Once you’re more confident, you can refresh your visual branding with new photos.
You need to protect yourself from liability, especially if you are collecting people’s data (like names and email addresses) or taking payments on your website.
Now, I’m not a lawyer or legal expert, but I used TermsFeed for my site and was very satisfied. They have a generator that took out all of the guesswork and their customer support team is fast and efficient.
Okay, that was a lot of info, I know! Trust me, it will save you so much time and frustration in the long run if you complete these steps before you build your website.
I’ve created a free workbook so you can manage all of these steps and prepare your website like a pro!