Welcome back to the 3rd post in our series of bitesized digital marketing guides. Over the next few weeks, we’re taking some of the key concepts of digital marketing and turning them into small, jargon-free guides that you can read in about ten minutes!
This week we thought it would be a great time to talk about online branding. Chances are, if you’re an established business you already have some elements of branding. However, there are a bunch of really common mistakes businesses make when taking their brand online.
Let’s start from the very top!
What is branding?
We’re sure most businesses know what branding is, but let’s get an official definition going. According to the American Marketing Association, branding is:
“A brand is a name, term, design, symbol, or any other feature that identifies one seller’s good or service as distinct from those of other sellers”
Most businesses have a logo and a set of colours they use at the very least, but when they head online, they’re often left flummoxed. That’s because it’s really tempting to play with a whole bunch of new colours and fonts when you are new to design.
Other businesses may feel a bit stumped moving their brand online as their branding was created without any original intention of going online. This can cause a few problems that we’ll discuss later.
Taking Your Branding Online
Whether you’ve started your online presence or not, let’s take a moment to get our branding set in stone. There are a few key guidelines when it comes to branding in general, so let’s consider those first:
- Brands should choose between 1 – 3 fonts to use across all of their branding, but remember this can include variations in style such as bold, italic and letter spacing.
- Brands should choose up to three main colours according to 99Designs; generally consisting of a base, and accent and a neutral. Many brands do work with more colours than this, but we’ll discuss that in more detail next.
- Many brands also choose a tagline.
Of course there are many more rules for branding, but today we’re looking at online branding, so let’s consider some more specific parameters we should be thinking of online:
Taking Your Logo Online
Ever heard of dark mode? It’s an incredibly popular mobile screen setting that allows users to change most screen colours to darker hues. It’s generally gentler on the eyes at night.
Aside from the popularity of that, there are plenty of situations where you’ll need to place your logo on either a light or a dark background.
Some logos may work well on both, but commonly brands will have two logos for these exact situations. Take a look at AO’s logo below, it’s a very simple change, but it’s effective at ensuring the logo stands out on a variety of backgrounds:
Your logo on mobile and apps
Another important consideration for your online logo design is that most internet users now use mobile or apps to navigate the internet or interact with brands. This generally means you have a smaller, squarer space to work with.
This is also true for profile pictures on social media sites. They will more often than not give you a square or circle space for your logo, meaning you’ll need to adapt for that.
You don’t need to switch to a smaller logo all round, but you could ask a designer to make you a smaller logo which is complimentary to your main logo.
And of course, if your logo needs to be smaller for mobile devices, it’s also worth considering how readable it will be when displayed at a smaller size. If your logo uses a thin font or contains a lot of detail, it may become blurry and difficult to read when smaller.
Using Colours Online
Have you heard of hex codes? If you haven’t, you’re about to.
A hex code is a hexidecimal way of representing a colour. Allow me to remove the jargon there – it’s a way of recording an exact colour using a number.
Hex codes represent how much red, green and blue there is in a colour, and they make it really easy to represent colours consistently online. They are a really fundamental part of web design and digital colour.
They’re important if you’re taking your brand online, because you want to be sure that you’re always consistently using the same colours. This is especially important if multiple people are working with your brand online – with a hex code, they can simply look up the exact colour to use.
When you’ve decided which colours you’re using online, make sure you write down the hex codes in your branding guide and share them throughout the business.
Here’s ours, as an example:
When it comes to the web, you’ll want to ensure your brand has some colours that ‘pop’ against the others, as these are really good for drawing the eye to calls to action, such as buttons on your website.
Like this:
Using Fonts Online
As we mentioned before, it’s a rule of thumb that you should use 1-3 fonts for your brand.
Another great rule that will help your branding look really professional, is to use contrasting fonts. This may be:
- Serif vs. Sans-Serif
- Formal vs. fancy
- Block letters vs. handwritten styles
- Standard vs. italic
Get creative and play around with fonts, but remember that you’ll need to have a licence for any fonts you use online for business use. Google Fonts is a fantastic source of free fonts.
It’s also important to ensure your font is generally available online. You can install new fonts to your website, but if you’re using a website builder, you may only have google fonts available to you.
We’ve all fallen prey to picking kooky and ‘cute’ fonts, but for the most part, it’s more important that your font is readable and clear. Check out this example:
The example on the left is clear, easy to read, and only uses two fonts. The paragraph and the title font are the same, but utilise different stylings. It’s easy on the eye and there’s no confusion.
The example on the right uses three fonts. It’d really difficult to read what the title says, and it clashes with the other fonts. There’s too much going on with lots of swirls and the paragraph text is jarring.
That said, many designers these days will push you towards very plain fonts, but if minimalism doesn’t suit your brand, get creative. You can find some beautiful fonts that are both decorative and readable!
—
At this point, we could go on and on about branding. A full branding document will also contain things like the types of pictures you should use, icons, the brand’s voice etc. However, since we’re keeping this guide bitesized, we’ve just focused on the fundamentals for now.
—
Tools To Build Your Brand Online
A pro marketeer or branding expert may prefer to use Photoshop or Illustrator to design and build your brand, but in the meantime and for smaller everyday tasks, you can utilise these incredible helpful online tools:
Canva
Canva is one of the most popular design tools on the internet, used by pros and beginners alike. It offers templates for thousands of different projects and lots of great tools to make design easy. The free version is quite useful, but at less than £10 a month, the pro version is indispensable.
Coolors
Coolors is great for choosing colour pallets. Simply hit the space bar and it will randomly generate a colour pallet, with hex codes too!
Colorzilla
Colorzilla is a fantastic add-on if you use Chrome or Firefox, it allows you to pick colours online and see exactly which hex code relates to them.
Font Joy
Font Joy allows you to randomly generate fonts together to see if they are complimentary. It’s a great tool to use until you gain your own artistic eye for these sort of things.
Google Fonts
Google Fonts is an incredible database of copyright-free fonts that you can use in your branding projects. Many online tools such as Canva and WordPress use Google Fonts as standard too, meaning it’s easy to import them into your projects and websites.
Have these guides sparked an interest in digital marketing for your business? Why not consider taking on an apprentice? They’ll be taught all this and more by our expert tutors, and until the 30th September 2021, you can also claim up to £4,000 in grants for every apprentice you take on. Interested in learning more?
