Logo ontwerp voor websites volgt heel andere regels dan voor drukwerk of andere communicatie. De eisen aan logo's en signets zijn gegroeid. We laten je richtlijnen en hulpmiddelen zien voor het maken van je weblogo.

Logo ontwerp voor druk en web

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 maken websites, nieuwsbrieven, banners en natuurlijk logo's.

Sommigen mengen beide vakgebieden, ze bieden ontwerp voor drukwerk en web. Het is voor de eindklant niet duidelijk wie wat kan doen en misschien wie wat niet moet doen. Dan maken grafisch ontwerpers die meer thuis zijn in drukwerk ontwerpen voor websites - en zetten drukwerklogo's op het web. Omgekeerd is het eerder een uitzondering dat webdesigners compleet zakelijk briefpapier ontwikkelen.

Het zou voor iedereen met een "grafisch oog" of een beroep als grafisch ontwerper duidelijk moeten zijn dat een logo op een website andere eisen stelt dan een logo op briefpapier of op een bedrijfsgebouw.

Met de komst van smartphones en mobiel internet zijn de eisen voor logo's en signets (dit zijn kleine afbeeldingen die gebruikt kunnen worden voor logo's) op het web opnieuw veranderd en specifieker geworden - maar ook strenger. Uiteindelijk is het niet zo ingewikkeld. En toch vergt het enige ervaring en aplomb om een goed logo voor een website te ontwikkelen.

3 Richtlijnen voor het maken van een logo

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

• Liggend formaat: Het logo verschijnt linksboven, dit is wat gebruikers verwachten. Soms is het ook toegestaan in het midden van de website. Maar om kostbare ruimte te besparen en de aandacht van gebruikers te vestigen op het wezenlijke, is het zinvol om rekening te houden met de algemene kijkgewoonten van mensen - met een logo in liggend formaat boven aan de linkerkant.
• Duidelijke structuren: Het is essentieel om rekening te houden met de grootte van het logo op een smartphone of tablet. Maar veel desktops en laptops hebben ook een zeer hoge resolutie, dus veel ruimte, of een vrij kleine beelddiagonaal. In beide gevallen kan het logo vrij klein lijken. Het moet echter nog steeds goed werken in kleine maten.
• Geen claims: Veel opdrachtgevers, maar ook ontwerpers, voelen de soms onweerstaanbare neiging om een claim onder het logo te plaatsen. Tekst in beeld, met andere woorden. Dat heeft weinig zin. Het is niet alleen een kwestie van ruimte, maar ook nauwelijks leesbaar op smartphones. Niet te vergeten dat het waardevolle tekst uitsluit van Google indexering (SEO).

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

Maar wat maakt coole 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 ingenieuze 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 in de loop der tijd, net als merken en bedrijven.

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 bepaald onderwerp vertegenwoordigt. Dit kan een bedrijf, een organisatie, een privépersoon of een product zijn."

Tot nu toe gaat het goed. Een logo kan een woordmerk zijn, zoals Coca Cola, Google of Acer. Het kan een zegel zijn, zoals in het geval van Playboy, Shell en Mercedes. Meestal bestaan logo's echter uit een woordmerk en een teken. In bovenstaande voorbeelden van zegels is er altijd een variant met en zonder het woordmerk.

Dat geldt bijvoorbeeld ook voor McDonalds, met de kenmerkende M die iedereen kent. Het McDonalds logo is er 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 je deze M alleen linksboven in de navigatie vindt - en de navigatie schuift naar binnen als je scrollt. Alleen de M is er op een gegeven moment nog. Ik vind dit slim en ruimtebesparend, want het belangrijkste is altijd zichtbaar: het zegel, de "M".

Laten we eens kijken naar het logo op de website van het WWF, om een voorbeeld te nemen uit het meer politiek correcte domein. 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 de website best geslaagd (TYPO3, trouwens), maar ze spijkeren de hoofdnavigatie niet bij. Dit is slim opgelost. Het neemt wat ruimte in beslag, maar bevat al het essentiële.

Dankzij de Mega Menu technologie laat het tweede niveau van de navigatie alles zien wat er op de website te zien is. Als je het megamenu via mouseover opent, blijft alleen de panda zichtbaar. Het is een verticaal logo, maar de uitvoering ervan is vlekkeloos. Ook dit logo komt uit een tijd dat er nog geen websites waren. Ik weet zeker dat het WWF vandaag een ander logo zou laten maken - een in liggend formaat.

Voorbeelden met logo in liggend formaat

Raidboxes is een interessant voorbeeld van logo-ontwerp. Een woordmerk, natuurlijk in liggend formaat - anders zou je het niet kunnen lezen. Ik zou dit logo als een succes omschrijven. Omdat het een hoge herkenningswaarde heeft, wat de essentie is van een goed logo. Het werkt ook in klein formaat op mobiele apparaten. Dit geldt voor veel websites op het moderne internet, zoals Google, Facebook, Amazon, Microsoft, YouTube en nog veel meer.

We kunnen hetzelfde zeggen over de website WordPress.org website. Er zijn richtlijnen voor de presentatie van het WordPress logo die door iedereen bekeken kunnen worden: een stijlgids. Het logo heeft de W als uithangbord en het woordmerk in liggend formaat, maar ook in staand formaat. Het staande logo wordt natuurlijk niet gebruikt op de website. Om goede redenen wordt het logo met signet niet alleen horizontaal getoond, maar ook relatief groot boven de navigatie. Het menu staat hier ook niet vast, wat geen afbreuk doet aan de gebruiksvriendelijkheid van de website.

Voorbeelden van websites met WordPress

Een andere fascinerende website die voor ons als voorbeeld dient is VOGUE America. Ik vind de uitvoering consistent en passend bij het merk. Maar nogal zwak in de vaste navigatie na scrollen. Dit komt doordat het grote logo in het midden verdwijnt en in Klein linksboven verschijnt, waar we het verwachten. Dit is een algemene uitdaging bij woordmerken die op de website verkleind moeten worden. De randen "rafelen" en worden vaag.

Hetzelfde fenomeen kan worden waargenomen bij SPIEGEL Online (SPON). Het excuus voor beide is dat de logo's zijn gemaakt vóór het internettijdperk. We zien hetzelfde als bij VOGUE bij het Amerikaanse TIME magazine, dat op WordPress draait.

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 website. Ze heeft schitterend werk geleverd met zowel het ontwerp als het logo. Ja, ik ben een fan van de BBC. Maar ik vind het logo ook geniaal en memorabel - als geslaagd voorbeeld van logo ontwerp in liggend formaat. Overigens doet deze website het ook zonder vaste navigatie na scrollen - hier staat de inhoud op de voorgrond.

Een goed logo voor het web (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: je kunt een goed logo voor jezelf en je klanten maken met je grafisch getrainde oog en een paar eenvoudige regels. De gemakkelijkste manier zou natuurlijk zijn om een grafisch ontwerper in te huren. Dit is de veiligste en gegarandeerd kwalitatief beste manier - uitzonderingen bewijzen de regel. Maar het is ook de duurste optie.

Op het net, we raden het al, zijn er portals die deze diensten overzee uitbesteden. Zo kun je goed grafisch ontwerp kopen in landen met lagere uurlonen en hoge kwaliteit. Bijvoorbeeld uit de Oekraïne, India, Indonesië, Zuid-Amerika, maar ook uit de VS e.d. De nadelen zijn de juridische situatie bij geschillen. De nadelen zijn de juridische situatie bij geschillen, de communicatie en dus soms ook de coördinatie.

Omdat ik zelf een grafisch oog heb en zoveel mogelijk zelf wil doen, heb ik met mijn logo op PUBLISHING ON THE NET een andere weg ingeslagen. Ik zocht en vond een signet bij Envato. Ik dacht dat het me zou lukken om er een logotype voor te bouwen. Want het signet dat ik mooi vond, had de verkeerde inhoud. Een logo moet absoluut passen bij het onderwerp en het karakter van je bedrijf.

Dus vond ik een @-teken dat ik wilde gebruiken, maar met een "P" in de @-cirkel. Eerst probeerde ik het zelf te doen - maar ik heb te weinig ervaring met vectoren in Illustrator. Dus zonder meer vroeg ik de ontwikkelaar van het bord via Envato of hij het voor me 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:

Logo ontwerp: Onderzoeksinstrumenten

Dit is precies hoe ik te werk ga voor mijn cliënten. Als logo ontwerp 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. Ik zoek ook logo's op Google, of op Iconfinder, iStockPhoto en andere aanbieders van kleine afbeeldingen. Dan laat ik ze aan de klant zien, kies er samen met hem een of twee uit en bouw een logo in liggend formaat.

Let op het auteursrecht, je logo mag niet te dicht bij een bestaand logo staan. Ook als je zegels koopt, moet je het rijbewijs (laten) controleren: Is de licentie geldig voor je beroepsdoel zonder beperkingen in tijd of geografisch? En ook voor gebruik als logo?

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

Samenvatting: Logo ontwerp voor websites

Het maken van een goed logo is betrekkelijk eenvoudig. Je hebt een duidelijk concept en een uitstekend idee nodig. Je 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 al meer dan genoeg zijn. Je kunt zoeken naar logo's of signets op grafische platforms.

Natuurlijk moeten de min of meer abstracte tekens iets te maken hebben met het beroep dat ze vertegenwoordigen. Maar ook hier kunnen grappige combinaties ontstaan. Of consistente afleidingen, bijvoorbeeld als we denken aan de beroemde appel van Apple. Wie zou er aan gedacht hebben een appel met een ontbrekende hap te nemen. Maar deze kleine grappige "verstoorder" is wat dit logo zo geniaal maakt.

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.