Basisregels voor het ontwerp van banners

Je hebt een flitsende website om je geweldige talenten of producten te tonen aan de wereld en je wilt wat meer bezoekers trekken naar wat in jouw ogen een van de meeste waardevolle stukjes internet is. Adverteren is een mooie oplossing, je kunt je naam verbinden aan websites met veel bezoekers die allemaal een snelle weg aangeboden krijgen naar jouw domein. Natuurlijk wil je dan wel ervoor zorgen dat de advertentie die je ontwerpt aantrekkelijk zodat hij veel bezoekers oplevert en de investering terugbetaalt.

In dit artikel noem ik een aantal punten die je in je achterhoofd kan houden tijdens het ontwerp, bespreek ik een aantal voorbeelden en geef ik wat methoden om te testen of je advertentie wel dezelfde kwaliteit heeft als je glorieuze website.

Verplaats je in je doelgroep
Het eerste wat je moet doen is je verplaatsen in de doelgroep. Wie probeer je aan te spreken? Als je daar achter ben probeer te bedenken of uitzoeken welke kleuren, fonts en symboliek populair is in je doelgroep/subcultuur. Denk daarbij ook aan het taalgebruik en of deze doelgroep graag snelle flitsende animatie wil of juist duidelijk statische informatie.

Hou het simpel, maar geef aan wat het voordeel is voor de gebruiker
Project Wonderful advertentie ruimtes zijn vaak erg klein dus probeer onderwerpde boodschap zo geconcerteerd mogelijk te houden. Tegelijkertijd is het wel belangrijk dat je vertelt wat je doet en waarom het voordeel is voor de gebruiker om op je advertentie te klikken.

Deze advertentie hiernaast is zo’n voorbeeld van hoe je te kort door de bocht wil en daardoor vergeet te vertellen wat het de gebruiker oplevert. De afbeelding is goed van kwaliteit en de naam Monkey Messiah is duidelijk, maar wat doet het dan? Wat is het? Natuurlijk zou je kunnen zeggen dat mensen door die vragen juist zich gemotiveerd voelen om erop te klikken, maar persoonlijk scroll ik er voorbij.

Voor het doel van het artikel heb ik opgezocht wat ze doen en ze blijken een gamestudio te zijn met een best leuk uitziende side scrolling shooter met de naam S.H.U.M.P., persoonlijk ben ik groot fan van indie games en side scrolling shooters en had ik zeker geklikt als dit aan mij verteld was. Helaas blijkt dit totaal niet uit de banner en hebben zij een potentiële klant gemist en ik mogelijk een te gekke indie game!

Gebruik je naam en/of URL in je logo
Mensen soms wel geïnteresseerd zijn in de boodschap die je overdraagtnonpariel via je banner, maar even niet in de gelegenheid zijn om er op te klikken. Daarom is het belangrijk dat je in je advertentie ook je naam en of je URL plaatst. Dit zorgt er voor dat mensen je naam onthouden en misschien op een later tijdstip toch naar je site komen. Daarnaast levert het ook herkenning op als men op een andere site/tijdstip dezelfde banner weer voorbij ziet komen.

De banner hierboven vind ik persoonlijk erg mooi omdat het transparantie gebruikt om een ander kader te vormen dan het standaard vierkant kader. Daarnaast kan elke zin op zich zelf staan en vertelt het de gebruiker nog steeds waar het over gaat. Ook de vormgeving past bij de Indie doelgroep die het probeert aan de te spreken. Mijn enige probleem is dat de zin die niet het woord indie bevat is nonpareil. Dit is de naam van de site waar het overgaat maar omdat het in hetzelfde lettertyp en groote is als de andere zinnen werd mij dit niet meteen duidelijk. een www. erboven en een .com er onder hadden dit meteen duidelijk gemaakt en hierdoor had ik ook de naam makkelijker onthouden om het eventueel later te bezoeken.

Ontwerp een aparte banner voor verschillende formaten schaal ze niet naar beneden
Ik heb op mijn site op dit moment één square van 125×125 aan te kleinadvertentie ruimte en daar stond laatst deze advertentie op. Als je je best doet kun je lezen dat het over logo en print design gaat, maar om de URL te lezen moet ik echt gaat zitten turen. Volgens mij is deze banner ontworpen voor een rectangle banner van 300×250 en daarna naar beneden gescaled voor 125×125.

Ik ga verder niet in over de kwaliteit van het ontwerp maar ik zou als passendere bezoeker nooit getrokken worden door deze advertentie, maar net zo belangrijk ik zou nooit subliminaal de URL in me opnemen omdat het gewoon niet te lezen is. Als je als ontwerper echt al deze informatie kwijt wil in die kleine ruimte animeer je banner dan of gooi Informatie eruit die niet van essentieel belang is. PDS: Logo & Print Design Studio had alles vertelt wat je moet weten als gebruiker en je had meer ruimte gegeven om die kern informatie groter te tonen in de schaarse ruimte van 125×125 pixels.

Animatie/geen animatie?
Project Wonderful biedt de kans om geanimeerde GIF’s als banner te gebruiken. Dit is een zeer handig hulpmiddel omdat het menselijk oog wordt aangetrokken door beweging. Daarnaast geeft animatie je de mogelijkheid om meer informatie in je banner kwijt te kunnen. Het kan echter ook ontzettend vervelend zijn voor bezoekers dat zij een bewegende afbeelding in hun ooghoek zien of dat de net naar je advertentie kijken terwijl er een minder interessante tekst wordt getoond.

Zorg er dus voor dat je animatie opvallend is maar niet irritant, dat het verhaal vertelt dat je wil vertellen maar op een zo compact mogelijke manier. Het beste is eigenlijk als elke frame animatie toch in een klap aan de bezoeker duidelijk maakt waar het overgaat.

De advertentie hierboven vind ik een mooi voorbeeld hoe animatiesnelheid bijna iets moois oplevert en toch de mist in gaat. De animatie duurt een seconde of 6 en begint met de naam, logo en beschrijving van de site. Dit is prima ook omdat mocht er iets mis gaan met het GIF bestand het logo in ieder geval getoond zal worden. Daarna volgen er 3 productshots die voor mij als gebruiker niets zeggen als ik niet al weet dat het over “Unique Pouch & Purses” gaat. Ook zijn de productshots net zo lang in beeld als het logo waardoor ik moeite heb om alle tekst te lezen die bij het logo getoond wordt.

Call to action!
Het actief stimuleren van het klikken op een advertentie levert meer clicks op. Je tekst kan nog zo perfect zijn en de grafische elementen nog zo mooi bijpassend. De trigger gaat pas echt over bij een kijker op het moment dat je hem direct zegt wat hij moet doen. Zorg er dus voor dat je of je informatie zo overtuigend is, dat gebruik wel moeten klikken of voeg een “click here!” tekst toe.

Kwaliteitscontrole
Een banner ontwerpen is niet een proces van idee naar uitwerking en dan het plaatsen van de banner. Je maakt jezelf zichtbaar voor de buitenwereld met een advertentie en daarnaast heb je er nog voor betaald ook. Kwaliteitscontrole is dus belangrijk om te kijken of je niet (per ongeluk) je geld weggooit of je reputatie verliest door een slecht ontworpen banner. Hieronder staan een aantal punten waar je aan moet denken tijdens de controle.

Tekst zonder spelfouten, spreek de gebruiker aan
De tekst die de advertentie toont is je enige middel om je publiek te overtuigen om er op te klikken. Zorg er dus voor dat er geen spelfouten in staan en dat de zinnen lekker weglezen en lekker klinken als je ze hardop uitspreekt. Als je het gevoel hebt dat de zin misschien beter kan wees niet te lui om 5 verschillende zinnen te bedenken en deze allemaal hard op voor je zelf uit te spreken om te kijken welke de beste is.

Animaties te snel?
Ik heb ooit geleerd dat je als animator je eigen tekst drie keer moet kunnen lezen voordat de tekst verder mag naar de volgende teksten. Deze regel is erg handig omdat je zelf precies weet wat er staat en altijd sneller zult lezen dan de ongeïnteresseerde kijker die niet weet wat er komen gaat. Probeer jezelf in een rol te verplaatsen van een langzaam lezend iemand en kijk nog eens kritisch naar je animatie.

Toon je banner aan vrienden/collega’s
Dit geldt eigenlijk voor alle creatieve projecten die door een grote groep mensen gezien zal worden. Toon je werk eerst aan vrienden en collega’s als eerste testpubliek. Zij zullen niet alleen beter begrijpen waarom je je banner op die manier heb ontworpen maar kennen ook de site die je probeert te verkopen. Daarnaast zullen zij waarschijnlijk met andere inzichten komen hoe de banner beter kan werken. Probeer altijd een paar van de gegeven adviezen uit om te kijken of ze gelijk hebben en kies daarna voor jezelf de beste versie uit

Grafisch in orde?
Onze originele banners waren prachtig gemaakt in half_bannerAfter Effects, maar op het moment dat we ze exporteerde als .gif bestanden kwamen de lelijke kanten van het bestandsformaat om de hoek kijken. Dit zorgt natuurlijk niet voor een professionele indruk en daarnaast zeker als het om reclame over geld verdienen gaat krijg je als bezoeker een wat vieze smaak in je mond. Zorg daarom dat je advertentie er altijd zo strak mogelijk uit ziet.

Hoe je dit precies oplost zullen we later behandelenhalf_banner maar kijk eens kritisch naar onze ads met de in dit artikel genoemde punten in het achterhoofd. Niet om onszelf de hemel in te prijzen maar wij scoren best aardig met ons ontwerp, al zeggen we zelf. Zeker de nieuwe versie die je hiernaast ziet, ziet er sjiek uit en heeft een professionele uitstraling.

Banners testen in de praktijk
De beste manier om te kijken of een banner goed is, is hem in de praktijk te testen. Maakt een aantal variaties van je banners en probeer ze gedurende een aantal dagen uit op verschillende sites en blogs en kijken welke banner de meeste cliks opleverd. Via Project Wonderful kan dit prima met de meegeleverde statistieken en op die manier zie je na een paar dagen welke banner het meeste resultaat oplevert.

Door Heinze Havinga geplaatst op 24-8-2009 Categorie: Adverteerders
Stuur deze post door Stuur deze post door

2 reacties Laat een reactie achter

  1. #1HeinzeHavinga @ 2009-8-24 22:07

    stuk geschreven voor #PWNL over ontwerpregels van online banners http://bit.ly/44IMx9 ben benieuwd wat mensen er van vinden!

    This comment was originally posted on Twitter

  2. #2Mark @ 2009-8-27 22:24

    goed artikel!

Laat een reactie achter

(Ctrl + Enter)