First, I would like to preface this by saying that we no longer design logos. We used to but it was a service that we sold at a loss and was never really one of our core skillsets. So, around 2017 we dropped it as a service and referred our clients in two different directions. Either to the low-end online logo development platforms or to high-end brand design agencies.
Cheap online platforms for logo development:
Logo design is a very difficult skillset. It requires a huge amount of marketplace knowledge and art skill. It is based on experience. Large parts of it are subjective. It is key to success. It has a long development process. The final result tends to be very simple and very often at the end you hear the phrase ‘well anyone could have made that’. Thus, it can be very hard to justify to someone who doesn’t have a history in marketing why a simple logo costs a thousand pounds up and why that is actually a very reasonable fee.
It is not surprising then that when provided with quotes from agencies most start-ups choose to budget logo development and go the cheap online route. However, these clients inevitably fall into the same short-sighted pitfalls. Almost every time we have sent clients down this route they have brought us their new logo and it is unsuitable and we have had to ‘have that talk’ where we educate the client about brand.
It is often a difficult discussion because:
- By that point they have already been through the logo design process and paid for it.
- Having chosen it their pride may be emotionally invested in the logo being used.
- It’s a bit presumptuous of us to avoid involvement and responsibility in the logo development process and then to judge the output of that process.
- Much of it seems entirely subjective to the inexperienced but in reality there are objective considerations.
- Clients are often in a hurry to proceed with launching their business and going back to redo the logo sets everything back.
To this end I have written this article in which I will strive to list the common errors, pitfalls and considerations that start-ups face when being the decision maker during the logo development process.
A basic introduction to Brand
Get it right first time because rebranding is very dangerous
The first thing to you have to understand is what is a logo and what is a brand.
A logo is a very simple and mundane thing. It a bit of stylised text or an icon that serves as a visual representation of your business.
A brand is an intangible asset. It’s everything that a client thinks and feels and knows about your business. For the purposes of this article, I am going to impose a rather artificial division on brand. Perceived value and attached value. These are artificial because the concept of brand is far too nebulous to be easily pinned, but they are useful devices to making my point so I hope you will forgive me.
Perceived value is what values your logo communicates to a new audience. What does your logo communicate to them? Does it say that you are fun, secure, established, serious, playful, exotic, quality, reliable, environmentally aware, macho, confident or affordable? Does is have synergy with anything else they know?
For example, I was once involved in branding a new organisation that wanted to appear as established, stable and secure but as it was a new organisation it was none of those things. My suggestion was that they take on the colours of an organisation steeped in history, whose permanence is unassailable, which everyone knows and which is so unrelated to them that the synergy would not be obvious. In this case I suggested the colours and proportions of the Royal Navy.
Having perceived values that match your clients’ needs will make business easier. They will immediately understand you and want you. In a crowded marketplace you will be the one that stands out and which they feel right about.
It is also worth noting that you cannot be all things to all people. You need to choose a very narrow message and not be the other things. Trying to be fun, professional and high quality at the same time will likely fail to communicate any and all of those values. You have to identify your buyers’ primary driver.
It is my opinion the primary goal of your logo development process is to express your brand values and NOT to express what it is your business does. If your logo doesn’t say anything about you, let alone the right thing about you, then it is not good enough.
Attached value is all the information that a buyer knows about you. It is their past experiences with you, what their friend said about you, it is how you market yourself, it is your advertising, how you engage with clients. It is the sum of every contact they have had with you.
The longer a business runs the more attached value it accrues. The longer your business runs the greater your reputation, the more repeat business and referrals you will get and the less dependent on cold calling and hard sales. And all that value is, for lack of a better analogy, saved to your logo.
Dangers of Rebranding
Thus, rebranding is one of the most dangerous things any business can do. It essentially dumps all the goodwill, reputation and awareness that your old brand had. You can lose all the hard work you put into building your business’s reputation overnight and have to start from scratch.
If you have a low quality logo made you may get caught in a Catch 22 where you don’t like your logo but can’t take the risk of changing it and that logo you thought was a cheap and temporary solution becomes a permanent handicap and in the long run becomes very expensive.
A quick explanation of brand guidelines
Larger established organisations have a document called their brand guidelines. It details in precise rules how their logo can be displayed. And as such it needs to anticipate the number of ways that the logo might want to be used. It tends to include:
- Between 2 and 5 logos of different variations. Usually at least one version on a white background and one version for use on a dark background. If the logo has text in it there might be variations of the logo with no text. If the logo is detailed it might include a simplified version for use in smaller spaces.
- Exact rules on the spacing required around the logo and on what colours it can be positioned. It might require that the empty space around the logo be at least 20% of the width of the logo. It might specify that the logo can be used on white, a specific shade of blue, and on black and no other colours.
Agencies take these documents very seriously. But the important thing to note here is that branding guidelines anticipate the use cases to which the logo needs to be used.
The document needs to anticipate use cases such as when:
- It needs to fit into a very small space.
- It needs to fit into social media profile images of varying dimensions and sizes.
- Printed on a billboard
- Printed onto a business card
The pitfalls of designing your logo
The smallest size your logo can be shown
The first limiter of how a logo can be displayed is the smallest bit of detailing in the logo. Screens have lower resolution than printed materials and they are made of pixels, which are literal squares of colour. When the detail becomes smaller than the pixel a computer resolves this by antialiasing. Which is a fancy way of saying that it takes all the colours that should appear in that pixel and divides them by their proportion of that pixel. Thus on the borders of detail we tend to get blurred details and incorrect colours.
Here is an example of how black text becomes grey when the size is reduced:
140px is the true size of the text and is solid black. As the font size becomes smaller the black gets antialiased into grey and by 10px there is not a single pixel of true black left.
This is especially grievous with logo straplines. They tend to have a very small font size and that font quickly loses coherence as it is reduced.
This is also an issue with logos that have fine detailing. Below is Sahar Millinery’s logo. It is an exceptionally gorgeous logo but see how it quickly the definition of the text and image is lost as we reduce it’s size.
Thus 290px by 300px is the lowest resolution we can display the logo without a noticeable degradation and so that is the size it is displayed on her website.
The logo’s ratio
Ratio is massively important in web design. It is the primary way that we, as web designers, approach visuals. Size will vary greatly depending on whether something is displayed in desktop, laptop, tablet or mobile. With some items larger in desktop and other items actually being larger in mobile.
This problem is exacerbated by two constricting factors:
- The finite amount of vertical space on a screen. Once you have accounted for the start bar, the browser header, the url bar, the favourited icons and maybe a download bar, a full HD screen of 1920px by 1080px with a ratio of 16:9 quickly becomes an area of 1920px by 900px with a ratio of almost 2:1. In that space we want to fit:
- The header of the site
- The brand proposition
- The primary conversion’s call to action
- The service proposition
- Some attractive visuals
- That’s not a lot of vertical space to fit quite a lot of items.
- The need for items to be attractively balanced.
- The need to clearly brand the site. The stronger the brand can be the better.
In web design we tend to have more horizontal space than vertical space and nowhere is this more true than in the logo. As the height is the constricting factor a logo that is landscape can actually be displayed with a far larger overall area than a portrait logo.
Below are two logos. Both are constrained by the need to fill a vertical space of only 62px. See how the landscape logo is actually much more prominent than the portrait one. The portrait logo is 25px wide and the wide one 310px wide and so its actually 12x larger.
The argument against portrait logos:
- Because of vertical space constraints they are displayed smaller.
- Its very hard to balance menus and other items against them horizontally. So such sites tend to look lopsided. Menus have their own constraints. The smaller the text is the more navigation options we can include there. A large logo demands a multi layered menu or a large font size or something else to counter balance it, and those may not be viable options.
- They often make the header so large that we have to sacrifice one of our key marketing areas from the first fold of the site. This is usually the service proposition.
- They remove so many layout options that most of our layout and marketing decisions are made for us, and these decisions are usually not the optimal ones.
Here are some examples of how such logos affected design:
Sturt & Company
The Sturt Logo is so detailed that we couldn’t fit it in the header without making it look lopsided. Thus we put a simplified logo in the header and sacrificed the primary graphical area of the homepage for the logo.
On the Sahar Millinery site we were able to counter balance the logo with many navigation options either side and we made the squareness of the logos a proportional theme throughout the site. We got away with this because luxury consumer marketing is more about visuals than text.
The Nobis Inc logo is so detailed and portrait that we made it the main feature of the homepage and on internal pages only the icon is displayed in the header.
23 Paul Street
On 23 Paul Street the logo had a central axis so we positioned the navigation options either side of it.
The Move Technology logo was both detailed and had a range of colours that would have poor contrast on most backgrounds. For this reason original designs had a yellow sky at the top of the main image, but the client wanted a blue site so we put a white square behind the logo to make it visible.
The axis of a logo
Logos have a principal line of alignment. This alignment also needs to be reflected in the rest of the design. Normally this alignment is a simple left, centre or right, but it can also vertical.
For example our own logo has a centre alignment. On our old website this resulted in us needing to display the logo balanced equally between the menu items. This meant that we needed equal items and item lengths each side of our logo.
However, this caused us growth issues. When we redesigned our site we found that our service offering had expanded so much that we didn’t have the horizontal space to put the menu items either side of our logo. The more items we had the harder it was to balance and the worse it looked. Either we had to reduce the font size and make the menu look awkwardly small next to the logo, or we had hide our market proposition in sub menus, or left align the logo. In the end we came up with a more elegant solution. We would rotate our logo and sacrifice the right hand side of the whole site to it and put an icon only logo in the main menu. This allowed us to reduce the menu high and font size and have a wide left aligned menu with plenty of space for expansion and to display our logo far larger and more prominently than it ever was on our old website.
However, we are a marketing agency and we are expected to be trendy so we can make more radical design decisions. This layout would not be appropriate for most of our clients.
So be aware that if the axis of your logo is clearly central you may have to have the menu either side of the log and that will mean you will have less menu items and unless you have a ecommerce or operational site with functional items such as shopping cart, etc you may have to have an even number of menu items, with matching widths.
Left and right hand axis are pretty much interchangeable. A right hand axis logo sometimes needs to be on the right hand side of a site, but often it can work on the left hand side too. Left aligned logos and right aligned menus are the most common layout in web design for two reasons:
- They are the most pragmatic and versatile. They allow the most space for menus grow and fill.
- When users first view a website they have a pretty predictable eye track pattern. They start in the top left, scan the menu horizontally to the top right, track back across the menu to their top left starting position and then track diagonally from top left to bottom right. This makes the top left the most powerful place to position anything on the site. Our most important visual is the brand so that’s where we like to put it. (n.b. please note that this pattern assumes that the user has grown up in a left to right text format. Our Arabic clients who read right to left do the same in mirror image.)
The colours of a logo
The colours of a logo set the rules for the colours of the site. We can sometimes cheat a little and take say, a bright cherry red from the logo and soften it down a few steps to a pastel red colour. We also can add in a complimentary colour. However by and large the colours in the logos are the colours you are stuck with in your marketing material. If its an ugly or childishly hue we still have to work with that colour scheme.
We generally try and be sparing with the key colours on a site. We tend to only use the most attention-grabbing colours either as blocks to draw the eye to a call to action, or as thin detailing.
Getting the right filetypes
There are many image file types and each have their particular area of speciality.
JPG or JPEG
These a flat images created by lots of square pixels and are universally usable and are generally smaller files. Their weakness is that they can’t have opacities or be scaled up without losing quality rapidly.
These are essentials the same as JPGs only they can have opacities. They also tend to have larger file sizes than JPGs.
PDFs are hard to generalise. They can have a lot of layered and complex information and as such their quality is really dependent on who made it. However, they can’t be embedded on a website so they would have to be converted before they can be used. They are universally openable but not universally editable.
Adobe Photoshop files tend to be large and layered. PSDs are files types used to edit and interact with graphics but need to be exported in another format before they can be used.
Adobe InDesign files are also used to edit and interact with graphics but AI supports vectors that can be scaled. That is that they don’t have square pixels but rather a list of directional and proportional commands. This means that you can use the same file with perfect quality on a small website or massive billboard. However, like with PSDs you needed the right software to interact with the files and they need to be converted before they can be used.
SVG files are vector based graphical files that can be embedded on websites and are generally the file type we like clients to provide us with.
Usually, you will be provided with a range of all of these file types. The AI or vector PDF file so you can create new artwork, an SVG that you can embed on the website and a couple of conveniently sized JPGs or PNGs that you can use easily.
If you have not been provided with a vector file such as an AI, SVG or PDF then you need to ask for one.
We can get JPGs converted to AI files but there is a cost attached which varies based on the quality of the original JPG and the complexity of the logo.
If you are going to manage your own budget logo development you need to remember:
- Landscape is always better
- Does it look good if displayed really small?
- Will the axis of the logo effect how it is positioned on the page?
- Do you have a version to display on light or dark background?
- Does the logo convey your brands values?
- Do the colours have synergy with your brand values?
- Have you been provided with an AI or PDF vector file?