What You Should Keep in Mind When Designing Logos for Websites

Mark Max Henckel Updated on 21.10.2020
9 Min.
Logo Webdesign
Last updated on 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 equipment, posters, advertisements and logos. Web designers, on the other hand, design websites, newsletters, banners and of course logos. Some mix up both business areas, offering design for print AND web. Whereby it is not apparent to the end customer who can and perhaps should not do what. Graphic designers who are more at home in print then create designs for websites - and bring print logos to the web. Conversely, it is rather the exception that web designers develop entire business equipment.

It should make sense to anyone with a "graphic eye" or a graphic profession that a logo on a website has different requirements than one on letterhead 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 concrete - but also more stringent. It's not that complicated in the end. And yet it takes a lot of experience and aplomb to develop a good logo for a website.

Three guidelines for creating a web logo

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

  1. Landscape format: The logo appears in the upper left corner, as users expect. Sometimes it is also allowed in the middle of the website. But in order to save valuable space and to focus the user's attention on 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 site .
  2. Clear structures: It is very important to consider the logo size on a smartphone or tablet. But also many desktops and laptops have either a very high resolution, thus a lot of space, or a rather small screen diagonal. In both cases the logo may appear quite small. But it must still work well even in small sizes.
  3. No claims: Many customers but also designers feel the sometimes irresistible inclination to place a claim under the logo. Text in the image. That makes little sense. It is not only a question of space, but also hardly readable on smartphones. Quite apart from the fact that this means that valuable text from Google Indexing (SEO) is excluded.

I realize that these three simple "rules" for creating a logo are debatable. Because of course you will find some counter examples or brands that more or less have (want) their own rules. But these are then 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 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 come from a time when there was no Internet. Logos, however, evolve over time, as do brands and companies.

weblogos

Ideally, there are logos that are adapted for the different output formats. The favourite logos just mentioned are also shining examples of this. 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 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 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 signet like PLAYBOY, SHELL and MERCEDES. But mostly 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 exists with the name writing and with the claim (I'm lovin'it), but the M is always there. On the Website of McDonalds for the reasons mentioned above, it has been solved in such a way that you will find only this M in the top left of the navigation - and the navigation will retract when scrolling. Only the M is still there one day. 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 Website of the WWF to take an example from the more politically correct area. The famous panda bear, which could also stand on its own, is placed above the letter WWF, the abbreviation of the World Wildlife Fund. I think the website is quite good (TYPO3, by the way), but you don't nail down the main navigation. This is cleverly solved. Although it needs some space, it contains all the essentials.

Thanks to the mega-menu technology, the second level of navigation shows everything that is available on the site first level. If you call up the mega menu by mouseover, only the panda remains visible. It may be a vertical logo, but its implementation is very good. This logo also comes from a time when there were no websites. I'm sure the WWF would have had 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 can't 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 Klein on mobile devices. This is true for many of sites the modern internet, like Google, Facebook, Amazon, Microsoft, YouTube and many more.

RAIDBOXES  logo
The logo of RAIDBOXES

The same can be said about the site WordPress.org say. There are for everyone understandable specifications for the display of the WordPress logo: 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 vertical logo is of course not used. For good reasons, the logo with signet is not only shown in landscape format, but also relatively large above the navigation. Here too, the menu is not fixed, which the Usability in the website does not abort.

Examples of sites 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 Klein, where we expect it. This is a general challenge with word marks that have to be scaled down on the website. The edges "fray" out and become blurred. At MIRROR Online (SPON) the same phenomenon can be observed. For both of them, the excuse may be that the logos were created before the Internet age. We see the same as with VOGUE in the American TIME magazinethat's going underWordPress .

The situation is somewhat different with open NASA also from WordPress driven and also with a logotype. But surrounded by a fine graphic element. This logo - this time within a fixed navigation system - is large enough to show the element of an orbit still recognizable. I think it is successful, although you can see the fraying of the letters here as well. Therefore I am not a friend of pure word marks, I prefer signs with abbreviations.

BBC AMERICA is also a WordPress site . She has brilliantly solved 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 logos in landscape format. By the way, this website also dispenses with a fixed navigation after scrolling - here, the content is in the foreground.

Creating a good logo for the web

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

Graphic design or not: With your graphically trained eye and a few simple rules you can create a good logo for you and your customers. Of course: The easiest way would be to hire a graphic designer. Although this is the safest and guaranteed way, it is also the highest quality way - exceptions prove the rule. But it is also the most expensive variant. In the net, we suspect, 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 the Ukraine, India, Indonesia, South America, but also from the USA etc. The disadvantages are the legal situation in case of disputes, communication and therefore sometimes also voting.

Since I have a graphic eye myself and want to do as much as possible by myself, I have designed my logo on PUBLISHING ON THE NET took a different path. I searched and found a sign at Envato. I thought I would be able to build a logotype for it. Because the signet I liked had the wrong content. It is essential that a logo fits the object 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 myself - but I have too little experience with vectors in Illustrator. So I quickly asked the developer of the signet via Envato if he could do this 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:

Online Logo Example
The logo of PUBLISHING ON THE NET

Tools for research

This is exactly how I proceed for my customers. If logo design is desired, I suggest that you first select a signet that fits the business idea and name. I don't just use Envato or Envato Elements. I also look at Google for logos, or at Iconfinder, iStockPhoto and other providers of small graphics. Then I show them to the customer, select 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 any existing one. Even if you buy signets, you must have the license checked: Does it apply to your professional purpose without any restrictions in terms of time and space? And also for use as a logo?

Good logos are simple and if possible express the business idea. 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

Creating a good logo is relatively simple. You need a clear concept and a very good idea. Inspiration comes from other successful brands and websites. Talking to your colleagues and friends can also help you come up with a 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 graphic platforms.

Of course, the more or less abstract signs should have something to do with the profession they stand for. Whereby there can also be funny combinations. Or consistent derivations, for example when we think of the famous apple from APPLE. Who would have thought to take an apple with a missing bite But this little funny "troublemaker" 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 with it.

Pictures: 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 blog posts on web design and Online Marketing? Then follow us on Twitter, Facebook , or subscribe to our newsletter.

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

Related articles

Comments on this article

Write a comment

Your email address will not be published. Required fields are marked with * .