Inside: Don’t settle for a generic-looking website. Here are five simple ways to make it match your brand perfectly.
The other day in one of my numerous Facebook groups, someone asked, “How do I customize my website to match my brand?” and I was thiiiiis close to launching into a long response.
And then I thought, you know, this question pops up all. the. time.
For a good reason, too. Because website themes or templates are often sort of generic-looking, with stock images and some inoffensive color palette that looks nothing like your brand.
Now, quite a few people do simply take a website template, add a picture of themselves, change a few words, and leave the rest as is.
But that’s really not what you’re going for when your goal is to stand out in a sea of sameness.
Anyway, that’s what sparked the idea for this post.
And since designing websites is a big part of what I do, customizing website elements to harmonize with the brand is right up my alley.
So today, I’m sharing several ways to ensure that your website faithfully reflects you and your brand.
How to make a generic website match your brand perfectly
Before you get started, you’ll need to know what your brand looks, sounds, and feels like.
Seems obvious, I know, but entirely too many business owners think their website is the starting point.
The real starting point is your brand strategy. If you don’t have one, read about how you can get started with creating your own brand strategy (and pay special attention to steps 1 and 2).
Once your strategy is clear and documented, you’ll want to create a mood board for your brand – it will be your visual guide for the look and feel you want to present.
And you’ll need your Brand Style Guide or at least a single page that shows your logos with your color palette, typography, and other elements.
In its simplest form, it might look something like this:
In my work with clients, the Brand Style Guide is a multi-page document that shows how to properly use each logo, which color combinations work well and which to avoid, image guidelines, and much more.
So, let me recap this part real quick. Before you start customizing your website, make sure you have these three prerequisites:
- Brand strategy is clear and documented
- Brand mood board shows the look and feel you want to present
- Brand Style Guide provides specifics for individual elements
With all three in place and your other brand assets (logos, images, etc.) handy, let’s do some magic with your website.
#1 – Put in your logos
There are at least two places you’ll want to customize here – the header, which is where the logo lives together with your main menu, and the favicon.
Screen real estate is at a premium, so gone are the days of headers covering a third of your screen.
To keep your header nice and skinny at the top of the screen, use your main logo. It should be wide but short. For example, mine is 300 pixels wide and 64 pixels tall.
Do you have to put your logo there? No, of course not. Every website theme and template I’ve ever seen allows you to just type in your business name instead.
But the look won’t usually be even close to what you’re going for.
So, if you have a logo suite, this is the time to put it to good use. Once your main logo is in place, let’s move on to the next bit…
Favi-what? Yeah, it’s that tiny square or round image on your browser tab, right next to the title.
Do you notice how pretty much every website has one?
Yours should too. And it shouldn’t be the default favicon that comes with your platform or theme.
WordPress usually calls for a favicon that’s at least 512px tall and wide. So I make mine 700px and let the theme deal with the rest.
Optionally, you can also add your logo in one other neat spot – the often overlooked…
And here, you have choices. Pretty cool, eh?
So what are they?
Well, you could use your alternate logo, the one that’s slightly tall and not as wide as your main logo. It’s a lovely choice, especially if you’re adding your address to the footer.
Alternately, you could use your favicon again and center it just above the last line of your footer.
#2 – Add your color palette
At this point, you’re not making any major decisions about which colors go where. You’re simply adding your brand colors to your website.
Super handy, if you ask me.
You may want a few different versions of your “black” (dark neutral, really) so you can emphasize and deemphasize certain parts of the text with color alone.
For example, the meta text showing the author and publishing date of a blog post can be in a lighter color than the post title, as shown in the image below.
Many themes use what they call “accent color” for links, so if your Brand Style Guide specifies the color of your links, put in that hex code.
If no link color is specified, make that decision now. You might want to use WebAIM’s contrast checker to make sure your links have enough contrast with the background.
Note: if you decide not to underline your links, you’ll need to ensure the color contrasts not just with the background, but also with the surrounding text. There’s a special contrast checker for links that aren’t underlined.
In my opinion, this is the absolute minimum everyone should be doing to make their websites more accessible to people with visual impairments.
And on that note, let’s talk about the look of all that text.
#3 – Set your fonts
Yeah, yeah, typography – that fancy word. What you’re doing here is telling your template or theme how the text on your website should look.
The body font is the default for your whole website. Follow your Brand Style Guide and set the name, weight, size, and line-height of the body font.
Using a Google font? It’s as easy as selecting it from a dropdown menu (in themes like Kadence and GeneratePress.)
Adobe fonts need to be activated through Creative Cloud, and custom fonts require a more involved process I’ll address in another article.
And now do the same for the headings.
You’ll definitely want to specify at least the first three levels – H1, H2, and H3. It’s rare for anyone to need an H4, but if you like sections with subsections and sub-subsections, go ahead and specify your H4 as well.
My clients can simply follow their Brand Style Guide for this, as all the specifications are in it.
If you have a style guide or a brand board from someone else and these specs are not in it, take some time to figure out how you want the individual heading levels to look so the hierarchy is clear.
You could use this visual type scale tool to help you make those decisions.
With your logos, colors, and typography system in place, your website is starting to look soooort of like your brand, but not quite.
So we’re going to add a little magic that’s worth a thousand words.
#4 – Bring in your images
Follow the guidelines in your Brand Style Guide to select images that represent the look and feel of your brand.
No guidelines? No problem.
Use your brand mood board as inspiration for your choices. Airy and bright? Moody and dark? Colorful and fun?
And when I say images, I mean photos – of you, of your work, and of anything else you want to showcase. But I also mean patterns and other design elements, such as the dot divider I use to break up long text passages.
Quick note: I really do mean photos of you. Please don’t hide behind a faceless website or behind stock photos of other people.
Let your readers see you.
Smiling into the camera, looking away from the camera, working with someone… all of the above.
Once you’re happy with your selections, decide which image goes where on your website, and size them all accordingly.
You can upload them in a batch up front or bring them in one at a time as you work your way through the main pages of your website.
And last but not least, let’s give’em something to
talk about read.
#5 – Showcase your copy
Your copy (aka the words you use) on your website will help you connect with your visitors and guide them through the pages.
I always create the design around the copy for a custom, cohesive look and feel. In other words, the text comes first, so there’s no need to force it into a pre-existing template.
If you are using a design template, definitely write your copy first – even if it’s just bullet points.
You need to have a decent idea of how much text you have and how it should flow so you can pick a template that’s close to what you need.
And don’t be afraid to move the blocks around, duplicate them, and change bits and pieces to suit what you want to say.
Not sure what to write?
Here’s a few pointers:
- Use a proven “recipe” for the main pages of your website (like this About page guide)
- Write from your heart – there really is no substitute for this
- Keep your writing engaging – check out my tips for conversational writing
If at all possible, add at least a few articles to your blog. This helps your website visitors get to know you better.
It should go without saying, but I’ll say it anyway: the copy on your main pages should be heavily based on your messaging strategy.
That means you should have one.
DON’T HAVE A MESSAGING STRATEGY?
Hmm, how do you feel about spending another year watching others around you grow their businesses, leaving you behind, even though you know you can do a much better job?
That would suck, right?
If you said yes, then my signature branding package might be perfect for you. Here are a few things it can help you do:
- get clear on what your business is really all about
- take your message from muddled to mesmerizing
- build a solid strategic foundation to make future decisions easy as pie
And, of course, by the end, you’ll have a sparkling, totally-you brand you can’t wait to share with everyone… which brings you dream clients… and makes it easy to get visible and grow your business with confidence.
If that sounds interesting, click here to read more about my branding package.
Yay, question time! Here’s a few that I see often.
HOW MANY COLORS SHOULD I USE ON MY WEBSITE?
Enough that it’s not boring, and not so many that people wonder if your crayon box exploded there 😄
Seriously though, at a minimum, you’ll want:
- primary text color (dark neutral/black)
- primary accent color (buttons, links)
- secondary accent color (buttons and links on hover)
- primary background color (white or light neutral)
- secondary background color (breaks up long expanses of the main background color, especially helpful on long pages)
Can you have more colors than this? Yes, but please use them judiciously.
Can you have a black and white website and skip all other color choices? Of course, but make sure it’s really the look you’re going for.
SHOULD MY LOGO ALWAYS BE THE SAME COLOR?
Not necessarily. When you got your logo files from your designer, you should have received at least three versions of each: black, white, and in color.
You may even have more than one colorful version, depending on the design and possible color combinations.
It’s perfectly reasonable to mix and match them on your website.
Use the background color of the section where the logo will show to guide your decision.
On a white background, the colorful logo is perfectly at home. So is the black version.
But on a dark background, you’ll want to use the white one if the colorful version doesn’t show up well.
So no, your logos don’t need to match in color top to bottom.
But you do need to follow the logo guidelines your designer set, including color choices and when to use which version.
DOES MY WEBSITE HAVE TO MATCH MY LOGO?
Hmm, interesting question. Is it really the logo that we’re matching here?
No, not quite.
Your logo is part of the visual expression of your brand strategy. And your website takes that expression even further.
So in that sense, of course, they’ll coordinate and present your visitors with a cohesive look and feel.
But you’re not taking your logo and going, “ooh, let me build a website that matches it” – that would be silly. Because your website is not for your logo.
It’s for your business and for your audience.
And there you have it – five simple ways to turn a generic website into one that perfectly matches your brand.
Don’t settle for settings your theme or template has as default.
Instead, put in your logos, add your color palette, set your fonts, bring in your images, and make sure to showcase your copy.
This is exactly what I do when I create websites for my clients. So if you feel like you could use the “easy” button and have somebody do yours for you, click the button below to check out my services.
YOU’LL ALSO LOVE…
- Before you change your brand colors, do this first
- How to create a brand mood board for your business
- Easy tips for writing blog posts your readers will want to read
- How to choose a brand designer who really gets you
- Don't make these common branding mistakes – solopreneur edition
- Yes, your business really needs a website (and here's why)