Logo web design

What you should consider when designing a logo for a website

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 designers often focus on print, designing business stationery, 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. It is not clear to the end customer who can do what and perhaps who should not do what. Then graphic designers who are more at home in print create designs for websites - and put print logos on 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 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 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, this 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 clients, but also designers, feel the sometimes irresistible inclination to place a claim under the logo. Text in the picture, in other words. That makes little sense. It's not only a question of space, but also hardly legible on smartphones. Not to mention that it excludes valuable text from Google indexing (SEO).

I realise that these three simple "rules" for creating a good logo are open to debate. 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.

weblogos logo design
Logo design is more diverse than ever.

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, 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 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.

"*" indicates required fields

Consent*
This field is for validation and should not be changed.

Examples with logo in landscape format

Raidboxes is an interesting example of logo design. A word mark, in landscape format of course - otherwise you can't read it. I call this logo successful. Because it has a high recognition value, which is the essence of a good logo. Moreover, it also works in small format on mobile devices. This applies to many sites on the modern internet, such as Google, Facebook, Amazon, Microsoft, YouTube and many more.

Raidboxes logo logo design
The logo of Raidboxes: Logo design

We can say the same about the siteWordPress.org say. There are specifications for the presentation 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 on edge. 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 website's usability.

Our Raidboxes relaunch

New logo, new website, new colours - same name. We are celebrating our relaunch at Raidboxes ! Together with our partner agency 360Vier, we have rethought our corporate identity and given our website a new coat of paint.

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 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 blurred.

The same phenomenon can be observed at SPIEGEL Online (SPON). For both, the excuse can be 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 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 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 to do 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:

Online Logo Example
The logo of PUBLIZIEREN IM NETZ

Logo design: Research tools

This is exactly how I proceed for my clients. If logo design is desired, I suggest first choosing a signet that fits the business idea and the 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 show them to the client, choose one or two together with him and 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 easy. You need a clear concept and an excellent 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 already 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 represent. But 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" 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 have fun.

Your questions about logo design

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

Did you like the article?

Your rating helps us improve our future content.

Post a comment

Your email address will not be published.