Een responsive logo, heb jij er rekening mee gehouden?

De ontwikkelingen van responsive webdesign heeft naast de Google indexering ook effect op stijlelementen die op de website gebruikt wordt. Eén van deze stijlelementen is bijvoorbeeld het logo. Op de meeste websites zien we dat het logo linksboven of boven in het midden wordt gecentreerd. Dit ziet er op de desktop versie van de website in de meeste gevallen goed uit. Echter, als je de website bekijkt op de mobiel zie je vaak dat het logo zich niet goed aanpast aan de omgeving van de website. Het logo wordt in veel gevallen te klein, hierdoor is het logo niet scherp en niet goed leesbaar. Daarom is het belangrijk om naast de website ook de huisstijlelementen te optimaliseren voor een goede responsive weergave.
Maar waar begin je als je je logo wilt optimaliseren voor een goede responsive weergave? Het is in sommige gevallen erg lastig om een bestaand logo te optimaliseren, vooral als je logo enkel bestaat uit tekst. Om betere kwaliteit te garanderen houden wij bij het ontwikkelen van een logo rekening met de volgende punten:

1. Om te beginnen moet het logo uiteraard schaalbaar zijn. Het is niet de bedoeling dat het logo bij het verkleinen van het beeldscherm ergens in een hoek wordt gedrukt en vervolgens niet goed leesbaar is. Het is dus belangrijk dat het logo goed leesbaar blijft óók op klein formaat.
2. Naast het logo dat gebruikelijk gevoerd wordt is het gunstig als het logo een stijlelement bevat dat makkelijk herkend wordt en zelfstandig kan worden ingezet. Dit element kan vervolgens voor verschillende doeleinden gebruikt worden. Hierbij kun je denken aan een icoon voor een applicatie, favicon bij een webbrowser of bij speciaal drukwerk. Onder speciaal drukwerk kan je denken aan broches, pennen, koffiemokken en USB-sticks.
3. Naast het formaat van het scherm is het belangrijk om rekening te houden met de pixelmaten van verschillende apparaten. Momenteel zijn er veel apparaten die een retina scherm hebben, deze schermen hebben in plaats van 72ppi een vergrootte pixelmaat van 220ppi. Ppi houdt het aantal pixels in per inch. Hoe meer pixels in één inch hoe scherper de weergave. Dit houdt in dat het logo tevens beschikbaar moet zijn in een dubbele pixelmaat, het kan anders voorkomen dat op dit soort apparaten het logo niet optimaal is.

Naast de deze drie bovenstaande factoren geven wij jou vijf tips die je kunt gebruiken bij het ontwerpen van een responsive logo of het herontwerpen van je logo.
Hoe het logo van Petrified Wood zichzelf verkleind tot een symbool

Voor een optimale leesbaarheid raden wij aan om het gebruik van dunnen lijnen vermijden. Een computer beeldscherm is namelijk opgebouwd uit pixels. Als het lijntje te dun is en kleiner wordt geschaald is het lijntje niet meer waar te nemen. Toch lijnen gebruiken? Zorg er dan voor dat ze minimaal één pixel dik zijn.
Pas een lettertype toe dat goed leesbaar is. Vermijd cursieve en light fonts. Net als bij de lijntjes zijn light lettertypes in logo’s niet goed leesbaar op het moment het scherm verkleint wordt. Wij bevelen vooral aan om een bold lettertype toe te passen. Let dan wel op de letterafstand. Bold letters die te dicht op elkaar staan kunnen ook slecht leesbaar worden.

Maak gebruik van eenvoudige kleurstellingen en pas op voor drukke kleurverlopen. Door drukke kleurverlopen ogen logo’s vaak erg onrustig en gaat het ten koste van het contrast. Door het contrast goed in stand te houden creëer je diepte die het logo aantrekkelijk en beter leesbaar maakt.
Veel merken en bedrijven hebben een tekstueel logo. Dit houdt in dat zij geen gebruik maken van een symbool of ander kenmerk. Dit hoeft niet per se een ramp te zijn. Het is mogelijk om van het logo een afgeleide icoon te bedenken. Dit zou bijvoorbeeld de eerste letter van het logo kunnen zijn in combinatie met de huisstijlkleur. In het begin zal men moeten wennen aan de nieuwe uiting, zorg daarvoor altijd dat het icoon ook op andere kanalen goed zichtbaar is. Hierdoor creëer je sneller herkenning van het nieuwe stijlelement.

Nadat het “nieuwe” logo af is moeten we het logo opslaan. Je hebt in programma’s zoals Photoshop en Illustrator veel verschillende bestandsformaten om je bestand op te slaan. Voor een responsive logo is het een goede overweging om te kiezen voor SVG. Dit is een bestandstype die ervoor zorgt dat bij het schalen van het logo deze altijd optimaal blijft. SVG staat voor Scalable Vector Graphics. Anders dan JPG en GIF wordt er bij het schalen van het logo niet gekeken naar de aantal pixels van het logo, maar naar de lijnen waaruit het logo is opgebouwd. Hiermee krijg je altijd een haarscherp logo.

Ben je er net achter gekomen dat jouw logo niet optimaal is op verschillende apparaten? Wij helpen je graag bij het ontwikkelen van een responsive logo. Bel of mail vrijblijvend voor een afspraak en wellicht kunnen wij jou helpen bij het creëren van een responsive logo!