Waar je op moet letten bij het ontwerpen van een logo voor websites

Mark Max Henckel Laatst bijgewerkt op 21.10.2020
9 Min.
Logo webontwerp
Laatst bijgewerkt op 21.10.2020

Logo's voor websites volgen heel andere regels dan die voor drukwerk of andere communicatie. De eisen voor logo's en signetten zijn toegenomen. Wij tonen u richtlijnen en hulpmiddelen voor het maken van uw weblogo.

Er is een zeer doorlaatbare grens tussen webdesign en grafisch ontwerp. Grafisch ontwerpers richten zich vaak op drukwerk, het ontwerpen van briefpapier, posters, advertenties en logo's. Webdesigners daarentegen ontwerpen websites, nieuwsbrieven, banners en, natuurlijk, logo's. Sommigen mixen beide business areas, zij bieden ontwerp voor print EN web. Waarbij het voor de eindklant niet herkenbaar is wie wat kan en misschien moet doen. Vervolgens maken grafisch ontwerpers, die meer thuis zijn in drukwerk, ontwerpen voor websites - en zetten drukwerklogo's op het web. Aan de andere kant is het eerder uitzondering dat webdesigners volledige bedrijfsontwerpen ontwikkelen.

Voor iedereen met een "grafisch oog" of een grafisch ontwerpberoep zou het duidelijk moeten zijn dat aan een logo op een website andere eisen worden gesteld dan aan een logo op briefpapier of op een bedrijfsgebouw. Met de komst van smartphones en het mobiele internet zijn de eisen voor logo's en signets (dit zijn kleine afbeeldingen die voor logo's kunnen worden gebruikt) op het web opnieuw veranderd en specifieker - maar ook strenger - geworden. Uiteindelijk is het niet zo ingewikkeld. En toch vergt het enige ervaring en aplomb om een goed logo voor een website te ontwikkelen.

Drie richtlijnen voor het maken van een weblogo

Er zijn drie overkoepelende punten waarmee u rekening kunt houden bij het ontwerpen van een logo:

  1. Liggend formaat: het logo staat linksboven, zo verwachten gebruikers het. Soms is het ook toegestaan in het midden van de website. Maar om kostbare ruimte te besparen en de aandacht van de gebruikers op het essentiële te vestigen, is het zinvol rekening te houden met de algemene kijkgewoonten van mensen - met een logo in liggend formaat bovenaan aan de linkerkant.
  2. Duidelijke structuren: Het is heel belangrijk om rekening te houden met de logogrootte op een smartphone of een tablet. Maar ook veel desktops en laptops hebben ofwel een zeer hoge resolutie, dus veel ruimte, ofwel een vrij kleine beelddiagonaal. In beide gevallen kan het logo vrij klein lijken. Het moet echter nog steeds goed werken bij kleine afmetingen.
  3. Geen claims: Veel opdrachtgevers maar ook ontwerpers voelen de soms onweerstaanbare neiging om een claim onder het logo te plaatsen. Tekst op de foto. Dit heeft weinig zin. Niet alleen is het een kwestie van ruimte, maar het is ook bijna onmogelijk te lezen op smartphones. Om nog maar te zwijgen van het feit dat dit waardevolle tekst uitsluit van Google-indexering (SEO).

Ik besef dat deze drie eenvoudige "regels" voor het maken van een logo discutabel zijn. Want natuurlijk zijn er tegenvoorbeelden te vinden of merken die min of meer hun eigen regels (willen) hebben. Maar dit zijn dan wel heel bijzondere, succesvolle merken - en ook hier bewijzen de uitzonderingen de regel.

Maar wat maakt succesvolle logo's? De beste manier om daar achter te komen is te kijken naar de logo's en/of uithangborden van succesvolle en grote bedrijven. De meest briljante logo's die ik ken zijn die van Daimler (de Mercedes-ster), Apple (met de appel), VW, BBC of de M van McDonalds. Natuurlijk zijn er nog veel meer voorbeelden. En de meeste dateren uit een tijd dat er nog geen internet was. Logo's evolueren echter met de tijd, net zoals merken en bedrijven dat doen.

weblogos

Idealiter zijn er logo's die zijn aangepast voor de verschillende outputformaten. De favoriete logo's die zojuist werden genoemd, zijn daar ook lichtende voorbeelden van. Zij werken overal en zijn aangepast aan de respectieve media met hun specifieke vereisten. Logisch: een briefhoofd heeft iets anders nodig dan een neonbord op een huis, en een website heeft andere voorwaarden dan een visitekaartje.

Signet & woordmerk op het net

Deze post is geen complete workshop over hoe je een perfect logo maakt. Er is zeker meer aan de hand dan het lezen van een blogbericht. Maar het zou u moeten helpen om de kwestie met het logo op uw website beter te begrijpen - en er daardoor succesvollere oplossingen voor te vinden.

Even een korte samenvatting: Wat is een logo? Wikipedia zegt:

"Een logo is een grafisch teken dat een specifiek onderwerp vertegenwoordigt. Dit kan een bedrijf, een organisatie, een individu of een product zijn."

Tot nu toe gaat alles goed. Een logo kan een woordmerk zijn, zoals COCA COLA, GOOGLE of ACER. Het kan een zegel zijn, zoals PLAYBOY, SHELL en MERCEDES. Maar meestal bestaan logo's uit een woordmerk EN een zegel. In de bovenstaande voorbeelden van signetten is er altijd een variant met en zonder het woordmerk.

Dit geldt bijvoorbeeld ook voor McDonalds met de kenmerkende M die iedereen kent. Het McDonalds logo is beschikbaar met de naam en met de claim (I'm lovin' it), maar de M is er altijd. Op de website van McDonalds hebben ze het, om bovengenoemde redenen, zo opgelost dat u deze M alleen linksboven in de navigatie aantreft - en de navigatie schuift op naarmate u scrollt. Alleen de M is er nog steeds op een bepaald punt. Ik vind dit slim en ruimtebesparend, omdat het belangrijkste altijd zichtbaar is: het zegel, de "M".

Laten we eens kijken naar het logo op de website van het WWF, om een voorbeeld te nemen uit de meer politiek correcte wereld. De beroemde pandabeer, die ook op zichzelf zou kunnen staan, is geplaatst boven de letters WWF, de afkorting van het Wereld Natuur Fonds. Ik vind dat de website best goed in elkaar zit (TYPO3, trouwens), maar ze hebben de hoofdnavigatie niet goed uitgewerkt. Dit is slim opgelost. Het neemt wat ruimte in, maar bevat al het essentiële.

Met de megamenu-technologie toont u alles wat er op de pagina te zien is op het tweede niveau in de navigatie. Als je het mega menu oproept met mouseover, blijft alleen de panda zichtbaar. Het is een portret logo, maar de uitvoering is erg goed. Dit logo stamt ook uit een tijd dat er nog geen websites waren. Ik ben er zeker van dat WWF vandaag een ander logo zou laten maken - één in liggend formaat.

Voorbeelden met het logo in liggend formaat op de website

RAIDBOXES is natuurlijk een voorbeeld. Een woordmarkering, in liggend formaat natuurlijk - anders zou je het niet kunnen lezen. Ik noem dit logo een succes. Omdat het een hoge herkenningswaarde heeft, wat de essentie is van een goed logo. Bovendien werkt het ook in het klein op mobiele toestellen. Dit geldt voor veel sites op het moderne internet, zoals Google, Facebook, Amazon, Microsoft, YouTube en nog veel meer.

RAIDBOXES logo
Het logo van RAIDBOXES

We kunnen hetzelfde zeggen WordPress .org over de site. Er zijn specificaties voor de weergave van het WordPress -logo die voor iedereen zichtbaar zijn: een stijlgids. Het logo heeft de W als een zegel en het woordmerk in liggend formaat, maar ook rechtop. Op de website is het rechtopstaande logo uiteraard weggelaten. Om goede redenen wordt het logo met zegel niet alleen liggend getoond, maar ook relatief groot boven de navigatie. Ook hier is het menu niet vast, wat geen afbreuk doet aan de bruikbaarheid van de website.

Voorbeelden van pagina's met WordPress

Een andere fascinerende website die als voorbeeld voor ons dient, is VOGUE America. Ik denk dat de uitvoering consistent is en past bij het merk. Maar nogal zwak in de vaste navigatie na het scrollen. Want het grote logotype in het midden verdwijnt en verschijnt in Klein linksboven, waar we het verwachten. Dit is een algemene uitdaging met woordmerken die op de website moeten worden verkleind. De randen "rafelen" en worden wazig. Hetzelfde verschijnsel kan worden waargenomen bij SPIEGEL Online (SPON). Voor beide kan het excuus zijn dat de logo's vóór het internettijdperk zijn gemaakt. Hetzelfde als bij VOGUE zien we ook bij het Amerikaanse TIME magazine, dat op WordPress staat.

Het ziet er een beetje anders uit bij open NASA, ook aangedreven door WordPress en ook met een logotype. Echter, omgeven door een mooi grafisch element. Dit logo - dit keer binnen een vaste navigatie - is groot genoeg om het element van een baan nog herkenbaar weer te geven. Ik vind het geslaagd, hoewel je hier ook het rafelen van de letters ziet. Daarom ben ik geen fan van zuivere woordmerken, ik geef de voorkeur aan signetten met afkortingen.

BBC AMERICA is ook een WordPress site. Ze heeft schitterend werk geleverd met zowel het ontwerp als het logo. Ja, ik ben een BBC fan. Maar ik vind het logo ook briljant en gedenkwaardig - als een geslaagd voorbeeld van logo's in liggend formaat. Overigens doet deze website het ook zonder een vaste navigatie na het scrollen - hier staat de inhoud op de voorgrond.

Een goed logo voor het web maken (laten maken)

Nu kunt u dus heel duidelijk zien dat logo's geen toverij zijn en soms heel eenvoudig. Ze ontlenen hun genialiteit aan de eenvoud en de consistentie om een onafhankelijk merk te weerspiegelen. Een goed logo is dus heel gemakkelijk te maken, maar niet gemakkelijk te bedenken of te vinden.

Grafisch ontwerp of niet: u kunt een goed logo voor uzelf en uw klanten maken met uw grafisch getrainde oog en een paar eenvoudige regels. Natuurlijk: de gemakkelijkste manier zou zijn om een grafisch ontwerper in te huren. Dit is de veiligste en gegarandeerd meest kwalitatieve manier - uitzonderingen bewijzen de regel. Maar het is ook de duurste optie. Op het web, we hebben het geraden, zijn er portalen die deze diensten overzee uitbesteden. Je kunt dus in landen met een lager uurloon een goed grafisch ontwerp kopen van hoge kwaliteit. Bijvoorbeeld uit Oekraïne, India, Indonesië, Zuid-Amerika, maar ook uit de VS, enz. De nadelen zijn de rechtspositie bij geschillen, de communicatie en dus soms de coördinatie.

Aangezien ik zelf een grafisch oog heb en zoveel mogelijk zelf wil doen, heb ik voor mijn logo op PUBLISHING ON THE NET een andere aanpak gekozen. Ik heb gezocht en vond een zegel bij Envato. Ik dacht dat het me zou lukken om er een logotype voor te maken. Omdat de zegel die ik mooi vond de verkeerde inhoud had. Een logo moet absoluut passen bij het onderwerp en het karakter van uw bedrijf. Dus vond ik een @ teken dat ik wilde gebruiken, maar met een "P" in de @ cirkel. In het begin probeerde ik het zelf - maar ik heb niet genoeg ervaring met vectoren in Illustrator. Dus, zonder verdere omhaal, vroeg ik de ontwikkelaar van het bord via Envato of hij het voor mij kon doen - en tegen welke prijs. Het was mogelijk en de kosten waren absoluut redelijk. Nu heb ik deze "P" met het woordmerk in liggend formaat:

Online Logo Voorbeeld
Het logo van PUBLIZIEREN IM NETZ

Onderzoeksinstrumenten

Dit is precies dezelfde aanpak die ik voor mijn cliënten hanteer. Als een logo gewenst is, stel ik voor eerst een signet te kiezen dat past bij het bedrijfsidee en de naam. Ik gebruik niet alleen Envato of Envato Elements om dit te doen. Ik zoek ook op Google naar logo's, of op Iconfinder, iStockPhoto en andere aanbieders van kleine afbeeldingen. Dan laat ik deze aan de klant zien, kies er samen met hem een of twee uit en bouw een logo in liggend formaat.

Belangrijk: Let op het auteursrecht, je logo mag niet teveel lijken op een bestaand logo. Zelfs als je signets koopt, moet je de licentie laten controleren: geldt dit onbeperkte recht in tijd en ruimte voor je professionele doel? En ook voor het gebruik als logo?

Goede logo's zijn eenvoudig en geven zoveel mogelijk uitdrukking aan het bedrijfsidee. Ze werken op de website omdat ze in liggend formaat zijn. Ze kunnen in zwart-wit worden weergegeven. En ze kunnen worden weergegeven op een briefhoofd of visitekaartje - enigszins gewijzigd en aangepast, misschien met een claim eronder.

Samenvatting

Het maken van een goed logo is relatief eenvoudig. Je hebt een duidelijk concept en een heel goed idee nodig. U kunt inspiratie opdoen bij andere succesvolle merken en websites. Praten met je collega's en vrienden kan je ook helpen om op dat ene simpele, briljante idee te komen. Maar laten we eerlijk zijn: het hoeft niet briljant te zijn, adequaat kan genoeg zijn, goed zou meer dan genoeg zijn. U kunt zoeken naar logo's of signetten op grafische platforms.

Natuurlijk moeten de min of meer abstracte personages iets te maken hebben met het beroep waarvoor zij staan. Waarbij er hier ook grappige combinaties kunnen zijn. Of consequente afleidingen, bijvoorbeeld als we denken aan de beroemde appel van APPLE. Wie had ooit gedacht een appel te nemen waar een hap van ontbrak. Maar deze kleine grappige "onderbreker" maakt dit logo zo geniaal.

Ik hoop dat je nu wat aanwijzingen hebt om een geweldig volgend logo voor het World Wide Web te maken. Ik wens je veel succes en veel plezier ermee.

Afbeeldingen: Jeff Sheldon, Rohan Vijay

Heeft u vragen over logo ontwerp voor websites? Voel je vrij om de commentaarfunctie te gebruiken. Wilt u op de hoogte blijven van nieuwe artikelen over webdesign en online marketing? Volg ons dan op Twitter, Facebook of via onze nieuwsbrief.

Mark Max Henckel - Webdesigner uit Hamburg. Opgeleid media-ontwerper (print), sinds 2000 werkzaam als webdesigner. Eerst bij mobile.de, sinds 2003 als zelfstandige. Vanaf 2005 blogger over verschillende onderwerpen op verschillende eigen blogs. Als freelancer was hij van 2007 en 2008 bij SPIEGEL ONLINE betrokken bij de lancering van eintages.de op het raakvlak tussen programmering en redactie. Later bij de SPIEGEL marketeer Quality Channel (Spiegel QC/Spiegel Media). Freelancer voor libri.de en diverse grafische & IT-bureaus. Sinds 2008 gespecialiseerd in WordPress.

Reacties op dit artikel

Laat een opmerking achter

Je e-mailadres wordt niet gepubliceerd.