Website Logo Mistakes – And How to Avoid Them
- 6 min read
Website is the first place where your logo is presented to customers. It is the most critical place for your logo to be. By avoiding common logo mistakes, such as the logo appearing blurry, too small or too big, you can significantly elevate your brand awareness.
In this article, we will cover some common mistakes that you should avoid when you are applying your logo on your website.
Think about some of the websites you visit every day - Youtube, Google, Facebook, Netflix - you'll notice that every one of them has identical logo placement.
On all these websites the company's logo is in the top-left corner. It is also a clickable button that brings the user back to the homepage.
Left corner has become a standard logo placement design choice. Also, you have probably seen logos in two other places: centered and in the top right.
The popularity of logo displaying in the top-left corner has been the trademark placement since the dawn of the internet.
Reason for that because we automatically look to the top left corner when searching for the homepage button. Also, the majority of the world reads from left to right, so that same instinct kicks in when we are browsing a website.
Centered logos can hurt website navigation according to research by Nielsen Norman Group. Returning to site's landing page is six times harder when the logo is in the center of a page instead of the top-left corner.
They also found that users are 89% more likely to remember your brand if your logo is in the top-left corner on your website compared to the right.
Placing the logo in the center of the website is still fine, as long as your navigation is user-friendly and straightforward.
Too small or too big
In case your logo is too small, users visiting your site may not be able to distinguish your logo at a glance.
To avoid legibility problems, on the favicon and any small places try to use the version of the logo that consists of the symbol.
By standard rules of placement, the logo should be larger and more prominent than your navigation menu. You don't want users to navigate your website without acknowledging your brand.
Blended into websiteIn case your logo is similar to the rest of your website theme, it could get lost in the background. On the homepage for The Well of Alternative Medicine, the company logo is placed on two different backgrounds and is too large.
Readability is poor against a colored background.
Do not place your logo on the colored background where it doesn't stand out. You should use secondary colors for your website theme while logo should have a primary color in it.
Blurry logoQuality of your logo's image file should be appropriately optimized. If the image is not optimized logo may become pixelated when scaled.
In that case, your logo text won't be legible - which is a huge no-no.
It is good practice to test your logo for different sizes. To avoid blurry logos, you should use PNG file type instead of a JPEG.
InconsistencyNowadays, responsive design is a must-have if you want your business to be competitive on the market.
Users can visit your website from all sorts of devices: desktop computers, laptops, tablets, mobile phones.
Your website should be responsive for all devices and should maintain the quality and appearance of your logo on all of these devices.
It is essential to keep an eye on logo alignment, whether it's left justified or centered in the header.
ConclusionWhile your logo should always be visible in the header, consider putting it elsewhere on your site. You can reinforce your brand by placing the logo in the footer, or it could be a part of the checkout experience.
It is also good to incorporate your brand's colors in other areas of your website, like buttons, headlines or backgrounds.
Consistency is the key to online branding. Make sure your logo is visible, readable and consistent across all your website pages.
9 principles of Material Design
Material design is a design language created by Google in Summer 2014. It is made for Android to create better foundation for user interfaces. With features and natural motions, it mimics real-world objects.Although it primarily focuses on touch-based app design, it is also effective in web design. This article will cover some of the essential…
How to Conduct Web Design Review
Before launching any web design project, you might want to check with a review if everything is in order from the design aspect. There is a collective sense that design is a matter of taste and preferences. By that logic, you could color your website any way you like. That couldn’t be any further from…
Best practices for building a website mockup and prototype
Often, things we imagine in our heads that seem great regularly turn out to be bad ideas when we put them in the real world, such as a piece of paper or a computer screen. They say that the picture is worth a thousand words. What if this is not just a picture but a…
Favicon: How it Impacts Web Design
We can find icons everywhere in our everyday lives: from road signs, store logos, to our laptop keyboards. Images help us interpret information better. Since getting the right information as fast as possible is crucial when dealing with internet technologies, it’s no wonder that icons are an integral part of web design, as well.In this…