Logo design for websites follows completely different rules than is the case for print or other communication. The requirements for logos and signets have grown. We show you guidelines and tools for creating your web logo.

Logo design for print and web

There is a very permeable boundary between web design and graphic design. Graphic design often focuses on print, designing business stationery, posters, advertisements and logos. In web design, on the other hand, websites, newsletters, banners and, of course, logos are designed.

Some mix both business areas, offering design for print and web. It is not clear to the end customer who can and perhaps should not do what. Then graphic designers, who are more at home in print, create designs for websites - and bring print logos to the web. Conversely, it is rather the exception that web designers develop entire business stationery.

It should be obvious to anyone with a "graphic eye" or a graphic design 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 once again changed and become more specific - but also more stringent. In the end, it's not that complicated. And yet it takes some experience and aplomb to develop a good logo for a website.

3 Guidelines for creating a logo

There are three overriding points you can consider when designing your logo:

• Landscape format: The logo appears at the top left, which is what users expect. Sometimes it is also allowed in the middle of the website. But to save valuable space and draw users' 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 of the left-hand side site.
• Clear structures: It is essential to consider the logo size on a smartphone or tablet. But many desktops and laptops also have either a very high resolution, i.e. a lot of space, or a rather small image diagonal. In both cases, the logo can appear quite small. However, it must still work well in small sizes.
• No claims: Many feel the sometimes irresistible inclination to place a claim under the logo. Text in the picture. That makes little sense. Not only is it a question of space, it is also almost impossible to read on smartphones. Not to mention the fact that this excludes valuable text from Google indexing (SEO).

I realize that these three simple "rules" for creating a good logo can be debated. Because of course you can find some counter-examples or brands that more or less (want to) have their own rules. But these are then very special, successful brands - and exceptions prove the rule here too.

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

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

Signet & word mark on the web

This article is not a complete tutorial for creating a perfect logo. There is certainly more to it than reading a blog post. But it should help you to better understand the issue with the logo on your website – and to find more successful solutions for it.

Just a quick summary: What is a logo? Wikipedia says:

"A logo is a graphic sign that represents a specific subject. This can be a company, an organization, an individual, 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 signet, as in the case of Playboy, Shell and Mercedes. Mostly, however, logos consist of a word mark and a signet. In the above examples of signets, there is always a variant with and without the word mark.

This also applies to McDonalds, for example, with the distinctive M that everyone knows. The McDonalds logo is available with the name and with the claim (I'm lovin' it), but the M is always there. On the McDonalds website, for the reasons mentioned above, they have solved it in such a way that you will only find this M at the top left of the navigation - and the navigation moves in when you scroll. 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 signet, the "M".

Let's look at the logo on the WWF website, to take an example from the more politically correct realm. The famous panda bear, which could also stand on its own, is placed above the letters WWF, the abbreviation of the World Wildlife Fund. I think the website is quite successful (TYPO3, by the way), but they refrain from nailing down the main navigation. This is cleverly solved. It takes up a bit of space, but contains all the essentials.

Thanks to the Mega Menu technology, the second level of the navigation shows everything there is to see on the website. If you open the mega menu by mouseover, only the panda remains visible. It is a vertical logo, but its implementation is flawless. This logo also comes from a time when there were no websites. I am sure that the WWF would have a different logo created today - one in landscape format.

Examples of websites 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. This is because the large logotype in the center disappears and appears in Klein at the top left, where we expect it to be. This is a general challenge with wordmarks that need to be scaled down on the website. The edges "fray" and become blurry.

The same phenomenon can be observed at SPIEGEL Online (SPON). The excuse for both is that the logos were created before the Internet age. We see the same thing as with VOGUE at 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, surrounded by a fine graphic element. This logo - this time within a fixed navigation - is big enough to show the element of an orbit still recognizable. I find it successful, although you can see the fraying of the letters here as well. That's why I'm not a fan of pure wordmarks, I prefer signets with abbreviations.

BBC AMERICA is also a WordPress website. She has done a brilliant job with the design as well as the logo. Yes, I am a BBC fan. But I also find the logo ingenious and memorable - as a successful example of logo design in landscape format. By the way, this website also does without a fixed navigation after scrolling - here the content is in the foreground.

Creating a good logo for the web

So now you can see very clearly that logos are not witchcraft and sometimes very simple. They derive their genius from the simplicity and the consistency to reflect an independent brand. A good logo is therefore very easy to make, but not easy to think up or find.

Graphic design or not: you can create a good logo with your graphically trained eye and a few simple rules. Of course, the easiest way would be to hire someone in graphic design. This is the safest and guaranteed highest quality way - exceptions prove the rule. But it is also the most expensive option.

On the net, we guessed it, there are portals that outsource these services overseas. This way you can buy good graphic design in countries with lower hourly wages and high quality. For example, from the Ukraine, India, Indonesia, South America, but also from the USA, etc. The disadvantages are the legal situation in case of disputes. The disadvantages are the legal situation in case of 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 route with my logo on PUBLISHING ON THE NET. I looked for and found a signet at Envato. I thought I would succeed in building a logotype for it. Because the signet I liked had the wrong content. A logo absolutely has to fit the subject and the character of your company.

So I found an @ sign I wanted to use, but with a "P" in the @ circle. At first I tried my hand at it myself - but I have too little experience with vectors in Illustrator. So without further ado, I asked the developer of the sign via Envato if 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:

Logo design: Research tools

This is exactly how I proceed for my clients. If they want a logo design, I suggest that they first choose a logo that matches their business idea and name. I don't just use Envato or Envato Elements. I also look for logos on Google, or on Iconfinder, iStockPhoto and other providers of small graphics. Then I present them, we choose one or two together and I build a logo in landscape format.

Pay attention to copyright law, your logo must not be too close to any existing logo. Even if you buy signets, you have to check the licence (or have it checked): Is it valid for your professional purpose without temporal and spatial restrictions? 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 format. They can be displayed in black and white. And they can be displayed on a letterhead or business card - slightly modified and adapted, perhaps with a claim underneath.

Summary: Logo design for websites

Creating a good logo is relatively simple. You need a clear concept and an excellent idea. You can get inspiration from other successful brands and websites. Talking to others can also help you come up with a simple, brilliant idea. But let's be honest: it doesn't have to be brilliant, adequate 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 characters should have something to do with the profession for which they stand. Whereby there can also be funny combinations here. Or consistent derivations, for example when we think of Apple's famous apple. Who would have thought of taking an apple with a missing bite. But this little funny "disruptor" makes this logo so ingenious.

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