By Jude Wharton

Jude is one of the co-founders of Ready Steady Websites^® and has been running a successful web design company, 2nd Floor Designs Ltd with her husband, Chris since 2010. 

There have been many, many times when I have been looking through Facebook and I have seen someone post an image of their new business logo asking people what they think of it. Sometimes it’s OK, occasionally it’s really good but unfortunately, more often than not it’s really bad. I don’t just mean that it doesn’t meet my taste or design standards, I mean it just won’t work in most of the formats that it will need to work in.

Logo design isn’t just using Canva* to stick a pretty picture on a wishy-washy color background with your company name in a swirly script font underneath. Logo design should be considered and formatted properly for all eventualities for when your logo may be needed, including for use on your website. Here are some top tips to help you get your logo and brand right for the web.

Consider whether you want a logo mark and text which could be separated.

If you create a logo where everything is overlapping, or your logo is just words with some pretty bits around it then it isn’t easy for you to have a separate small logo mark. If you have a logo where an image and words can be easily separated, then it is more versatile. A really good and well-known example of a logo that can be easily separated is Mastercard’s logo. 

As you can see, it has the overlapping circles which can be used as a logo mark in their own right with their company name underneath. The circles are often used on their own and straight away most of us can identify the company just from the logo mark. You might be wondering why a logo mark is important when it comes to your website. Well, one little thing that having a logo mark is useful for is for the fav icon on your website. The fav icon is the little logo that is shown on the tabs of your web browser. They make it easier for the website visitor to re-find the tab of your website once they have it open. As you can see from this screenshot, when the logo is simple it looks nice and clear and identifiable even at this small size. 

You never know, it might be just this that makes someone remember your website when they return to their computer and that might be the time they buy from you! It is worth getting every detail right.

Consider how well your logo works in different sizes.

I have just mentioned how useful it could be to have a simple logo mark that can be very small but it is worth looking at how your logo looks as a whole in different sizes. Consider all the ways it might be used. It could be very large on a pull-up display banner or on a shop sign. It could be small on a flyer or business card or on the header of your website and it needs to be readable at this size.

Now, if you do decide to have a separate logo mark it could be this that you use on your website header, but if the name of your company conveys what you do then it would work nicely to have the full logo in the header so that people know exactly what you do as soon as they see your website.

You don’t want the logo to be too big in the header for a number of reasons.

• Firstly, it won’t look good.
• Secondly, you are taking away header space from your website navigation or menu as it’s also called.
• Thirdly, if someone is looking at your website on a mobile device you don’t want most of their screen being taken up by your logo and them having to scroll before they can see anything of your actual website.

There is a term in web design called “the fold”. When websites are designed you should consider what the website visitor will see above “the fold”, which is the amount of screen they can see before they have to scroll. The theory is that you need to engage your website visitors with what they see immediately so that they want to scroll and see more. So, don’t take up all of your above “the fold” space with a giant logo.

• 12 expert designers share their best web design tips

Is the font you have chosen actually readable?

There seems to be no denying it, script fonts are big at the moment. By that I mean, they are in fashion and everywhere. Ironically the font size often does have to be big to be able to actually read some of them and as I have said above, you don’t want to have to make everything big on your website so that it’s legible. 

When selecting a font for your brand it needs to reflect you, more importantly than that it has to attract your ideal client and even more important than that it has to be clear and easy to read. When someone comes across your website, leaflet, Facebook ad, etc. you want them to look at it and go, “Oh, so they do that. I might check them out.”. You don’t want them to go, “What does that say? Is that an ‘f’ on an ‘s’?”.

We live in a world now where if you don’t grab someone’s attention and get your message across straight away then they have moved on. Also, if someone can’t even work out what your logo says then they may feel you haven’t paid enough attention to it and perhaps that reflects on the service they would get from your business.

Consider whether your logo would work in greyscale or single colour.

This may not seem like a website related tip but it is. A lot of the time now entrepreneurs and small business owners are offering free downloads, which are printable, to encourage people to get to know them and their work better and ultimately become paying clients.

If you are creating these downloads they will be branded, or at least they should be. If someone prints them off, finds them really useful and shows them to their friends they are giving you some free advertising if your branding is on them. More often than not, when those downloads are printed, they will be printed in black and white. Your logo still needs to look good in that format.

If you have gone for the pretty picture, over wishy-washy colors created in Canva* that I mentioned at the start, then when printed out on a home office computer it might end up looking, best case: unclear, worst case: just a splodge. If you have had your logo created by a designer, ask them for greyscale or single color version to use in these situations, then you know it will print out nicely.

Have a version of your logo with a transparent background.

It is a real bugbear of mine when I go to a website and the website header has a lovely background color and the company logo is surrounded by a white box because the logo has a white background.

If you have had your logo created by a professional, ask for a version that has a transparent background. If you have created your logo yourself and you are sure you have considered all my other tips, make sure that you save your logo out as a PNG file with a transparent background.

Make Sure Text is Actually Text

We see it a lot that people get lovely, branded graphics created for their social media accounts and then they use the same graphics on their website as header images or to accentuate key words. This is great from a consistency point of view. Branding should be consistent across all your touchpoints with your target audience. It is not good from an SEO (Search Engine Optimisation) and accessibility point of view. This is because the text on these graphics isn’t actually text, it is part of the image. That means that Google and other search engines can’t see these headings and key words and text readers that might be being used by partially sighted or blind website visitors won’t be picking these words up either. You can still recreate the same look on your website using the original images that were used to create the graphic in the first place and putting actual text over them. Any decent web designer would be able to achieve this which leads me on to my next tip.

Sometimes it is Worth Using Professionals

I know how tempting it is to try and do everything yourself when you are starting out in business. Your income might not be great yet and budgets are tight but sometimes it is worth getting someone to do it right. Otherwise, you are wasting time on something that won’t really be good enough anyway and won’t convey the professional image you would like it to. Sometimes the old adage you need to spend money to make money is true. Getting your branding and website right from the start could make a big difference to the number of customers you convert. It could also mean you are only investing money once. 

Plan for The Future

We have so many clients who came to us for their second website because they did their first one themselves or on the cheap and it was too limited and doesn’t do what they needed it to anymore. A good website built on the right content management system should be able to be easily updated by the website owner and be able to be added to and grow with the business. 

When you are planning your brand and your website don’t just think about what you need it to do now, think about where you see your business in one, two and even three years’ time. You work from home now but actually, you would like an office with a shop front with your logo on it in two to three years’ time, so your logo will need to work for that. You just want a basic online shop for your website now but actually in six months you plan to start a blog and in two years you would like to have a team and be able to offer workshops that people will book via the website. Make sure you choose a method for creating your website that will grow and do all of that.

Branding for Web Checklist

If you would like to make sure you have got your branding right, then we have a free checklist to help you. Obviously it’s in the form of a free printable download and our logo is on it, in black and white! ☺

* I don’t have a problem with Canva for creating flyers/posters/social media graphics and other publicity material, but it isn’t a replacement for a designer in my opinion.