Leestijd: 6 minuten | Gepubliceerd: 3 mei 2017

Responsive identity: optimaliseer je logo

Tegenwoordig is ieder merk of bedrijf ook online aanwezig. Het bestaande logo wordt dikwijls zonder enige bewerking meteen op de website geplaatst. Maar het is niet gezegd dat een logo wat normaal gesproken goed werkt, dan ook automatisch online aanslaat. In deze blog vertellen we hoe je een bestaand logo kunt perfectioneren.

Veel bedrijven hebben een huisstijl waarvan het logo de basis is. Alle overige onderdelen van de huisstijl zoals kleuren, typografie en beeldtaal worden vaak afgeleid van het logo. Door de sterke stijging van online gebruik merk je dat het logo steeds meer onderdeel van een huisstijl wordt in plaats van dat het logo de basis is. Merken moeten herkenbaar zijn, maar doordat merken steeds flexibeler en ‘out of te box’ denken worden ze op een andere manier herkend dan vroeger. Een voorbeeld hiervan is het gebruik van een app. Als je de app download dan zie je vaak het logo maar verder komt het logo in de app weinig of zelfs helemaal niet meer voor. Gebruikers herkennen het merk aan andere uitingen zoals beeld en kleur. Maar een logo moet niet onderschat worden, als bedrijf of merk heb je hem nog steeds nodig. Op websites is het logo meestal nog prominent in beeld. Voor mensen die het merk niet kennen is het logo het eerste wat mensen onthouden. Als mensen het merk wel kennen dan is het logo een herkenningsbeeld: ze weten dat het de juiste (betrouwbare) website is. Ook wordt er door websiteontwerpers toch nog vaak gekeken naar het logo: waaruit bestaat het logo? Welke kleuren worden er gebruikt? Welk lettertype? Websiteontwerpers baseren de website vaak aan de hand van het logo.

Hierbij 3 tips om je logo te optimaliseren voor online gebruik:

Zoals eerder gemeld:  een logo dat offline een succes is, wordt niet automatisch online een succes. Een display heeft andere eisen dan de traditionele media. Bij drukwerk staat je huisstijl vast, alle afmetingen en eisen zijn bekend. Hierdoor weet je hoe je logo perfect wordt weergeven. Bij online gebruik is dit anders. Een aantal tips:

  1. Let op de schaalbaarheid van je logo. Je logo moet mee ‘groeien’ en verkleinen en moet dus op alle schermen leesbaar zijn.
  2. Gebruik een favicon. Naast je normale logo is het handig dat je een klein symbool gebruikt voor het weergeven van je huisstijl. Een favicon is een klein symbool dat wordt weergegeven naast de url in je browser. Een voorbeeld hiervan is de rode cirkel met de P van Pinterest. Daarnaast kan een favicon gebruikt worden als app-icoon.
  3. Zorg ervoor dat je logo scherp wordt weergegeven op een retinascherm. Een retinascherm is een beeldscherm dat twee keer zo scherp is als een normaal beeldscherm. Een logo moet dus ook beschikbaar zijn op dubbel pixelformaat anders is het logo onscherp op een retinascherm.

Vaak hoef je niet je logo compleet te veranderen. Door onderstaande onderdelen aan te passen kun je een bestaand logo optimaliseren:

  1. Gebruik geen dunne lijnen

Een drukwerk logo geeft alle lijnen feilloos weer. Maar bij een online logo is dit niet het geval. Een display bestaat uit pixels. Vooral dunne cursieve en ronde lijnen geven problemen in de online weergave en moeten dus dikker worden gemaakt. Dus dit is grotendeels voor kleine schermen zeer belangrijk.

  1. Pas de typografie aan

Voor de letters van je logo geldt hetzelfde als de lijnen van je logo. Gebruik niet te dunne letters anders worden ze slecht weergegeven. Ook moet je opletten dat de tekst in je logo niet te klein is want je logo wordt vaak klein weergegeven maar moet wel herkenbaar zijn.

  1. Gebruik eenvoud en contrast

Vereenvoudig de kleuren in je logo en maak het contrast tussen je logokleuren veel duidelijker. Zo komt je logo krachtiger over en is het vooral op klein formaat veel herkenbaarder.

  1. Presenteer een symbool

Mocht je logo nog geen los symbool hebben, bedenk er dan één. Kies een bepaalde kenmerk van je logo en maak een favicon hiervan. Je naamsbekendheid neemt toe en je kan een favicon ook op andere plaatsen inzetten.

  1. Maak een .svg-bestand

Een .svg-bestand is een ‘scalable vector graphic’ en houdt in dat je logo is opgebouwd uit punten i.p.v. uit pixels. Het is oneindig schaalbaar en wordt dus overal scherp weergegeven ongeacht het schermformaat. Een .svg bestand wordt door alle moderne browsers ondersteund. Mocht je werken met IE8 of lager dan kan je een plugin gebruiken.

Een responsive logo is de toekomst

De laatste tijd zijn de eerste responsive logo’s gelanceerd door de grote merken. Een responsive logo kan afhankelijk van de verhouding of het formaat van het beeldscherm mee veranderen. Een deel kan dus in dezelfde verhouding worden weergeven en een ander deel is flexibel schaalbaar. Daardoor is het logo dynamisch maar ook meteen heel consistent. In de nabije toekomst zullen we steeds meer merken zien die gebruik maken van een responsive logo.

Responsive identity

Is jouw logo wel geschikt voor online gebruik? En komt de boodschap wel over? Is je logo op alle schermen scherp? Gebruik je al een Favicon? Zelfs als je al deze vragen kunt beantwoorden met een ja, het blijft belangrijk om je logo te optimaliseren. Wees voorbereid op te toekomst en kijk nog eens grondig naar je eigen logo. Misschien is je logo wel perfect, verheug je dan op de volgende stap in responsive webdesign: een responsive identity!

Bas ten Broeke
Wij zijn er voor al jouw vragen

Neem contact op als je vragen hebt over het blogartikel of als je een bijzonder project hebt waarbij onze expertise van pas kan komen. Wij staan klaar om je verder te helpen!

    verplicht
    verplicht
    verplicht