You spent a lot of time and invested a lot of resources into getting your brand just right. You have established yourself a logo, and you want to make sure you are consistently using it wherever your brand lives. But on the web, this “old fashioned” logo could be hurting you rather than helping you.
Too many times when businesses are going through a rebranding effort you’ll see samples of different logo options in use on printed material. But what about in the digital space? It surprises me that nowadays designers are still showcasing new logo concepts on coffee mugs and t-shirts and not showing how it will be translated on the web. After all, digital is at the forefront of your marketing strategy, so why wouldn’t adapting your logo to this space be just as important?
(I don’t mean this in a way that makes your logo designer look bad, we just seriously need to pause for a moment and thing about the big picture and not just a one dimensional representation of your multi-dimensional brand.)
So what’s the problem with my logo you ask?
Think about the top of a website for just a moment. The majority of websites try to be as minimal as possible so that this space isn’t overwhelming the rest of the content on your site. While the navigation is important, we don’t need to take up 300px of height to accommodate a vertical logo, and we shouldn’t have to.
The best way to think of it is simply having your icon to the left or right of your text. However, if the only thing you have built your brand around is a logo that has an icon above two or three tiers of text, you’re going to loose some clarity on the web unless your header is just as tall as the next content block on your website. (Pro-Tip: In most cases we don’t recommend doing that.)The hardest style of a logo to accommodate is when you not only have a vertical logo, but you have a centered vertical logo. There is a time and a place for that style of logo, but it typically isn’t in the header of your website.
Tip: Limiting your variations of logos limits the flexibility of using your logo in different spaces, and this isn’t just for your website. The struggles will pop up when designing for other areas like social media platforms or digital advertisements. Having more flexibility by adding variations of your logo will actually benefit you in the long run.
No, actually you don’t. Taglines on a website live elsewhere, detached from your logo. I may sound like I have a bit of resentment here, but the truth of the matter is taglines on logos in the digital space are just not meant for the header of your website. If you’re trying to work within these requirements, 99% of the time you’ll struggle to even read the tagline. As a result you end up having to make the logo double or triple the size that is recommended.
It’s not to say there isn’t a place for a logo with a tagline on the web. I’ve seen this work most commonly when you have a splash screen or a hero banner with a background video playing and the forefront of the piece is your beautiful logo — with enough room to be bold and incorporate smaller typography. But think of how those spaces transform when you scroll. You’ll notice elements go missing from that logo so it can sit in a much smaller area, and one of the first things to go is the tagline. Your tagline is your messaging anyway, so you’ll want to have that as readable text on the page anyway, not stuck in a graphic, but that’s an entirely different subject.
You’re reading this and probably thinking, “why wouldn’t I just be able to use the same logo on desktop designs and mobile designs?” The answer is a little more complex than you think. You’re at the point where you’ve incorporated the two above logo concerns into your brand, and you have a horizontal logo and you got rid of that tagline, but the problem is you still want to keep that logo on mobile.
With that in mind cut that 480px in half and subtract the room for your padding and margins. You’re really only working with a small amount of space here. Basically you are a tiny step above an icon at this point, and even though you’ve created a logo flexible for a “small space” on a large screen, it still needs to get smaller on your phone.
Most of the concern with manipulating your logo for the web is that it won’t be recognizable, but that is why it is essential to establish these pieces of your brand from the beginning.
Recognition is important but the purpose of your site isn’t to smash a giant logo in my face. We need to move on from that quickly to establish the more important things users are looking for. The who, what, when, why and how’s of your business. So take a moment to think about how you should weigh your logo among all of those elements, and I bet you’ll start sketching a way to make that logo of yours fit into a much smaller area than you are now.
HWL Creative can help you organize your brand, and make sure it's consistent and legible across a variety of platforms. Get in touch today!