What You Should Keep in Mind When Designing Logos for Websites

Mark Max Henckel Last updated 21.10.2020
9 Min.
Logo web design
Last updated 21.10.2020

Logos for websites follow completely different design rules than those for print or other communication. The requirements for logos and signets have grown. We show you the most important 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 business stationery, posters, ads and logos. Web designers, on the other hand, design websites, newsletters, banners and, of course, logos. Some mix both business areas, they offer design for print AND web. Whereby for the end customer it is not recognizable who can and maybe should do what. Then graphic designers, who are more at home in print, create designs for websites - and put print logos on the web. On the other hand, it is rather the exception that web designers develop entire business designs.

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.

Three guidelines for creating a web logo

There are three overarching points you can consider when designing a logo:

  1. Landscape format: The logo appears at the top left, that's how users expect it. 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 .
  2. Clear structures: It is very important to consider the logo size on a smartphone or a tablet. But also many desktops and laptops have either a very high resolution, so a lot of space, or a rather small image diagonal. In both cases, the logo can appear quite small. However, it still needs to work well at small sizes.
  3. No claims: Many clients but also designers feel the sometimes irresistible inclination to place a claim under the logo. Text in the picture. This makes little sense. Not only is it a question of space, but it is also almost impossible to read on smartphones. Not to mention that this excludes valuable text from Google indexing (SEO).

I realize that these three simple "rules" for creating a logo are debatable. 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 as well.

But what makes successful logos? The best way to find out is to look at the logos and/or signets of successful and large companies. The most brilliant 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 do.

weblogos

Ideally, there are logos that are adapted for the different output formats. The favorite logos just mentioned are shining examples of this as well. They work everywhere and are adapted to the respective media with their specific requirements. Logical: A letterhead needs something different than a neon sign on a house, and a website has different conditions 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, such as PLAYBOY, SHELL and MERCEDES. But most of the time, 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. 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 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 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 well done (TYPO3, by the way), but they refrain from nailing down the main navigation. This is cleverly solved. It takes up some space, but contains all the essentials.

Through the mega menu technology, you show everything there is to see on the site 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 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, in landscape format of course - otherwise you wouldn't be able to read it. I call this logo a success. Because it has a high recognition value, which is the essence of a good logo. Moreover, it also works in small on mobile devices. This is true for many sites of the modern internet, such as Google, Facebook, Amazon, Microsoft, YouTube and many more.

RAIDBOXES logo
The logo of RAIDBOXES

We can say the same thing about site WordPress .org say. There are specifications for the display of the WordPress logo that are visible to everyone: a style guide. The logo has the W as a signet and the word mark in landscape format, but also upright. On the website, the upright logo is of course omitted. For good reasons, the logo with signet is not only shown landscape, but also relatively large above the navigation. Here, too, the menu is not fixed, which does not detract from the usability of the website.

Examples from sites with WordPress

Another fascinating website that serves as an example for us is VOGUE America. I think the implementation is consistent and appropriate for the brand. But rather weak in the fixed navigation after scrolling. Because the big logotype in the middle 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 with SPIEGEL Online (SPON). For both, the excuse can be that the logos were created before the Internet age. The same thing as with VOGUE can also be seen with the American TIME magazine, which runs at 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 WordPress site . 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 brilliant and memorable - as a successful example of logos 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 for yourself and your customers with your graphically trained eye and a few simple rules. Of course: The easiest way would be to hire a graphic designer. This is the safest and guaranteed highest quality way - exceptions prove the rule. But it is also the most expensive option. On the web, we guessed it, there are portals that outsource these services overseas. So you can buy good graphic design in countries with a lower hourly wage at high quality. For example, from Ukraine, India, Indonesia, South America, but also from the USA, etc. The disadvantages are the legal situation in case of disputes, the communication and therefore sometimes 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 searched 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'm not experienced enough 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 cost. It was possible and the cost was absolutely reasonable. Now I have this "P" with the word mark in landscape format:

Online Logo Example
The logo of PUBLIZIEREN IM NETZ

Research tools

This is exactly the same approach I take for my clients. If logo design is desired, I suggest first choosing a signet to match the business idea and name. I don't just use Envato or Envato Elements to do this. I also look on Google for logos, or on Iconfinder, iStockPhoto and other providers of small graphics. Then I show these to the client, choose one or two together with him and build a logo in landscape format.

Important: Pay attention to the copyright, your logo must not come too close to an existing one. Even if you buy signets, you have to check the license: Is it valid for your professional purpose without temporal and spatial restrictions? And also for the 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.

Conclusion

Creating a good logo is relatively easy. You need a clear concept and a very good idea. You can get inspiration from other successful brands and websites. Talking to your colleagues and friends can also help you come up with that one 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 graphic 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 the famous apple from 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 the best of luck and have fun with it.

Images: Jeff Sheldon, Rohan Vijay

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

Mark Max Henckel - Webdesigner from Hamburg. Trained media designer (print), working as web designer since 2000. First at mobile.de, since 2003 self-employed. From 2005 blogger on different topics on different own blogs. As a freelancer from 2007 and 2008 at SPIEGEL ONLINE, involved in the launch of einestages.de at the interface between programming and editing. Later at the SPIEGEL marketing company Quality Channel (Spiegel QC/Spiegel Media). Freelancer for libri.de and various graphic & IT agencies. Since 2008 specialized in WordPress .

Comments on this article

Post a comment

Your email address will not be published.