Zo optimaliseer je je logo voor het responsive tijdperk

Vrijwel ieder merk is ook online vertegenwoordigd. Vaak wordt het reeds bestaande logo zonder verdere aanpassingen boven een website geplaatst. Maar een logo dat offline krachtig werkt, komt digitaal niet altijd goed uit de verf. In dit artikel omschrijf ik waar je in een online omgeving rekening mee moet houden en hoe je een bestaand logo kunt optimaliseren.

Waarom logo-optimalisatie?

Lange tijd vormde het logo de kern van de huisstijl van waaruit de overige elementen (kleurenpalet, typografie, fotografie, pictogrammen en taalgebruik) werden afgeleid. Onder invloed van online zie je een sterkere verandering in deze opvatting: merken moeten tegenwoordig flexibel en verrassend zijn. Elementen van de huisstijl worden daarom dynamisch toegepast, zolang ze maar de basiswaarden van het merk uitdragen. Het logo staat daardoor niet langer aan de basis van de identiteit, maar is één van de zes componenten geworden. (Bron: ‘Dynamic Identities – How to create a living brand‘ van Irene van Nes.)

Deze ontwikkeling zie je bijvoorbeeld heel sterk terug in apps. Het logo is hierin vaak ‘verstopt’ of wordt zelfs helemaal niet gebruikt. Kleur en beeld zorgen dan voor herkenning van het merk. Toch blijft een herkenbaar logo belangrijk. Op websites staat het logo nog altijd bovenaan. Voor mensen die niet bekend zijn met een merk geeft het logo een eerste indruk van wat het merk is of waar het voor staat. Voor mensen die wel bekend zijn met een merk (vanuit offline uitingen) is het de bevestiging dat ze op de juiste website zijn beland. Ook leiden ontwerpers de vormentaal van elementen op de website vaak af van het logo. Krijgen knoppen ronde hoeken of zijn ze recht? Welke stijl pictogrammen past bij deze website? Dit zijn vragen die vaak worden beantwoord door te kijken naar het logo.

3 factoren om rekening mee te houden

Een beeldscherm stelt andere eisen aan een logo dan drukwerk. In drukwerk staat de afmeting van je eindproduct (bijvoorbeeld een visitekaartje, brochure of verpakking) vast en daarmee ook de schaal van het logo dat hierop afgedrukt wordt. Hierdoor kun je ook de leesbaarheid en kwaliteit (scherpte) van je logo garanderen. In een online omgeving werkt dit anders.

1. Responsive webdesign: Schaalbaarheid van je logo

Tussen de breekpunten van een responsive website (van desktop naar tablet, naar mobiel) is het design vaak ‘fluid’. De website verschaalt van groot naar klein en de elementen  (zoals het logo) verkleinen mee. Zeker op een mobiele telefoon is een logo vaak niet groter dan 160 bij 40 pixels. Het is dus belangrijk dat een logo niet te priegelig is opgezet en goed leesbaar blijft op klein formaat.

2. Favicons en app-iconen: Afgeleiden van je logo

Naast het basislogo is het handig als je logo een herkenbaar element heeft dat ook zelfstandig ingezet kan worden. Voor drukwerk was dit wenselijk, voor digitale toepassingen is dit noodzakelijk. Bijvoorbeeld voor een favicon of app-icoon. Een favicon is een vierkant plaatje dat in je browser naast je url wordt weergegeven wanneer je een webadres intypt.

Een favicon is slechts 16 bij 16 pixels groot (pakweg 5 bij 5 mm)! Een volledig logo verschalen tot dit formaat zal niet lukken. Daarom is het voor een online logo handig als een logo naast een woordbeeld een symbool heeft, dat ook los van het woordbeeld kan functioneren als herkenbaar beeldmerk. Een voorbeeld hiervan is het ‘huisje’ van Albert Heijn. Een ander voorbeeld is de favicon van Malmberg, waarbij de karakteristieke M uit het logo woordbeeld wordt gebruikt. Zo’n afgeleide van het logo kan ook goed gebruikt worden als app-icoon voor mobiel of tablet.

Twee voorbeelden van een favicon, afgeleiden van het logo

3. Retinaschermen: Scherpe weergave

Een retinascherm is een beeldscherm dat meer dan twee keer zo scherp is dan een gewoon beeldscherm (220.5ppi in plaats van de gebruikelijke 72ppi). iPhones en iPads hebben bijvoorbeeld een retinascherm. Voor responsive websites is het dus belangrijk dat een logo ook op dubbel pixelformaat beschikbaar is. Als dit niet het geval is, dan ziet iemand met een retinascherm het logo namelijk onscherp. Zie het voorbeeld van het grote Creative Cloud-logo hieronder:

Hoe optimaliseer je een logo voor online toepassingen? 5 tips

Een compleet re-design van je logo voor online toepassingen is meestal niet nodig. Door onderstaande componenten van je logo onder de loep te nemen, kun je een bestaand logo optimaliseren.

1. Vermijd het gebruik van dunne lijnen

Een geprint logo kan probleemloos fijne lijnen of cirkels weergeven, online kan dit niet. Een beeldscherm bestaat uit pixels. Dit zijn kleine vierkantjes waaruit een afbeelding wordt opgebouwd. Denk bijvoorbeeld aan een sterk ingezoomde foto. Als je iets wilt weergeven op een scherm, dan is dat dus altijd minimaal één pixel groot (anders is er niets te zien). Een logo waarin dunne lijnen zijn verwerkt, kan daarom problemen geven in een digitale weergave. Vooral wanneer de lijnen cursief of rond zijn.

Een voorbeeld van een logo-optimalisatie waarbij het ‘probleem’ van dunne lijnen wordt getackeld is het nieuwe Philips-logo. Het schild is solide gemaakt waardoor de ronde cirkel is opgenomen in de vorm. Ook zijn de drie golven vereenvoudigd: de lijnen zijn dikker gemaakt en teruggebracht van drie naar twee stuks. Zeker voor kleine schermen (bijvoorbeeld het scherm van je smartphone) is dit belangrijk.

Links: het Philips logo uit 1964. Rechts: het Philips logo anno 2013, geoptimaliseerd voor het web.

2. Gebruik stevige typografie

Voor de typografie (de letters) van je logo geldt hetzelfde als voor het gebruik van lijnen: zorg ervoor dat deze niet te dun is want dit kan dan lastig worden weergegeven. Een ‘a’ of een ‘o’ zijn bijvoorbeeld eigenlijk een soort minicirkels met een dunne lijn. Vermijd daarom het gebruik van ‘cursieve’ of ‘light’ lettertypes in een logo en gebruik in plaats daar van een ‘bold’ lettertype. Zorg ook dat de tekst in je logo niet te klein is, want je logo wordt (op mobiele devices) vaak klein weergegeven.

3. Vereenvoudig kleurgebruik en zorg voor voldoende contrast

Niet alleen voor bedrijven met een offline traditie is logo-optimalisatie noodzakelijk. Ook het Firefox-logo is de laatste jaren bijvoorbeeld telkens een beetje aangepast. Als je de logo’s naast elkaar zet, zie je hoe de kleuren vereenvoudigd zijn. De verlooptinten op de rug van de ‘fox’ zijn veel subtieler gemaakt en in de staart zijn ze juist nadrukkelijker toegepast. De wereldbol is qua kleurstelling ook vereenvoudigd: het contrast tussen de blauwtinten is veel kleiner gemaakt zodat het contrast tussen het blauw van de wereldbol en het oranje van het dier krachtiger is. Hierdoor is de afbeelding op klein formaat veel duidelijker. (Bron: ‘Rebuilding a simplified Firefox logo‘.)

Bron: (Re)building a simplified Firefox logo

4. Introduceer een symbool

Als je logo nog geen (los) symbool heeft dat je logischerwijs zou kunnen gebruiken als favicon of app-icoon, bekijk dan op welke manier je een afgeleide van je logo zou kunnen maken. Door bijvoorbeeld een karakteristiek fragment uit je woordbeeld te kiezen of een huisstijlkleur met de eerste letter van je merk te combineren. Als dit niet werkt, overweeg dan een extra symbool te laten ontwikkelen. Dit zul je voor de herkenbaarheid dan ook op andere plekken moeten inzetten.

5. Maak een .svg-bestand van je logo

Een handige manier om er voor te zorgen dat je logo scherp wordt weergegeven ongeacht het schermformaat of de schermresolutie (retina), is door een .svg-bestand van je logo te maken. Logo’s bovenaan websites zijn meestal .png-afbeeldingen, opgebouwd in pixels. Een .svg-bestand is een ‘scalable vector graphic’. Dit is een bestand dat is opgebouwd uit punten in plaats van pixels en is oneindig schaalbaar. Het behoud zijn kwaliteit, ook als deze wordt verkleind, vergroot of ingezoomed. Ideaal dus voor logo’s of pictogrammen op responsive websites! .svg-bestanden worden door alle moderne browsers ondersteund. Voor IE 8 of lager kan een plugin worden gebruikt.

Ter inspiratie: responsive logo-design

Responsive websites worden steeds meer de standaard. Dit zijn websites die op een optimale manier meeschalen met de grootte van het device waarop de website wordt weergegeven. Op dit moment zie je ook de eerste responsive logo’s ontstaan. Dit gaat nog een stap verder dan een logo dat geoptimaliseerd is voor online toepassingen. Een responsive logo kan afhankelijk van de verhouding of het formaat van het beeldscherm meeschalen en veranderen. Een interessant voorbeeld hiervan is de nieuwe identiteit van het Whitney museum.

Voorbeeld Whitney.org op 3 devices

Een deel van het logo wordt altijd in dezelfde verhouding weergegeven en de andere helft is flexibel schaalbaar. Hierdoor heeft het logo een zeer dynamisch karakter maar geeft tegelijkertijd ook een heel consistent beeld.

Is jouw logo geschikt voor online toepassingen?

Hoe komt jouw logo uit de verf op verschillende devices? Is de naam goed leesbaar? Het beeldmerk herkenbaar? Het logo altijd scherp? Heb je een krachtige afgeleide van je logo voor een favicon of app? Zelfs als het antwoord op al deze vragen ‘ja’ is, blijft het belangrijk om te kijken op welke manieren je je logo kunt optimaliseren. Door technologische ontwikkelingen en voortschrijdend inzicht is er altijd ruimte voor verbetering. Neem je huidige logo nog eens kritisch onder de loep en kijk waar voor jou kansen liggen. En misschien is jouw merk wel klaar voor de volgende stap in responsive webdesign: een responsive identity!