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 (small graphics that can be used for logos) on the web have changed and become more specific - but also more stringent. In the end, it's not that complicated. And yet it takes a lot of experience and confidence to develop a good logo for a website.

3 Guidelines for creating a logo

There are three overarching points that you can consider when designing a 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 left of the page.
• Clear structures: It is essential to consider the logo size on a smartphone or tablet. However, many desktops and laptops also have either 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. However, it must still work well at 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 are open to debate. Of course, there are some counter-examples or brands that more or less (want to) have their own rules. But these are very special, successful brands - and here too, exceptions prove the rule.

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 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, 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 workshop on how to create a perfect logo. It certainly involves more than just reading a blog post. But it should help you to better understand the logo on your website - and to find more successful solutions as a result.

Just a brief 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, a private 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, like Playboy, Shell and Mercedes. In most cases, 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, for example, to McDonalds 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. For the reasons mentioned above, the McDonalds website has been designed so that you only see this M at the top left of the navigation - and the navigation retracts as 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 take a 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 the main navigation is not nailed down. This is a clever solution. It takes up a bit of space, but contains all the essentials.

Mega Menu technology shows everything there is to see on the website on the second level of the navigation. If you call up the mega menu with a mouseover, only the panda remains visible. It may be an upright 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 at the top left in small, where we expect it. This is a general challenge with wordmarks that have to be reduced in size on the website. The edges "fray" and become blurred.

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.

Things look a little different with 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 - is large enough to make the element of an orbit recognizable. I think it is successful, although you can also see the fraying of the letters here. That's why I'm not a fan of pure word marks, I prefer signets with abbreviations.

BBC AMERICA is also a WordPress website. She has done a brilliant job with the design and 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. Incidentally, this website also dispenses with fixed navigation after scrolling - the focus here is on the content.

Create a good logo for the web (or have one created)

So now you can see very clearly that logos are not witchcraft and are sometimes very simple. They derive their genius from their simplicity and the consistency with which they reflect an independent brand. A good logo is therefore very easy to create, but not easy to think up or difficult to 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.

There are portals on the Internet that outsource these services overseas. This allows you to 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 the event of disputes, communication and therefore sometimes 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 PUBLIZIEREN IM NETZ. I looked for and found a signet at Envato. I thought I would be able to build a logotype for it. Because the signet I liked had the wrong content. A logo has to fit the subject matter and character of your company.

So I found an @ sign that I wanted to use, but with a "P" in the @ circle. At first I tried to do it myself - but I don't have enough experience with vectors in Illustrator. So I asked the developer of the signet 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 wordmark in landscape format:

Logo design: Tools for research

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, your logo must not come too close to an existing one. Even if you buy signets, you must check the license (or have it checked): Does it apply to your professional purpose without restrictions in terms of time and territory? 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 stationery or a business card - slightly modified and adapted, perhaps with a claim underneath.

Summary: Logo design for websites

Creating a good logo is relatively easy. 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 signs should have something to do with the profession they represent. However, there can also be funny combinations here. Or consistent derivations, such as when we think of Apple's famous apple. Who would have thought of taking an apple with a missing bite? But this funny little "disruptor" is what 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 lots of fun.