Elf tips voor het app-icoon

App Design, App Inspiratie Liz Bollema 26 mrt 2013

Waaraan wordt jouw app, in de app store of op de telefoon, herkend? Het is het icoon, het plaatje dat bij je app hoort. Dat is wat bij mensen blijft hangen, daar zoeken ze je app mee op. Dit artikel gaat over het design van het app-icoon.

Het app-icoon komt natuurlijk terug in de app stores, maar ook op alle telefoons waarop de app is geïnstalleerd. Bij de iPhone staan ze op het ‘springboard’, zoals het hoofdmenu heet. Bij Android staan ze in de diverse menu’s, die middels ‘Launchers’ er verschillend uit kunnen zien. Natuurlijk staat de naam van de app er ook bij, maar het is toch vaak het plaatje dat blijft hangen. Welke aspecten spelen een rol bij het vormgeven van zo’n app-icoon?

Het app-icoon – elf tips

Tip 1 – Steek energie in een mooi icoon.

tip1-2

In de meeste gevallen is het app-icoon de eerste kennismaking met de app; het is min of meer het visitekaartje in de app store. Het icoon kan het verschil maken tussen wel aanklikken voor meer informatie (en het uiteindelijk installeren van de app) of niet. Met andere woorden, daar mag wel wat aandacht aan worden besteed.

Links voor inspiratie:
http://www.mobileinc.co.uk/2012/05/the-art-of-the-ios-icon/
http://iicns.com/

Tip 2 – Geen tekst in icoon

tip2

Probeer tekst in het icoon zo veel mogelijk te vermijden; dat wordt al snel niet goed leesbaar. Kun je in de tekst onder het icoon de naam van de app zetten, dan hoeft die naam niet meer in het icoon terug te komen en kun je het icoon volledig gebruiken voor een afbeelding.

Tip 3 – Zorg dat je icoon opvalt

Kijk in de app stores en zoek naar soortgelijke apps als die van jou. Doe dat door te zoeken op zoektermen die je ook voor jouw app zou gebruiken en door te zoeken binnen een categorie. Jouw icoon moet anders zijn, moet opvallen. Dat bereik je met ander kleurgebruik en door een andere afbeelding te gebruiken. Hier helpt een beetje creatief brainstormen, laat vooral mensen meedenken.

Tip 4 – Gebruik dezelfde kleurstelling als in de app

tip4

Laat het kleurgebruik van je app ook terugkomen in het icoon. Dat is goed voor de herkenbaarheid. Kenwoorden: Metro / Windows-achtig, strak, veel details, foto of stylistisch.

Tip 5 – Gebruik niet teveel details

tip5

Details vallen weg als het icoon getoond wordt. Een app-icoon is 57 × 57 pixels op iPhones zonder Retina scherm en 114 × 114 pixels op een iPhone en iPod touch met een Retina scherm. (Voor de App Store wil Apple een exemplaar van 1024 x 1024 pixels hebben, die wel kleiner wordt getoond.)

Tip 6 – Test het icoon op de telefoon.

tip6

Maak verschillende varianten en zet ze in de juiste verhouding op een afbeelding van een telefoon. Zo kun je ook een rijtje van verschillende alternatieven naast elkaar zetten. Mail die afbeelding naar je telefoon, sla hem daar op en open hem. Dan heb je de afbeeldingen op ware grootte in beeld en kun je het beste beoordelen welke afbeelding het meest geschikt is. Op http://iicns.com krijg je door te schalen naar een klein formaat wel een idee, maar dat is nog steeds op een pc-scherm. Het is beter om het te testen op de telefoon.

Tip 7 – Contrast

Maak gebruik van veel contrast en contrasterende kleuren.

Tip 8 – Speel met het ‘gloss effect’ van het app-icoon

De App Store heeft een instelling waarmee je een icoon automatisch aan de bovenkant een glanzend effect kunt geven. Soms ziet dat er aardig uit, soms niet. Je zet het effect per app aan of uit met een knop in ‘Publish’ in AppMachine.

Tip 9 – Doe het in één keer goed

Het wijzigen van een icoon vereist een app store update waar kosten mee verbonden kunnen zijn. Ook zullen de mensen die de app al op hun telefoon hebben de app opeens minder goed op hun telefoon herkennen.

tip10

Tip 10 – Geen grijskleuren

Houd rekening met de achtergrondkleur van de app stores, die zijn meestal in een grijstint. Gebruik een afwijkende kleur, want anders verdwijnt de app enigszins in de achtergrond.

Tip 11 – Verschil iOS en Android

Er is verschil tussen een icoon voor Android of voor iOS. Wanneer een app-icoon wordt ingediend in de Apple App Store, dan geeft Apple dat icoon altijd ronde hoeken. Dat is in Google Play niet zo. Wil je dus dat het icoon in de beide app stores er hetzelfde uitziet, geef het icoon dan de ronde hoeken van het Apple icoon. Het makkelijkste is om een template voor een icoon te gebruiken als basis voor jouw eigen icoon. Templates kun je hier vinden.

Naam van de app op springboard

Onder het icoon komt altijd de naam van de app te staan. In iOS-termen is dat de ‘springboard titel’. Die tekst kan maximaal circa 12-13 karakters (inclusief spaties) lang kan zijn. Dat is afhankelijk van de breedte van de gebruikte letters, dus in sommige gevallen kan de tekst langer zijn.

txt

Dit kun je testen door op de iPhone een map aan te maken. Met de naam van de map kun je vervolgens spelen om te zien wat er nog past.

  • Hou voor het maken van een map een icoon van een app vast totdat de iconen van de apps gaan wiebelen.
  • Sleep vervolgens een app op een andere app. De twee apps komen dan in een gezamenlijke map terecht.
  • De naam van die map kun je aanpassen (opnieuw: vasthouden).

Het maakt uit of je hoofdletters gebruikt of kleine letters. ‘Markus Schulz’ past niet, ‘Markus schulz’ wel en ‘markus schulz’ ook. Uiteindelijk is in dit geval gekozen voor ‘MarkusSchulz’.

Behalve de ‘springboard titel’ bestaat er nog ook een aparte titel voor in de stores. Daar kun je dus gerust een langere titel gebruiken. Daarnaast zijn er ook nog zoektermen waarmee men je kan vinden in de stores.

Mensen zullen je app uiteindelijk herkennen aan je icoon, de naam is daarbij ondersteunend. De naam is dus minder van belang.

Bronnen:

http://blog.ramotion.com/articles/31-5-good-pieces-of-advice-for-iphone-or-ipad-app-stores-icon-design-.html

http://www.apptamin.com/blog/aso-app-icon-design/

http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/killer-tips-for-iphone-and-ipad-icon-design/

http://jayfuerstenberg.com/devblog/judging-an-app-by-its-cover-techniques-and-tools-for-creating-and-testing-a-professional-app-icon

Bouw je eigen app

Betalen? Dat hoeft pas als je publiceert in de stores

Probeer nu gratis