Why should I hire a logo designer?

What to consider when designing a logo for a website

Last updated on October 21, 2020

Logos for websites follow completely different rules than are the case for print or other communication. The requirements for logos and signets have grown. We'll show you guidelines and tools for creating your web logo.

There is a very permeable boundary between web design and graphic design. Graphic designers often focus on print, designing office equipment, posters, advertisements and logos. Web designers, on the other hand, create websites, newsletters, banners and of course logos. Some mix both business areas, they offer design for print AND web. The end customer cannot see who can do what and who shouldn't. Then graphic designers who are more at home in print create designs for websites - and bring print logos online. Conversely, however, it is rather the exception that web designers develop entire business equipment.

It should be obvious to anyone with a “graphic eye” or a graphic profession that a logo on a website has different requirements than one on stationery or on a company building. With the advent of smartphones and the mobile internet, the requirements for logos and signets (these are small graphics that can be used for logos) on the web have changed and become more specific - but also tightened. In the end, it's not that complicated. And yet it takes a lot of experience and aplomb to develop a good logo for a website.

E-book: Do you manage 5, 50 or 500 WordPress projects?
How to optimize your WordPress management!

Three guidelines for creating a web logo

There are three main points to consider when designing a logo:

  1. Landscape format: The logo appears at the top left, as users expect. Sometimes it is also allowed in the middle of the website. But in order to save valuable space and draw the user's attention to the essentials, it makes sense to take people's general viewing habits into account - with a logo in landscape format at the top on the left.
  2. Clear structures: It is very important to consider the logo size on a smartphone or tablet. But many desktops and laptops either have a very high resolution, i.e. a lot of space, or a rather small screen diagonal. In both cases the logo can appear quite small. But it still has to work well even in small sizes.
  3. No claims: Many customers, but also designers, feel the sometimes irresistible tendency to place a claim under the logo. So text in the picture. That doesn't make much sense. It is not only a question of space, but also hardly readable on smartphones. Not to mention the fact that valuable text is excluded from Google indexing (SEO).

I understand that these three simple “rules” for creating a logo can be discussed. Because of course you will find some counter-examples or brands that (want) to have their own rules more or less. But these are very special, successful brands - and exceptions confirm the rule here too.

But what makes a successful logo? The best way to do this is to look at the logos and / or signets of successful and large companies. The most ingenious logos that I know are those from Daimler (the Mercedes star), Apple (with the apple), VW, BBC or the M from McDonalds. Of course there are many more examples. And most of them come from a time when there was no internet. However, logos evolve over time, as do brands and companies.

Ideally, there are logos that can be adapted for the various output formats. The favorite logos just mentioned are shining examples of this, too. They work everywhere and are adapted to the respective media with their specific requirements. Logical: a letterhead needs something different from a neon sign on a house, and a website has different conditions than a business card.

Signet & word mark online

This post is not a complete workshop on creating the perfect logo. This certainly involves more than reading a blog post. But it should help you to better understand the thing with the logo on your website - and to find more successful solutions based on it.

In a nutshell: what is a logo? Wikipedia says:

“A logo is a graphic symbol that represents a specific subject. This can be a company, an organization, a private person or a product. "

So far so good. A logo can be a word mark such as COCA COLA, GOOGLE or ACER. It can be a logo like PLAYBOY, SHELL and MERCEDES. Mostly, however, logos consist of a word mark AND a signet. In the above examples for signets there is always a variant with and without the word mark.

This also applies, for example, to McDonalds with the distinctive M that everyone knows. The McDonalds logo is available with the name and the claim (I´m lovin´it), but the M is always there. On the McDonalds website, for the reasons mentioned above, it was solved in such a way that you only find this M in the top left of the navigation - and the navigation retracts when scrolling. Only the M is still there at some point. I find this clever and space-saving, because the most important thing is always visible: the logo, the “M”.

Let's take a look at the logo on the WWF website to take an example from the more politically correct area. The famous panda bear, which could stand on its own, is placed above the letter WWF, the abbreviation for the World Wildlife Fund. I think the website is quite successful (TYPO3 by the way), but you do not need to nail down the main navigation. This is cleverly solved. It does take up some space, but it contains everything that is essential.

Thanks to the mega menu technology, everything that can be seen on the page is shown on the second level in the navigation. If you call up the mega menu by mouseover, only the panda remains visible. It is an upright logo, but its implementation is very good. This logo also comes from a time when there were no websites. I'm sure that the WWF would have a different logo created today - one in landscape format.

Examples with the logo in landscape format on the website

RAIDBOXES is of course an example. A word mark, of course in landscape format - otherwise you won't be able to read it. I describe this logo as successful. Because it has a high recognition value, which is the essence of a good logo. It also works in small on mobile devices. This applies to many pages of the modern Internet, such as Google, Facebook, Amazon, Microsoft, YouTube and many others.

We can say the same about the WordPress.org site. There are guidelines for the display of the WordPress logo that can be viewed by everyone: A style guide. The logo has the W as a signet and the word mark in landscape format, but also upright. The upright logo is of course not used on the website. For good reasons, the logo with the signet is not only shown horizontally, but also relatively large above the navigation. Here, too, the menu is not fixed, which does not affect the usability of the website.

Examples of pages with WordPress

Another fascinating website that serves as an example for us is VOGUE America. I find the implementation consistent and appropriate to the brand. But rather weak in the fixed navigation after scrolling. Because the large logotype in the middle disappears and appears in the upper left in small, where we expect it. This is a general challenge with word marks that have to be scaled down on the website. The edges “fray” and become blurred. The same phenomenon can be observed at SPIEGEL Online (SPON). For both, the excuse that the logos were created before the Internet age can be used. We see the same thing as with VOGUE with the American TIME magazine, which runs on WordPress.

It looks a little different at open NASA, also powered by WordPress and also with a logotype. However, it is surrounded by a fine graphic element. This logo - this time within a fixed navigation system - is large enough to clearly represent the element of an orbit. I think it's successful, although you can also see the fraying of the letters here. Therefore I am not a fan of pure word marks, I prefer signets with abbreviations.

BBC AMERICA is also a WordPress site. She solved the design as well as the logo brilliantly. Yes, I am a BBC fan. But I also find the logo ingenious and memorable - as a successful example of logos in landscape format. Incidentally, this website also dispenses with fixed navigation after scrolling - the focus here is on the content.

Create a good logo for the web

So you can now see very clearly that logos are not rocket science and sometimes very simple. They derive their ingenuity from the simplicity and consistency of reflecting an independent brand. A good logo is therefore very easy to produce, but not easy to think of or difficult to find.

Graphic design or not: you can use your graphically trained eye and a few simple rules to create a good logo for you and your customers. Of course: the easiest way would be to hire a graphic designer. This is the safest way and guarantees the highest quality - exceptions prove the rule. But it is also the most expensive variant. We suspect that there are portals on the Internet that outsource these services overseas. So you can buy good graphic design with high quality in countries with lower hourly wages. For example from Ukraine, India, Indonesia, South America, but also from the USA etc. The disadvantages are the legal situation in disputes, the communication and therefore sometimes also the coordination.

Since I have a graphic eye myself and want to do as much as possible myself, I took a different approach with my logo on PUBLISHING ON THE NET. I looked for and found a logo at Envato. I thought I would be able to build a logotype for it. Because the logo that I liked had the wrong content. A logo must definitely match the subject matter and character of your company. So I found an @ sign that I wanted to use, but with a “P” inside the @ circle. At first I tried it myself - but I have too little experience with vectors in Illustrator. So I asked the developer of the logo via Envato whether he could do it for me - and at what price. It was possible and the cost was absolutely reasonable. Now I have this “P” with the word mark in landscape format:

Research tools

This is exactly how I proceed for my customers. If a logo design is desired, I suggest first choosing a signet that matches the business idea and name. I don't just use Envato or Envato Elements. I also look for logos on Google, or Iconfinder, iStockPhoto and other providers of small graphics. Then I show these to the customer, choose one or two together with them and build a logo in landscape format.

Important: Pay attention to the copyright, your logo must not come too close to any existing one. Even if you buy signets, you have to (have) checked the license: Does it apply to your professional purpose without restriction in terms of time and space? And also for use as a logo?

Good logos are simple and express the business idea as much as possible. They work on the website because they are in landscape orientation. They can be displayed in black and white. And they can be displayed on letterhead or a business card - slightly changed and adapted, perhaps with a claim underneath.

Summary

Creating a good logo is relatively easy. You need a clear concept and a very good idea. You are inspired by other successful brands and websites. Talking to your colleagues and friends can also help you come up with one simple, brilliant idea. But let's be honest: it doesn't have to be brilliant, appropriate can be enough, good would be more than enough. You can search for logos or signets on graphics platforms.

Of course, the more or less abstract signs should have something to do with the profession for which they stand. There can also be funny combinations here. Or consistent deductions, for example when we think of the famous apple from APPLE. Who would have thought of taking an apple with a missing bite? But this funny little "disruptor" makes this logo so ingenious.

I hope you now have some clues to help you create a great next logo for the World Wide Web. I wish you good luck and have fun.

Images: Jeff Sheldon, Rohan Vijay

Do you have questions about logo design for websites? Feel free to use the comment function. Would you like to be informed about new articles on web design and online marketing? Then follow us on Twitter, Facebook or via our newsletter.