App Store Icoongrootte: File Requirements, Design Tips, and Best Practices

Wat is de juiste App Store icoon grootte? Wat moet je afbeelden in je icoon? Wat maakt het allemaal uit? Deze gids voor app-pictogrammen helpt u deze belangrijke vragen te beantwoorden, geeft tips en verwijst naar hulpmiddelen.

Waarom app-pictogrammen belangrijk zijn

De app store-pictogramgrootte is klein. Wanneer pictogrammen op uw smartphonescherm verschijnen, nemen ze elk slechts een duimbreedte aan ruimte in beslag. Maar in de Apple App Store of de Google Play Store, het ontwerp dat u verpakt in deze kleine app store-pictogramgrootte is alles.

Net als bij boekomslagen of productlijstafbeeldingen op Amazon, helpen mobiele app-pictogrammen uw potentiële klanten in een fractie van een seconde een snel oordeel te vellen.

Voordat ze de app-titel of -beschrijving lezen, gaan ze het pictogram zien. Het pictogram van uw mobiele app moet hen op een aantrekkelijke manier vertellen over uw app, zodat ze meer te weten komen. Als iemand eenmaal op uw icoon heeft geklikt, is de kans groter dat hij uw app installeert. En dat is wat u wilt. In principe is uw app-icoon de toegangspoort tot installs.

Daarom is het zo belangrijk om het goed te doen.

Een app-icoon is geen logo

Het lijkt misschien het gemakkelijkst om gewoon uw merklogo op uw app-icoon over te zetten en het een dag te noemen. Doe dat niet. Een app-icoon is geen logo. Een logo vertegenwoordigt het merk achter de applicatie, ja, maar het app-pictogram vertegenwoordigt de app zelf.

Net zoals u geen logo zou gebruiken in plaats van een productafbeelding op een Amazon-vermelding, moet u geen logo in de app store-pictogramgroottevereisten meppen en het een pictogram noemen. Alleen megamerken zoals Starbucks of Target kunnen hiermee wegkomen.

Als u echter een fatsoenlijk gevestigd en bekend merk bent, voel u dan vrij om uw logo op de een of andere manier aan uw app-pictogram toe te voegen, maar maak het niet de focus.

In het onderstaande voorbeeld bevat de bekende uitgever van reisboeken Lonely Planet zijn logo in het app-pictogram voor Guides by Lonely Planet. Maar het logo is slechts een onderdeel van het app-ontwerp. De rustgevende blauwe rand maakt de warme geel-getinte stadsgezicht pop, uitnodigt de kijker in hun volgende avontuur.

De tagline zegt dat deze app een compilatie is van “gecureerde stadsgidsen”, en het app-icoon hint naar die functie.

Iedereen die ervan houdt om nieuwe steden te verkennen en die in de winkel zoekt naar “reisgidsen”, zal worden aangetrokken door dit warme en toch spannende app-icoon.

Vergelijk de Lonely Planet-app met een andere reisgids-app die je bij dezelfde zoekopdracht vindt.

mTrip neemt de M uit zijn logo, voegt een groene achtergrond toe en geeft zichzelf een duimpje omhoog om het pictogram in de App Store te plaatsen.

Maar het pictogram zegt niets over wat de gebruiker krijgt, en mTrip is niet bekend genoeg om herkenbaar te zijn aan een enkele letter. Netflix, hieronder, neemt ook de eerste letter van zijn logo en gebruikt die als app-icoon, maar dit merk kan het trekken omdat iedereen weet wat Netflix is en wat het doet.

Nu u het verschil weet tussen een logo en een app-pictogram, laten we eens kijken naar de belangrijke vragen die u uzelf moet stellen voordat u begint met ontwerpen.

App Store-pictogramgrootte: 4 vragen die u moet stellen voordat u een app-pictogram maakt

Het is waar dat uw app-pictogram zo veel mogelijk ogen moet trekken. U wilt dat het opvalt tussen alle app-pictogrammen eromheen, en in een app-verzadigde wereld is dat geen gemakkelijke taak.

Maar hier is een geheim: u hoeft uw app-pictogram niet aantrekkelijk te maken voor iedereen in de wereld. Richt u in plaats daarvan op het aantrekkelijk maken voor de mensen in uw doelgroep.

Dus hier is de eerste vraag om te overwegen.

Vraag # 1: Wie is de doelgroep voor deze app?

Is uw app voor mensen die van koken houden? Ouders met jonge kinderen? Liefhebbers van games als Candy Crush en Angry Birds? Reizigers? Beginnende muzikanten?

Nadat je de app al hebt gebouwd, zou je het antwoord op deze vraag moeten weten. Maar maak het de focus van uw app icoon ontwerp, ook.

Zoek een eenvoudige zin die uw doelgroep definieert.

Laten we bijvoorbeeld zeggen dat uw app mensen leert hoe ze piano moeten spelen. Een zoekopdracht naar “piano leren” in de Google Play-winkel levert deze topapps op.

Van de vier app-pictogrammen, welke zou u aanklikken om meer te leren?

Voor mij, een voormalig pianist die graag opnieuw zou willen leren wat ik ooit wist, wint deze app. Handen naar beneden.

Ik vind het app-pictogram van Flowkey helemaal niet aantrekkelijk, omdat het me niets vertelt over pianospelen. (Nogmaals, het is eigenlijk een logo en niets meer). De andere twee hebben pianotoetsen in het pictogram – verwacht, misschien, maar helemaal prima.

Voor mij, Real Piano Teacher wint omdat het toont handen piano spelen op gelabelde toetsen met een blad van muziek in de voorkant van de persoon die speelt.

Je kunt geen piano leren spelen zonder noten te leren, en muzieknoten leren lezen kan net zo’n uitdaging zijn als het leren lezen van een geschreven taal. Door zijn app icoon alleen al, deze app belooft om gebruikers te helpen noten te leren lezen, versnellen ze dichter bij het bereiken van hun droom van het spelen van mooie deuntjes op hun own.

Nu hier is de vangst: u, als een app creator, moet zich afvragen deze hoe kan ik mijn app icoon nog beter dan degene die ik het beste vind (Real Piano Teacher’s)?

Ontwerp uw app icoon om boven al uw top concurrerende keuzes uit te stijgen.

Vraag # 2: Welke huidige ontwerpnormen moet ik volgen?

Ontwerptrends veranderen de hele tijd. Ik loop al lang genoeg mee om me de meest recente logowijziging van Starbucks in 2011 te herinneren. Ik vond het een beetje jammer dat de sirene verschoof, maar uiteindelijk werd het ontwerp weer synoniem met mijn favoriete koffiehuis en kon ik me niet voorstellen dat het weer terug zou gaan naar het vorige ontwerp.

Natuurlijk vinden sommige mensen het nieuwe logo te sober en grappen ze dat het uiteindelijk niet meer dan een groene stip zal zijn.

Grapje terzijde, het is belangrijk om de huidige ontwerptrends in de gaten te houden en hoe deze betrekking hebben op het ontwerp van je app. Zowel de Google Play Store als de App Store publiceren de meest actuele richtlijnen die je kunt (en moet) volgen.

Deze richtlijnen helpen u een app-pictogram te maken met de meest moderne, toegankelijke uitstraling.

Google’s Material Design biedt een grondige set richtlijnen die de volgende onderwerpen behandelen:

• Ontwerpprincipes, inclusief merkuitdrukking en ontwerpbenadering
• Grid- en keyline-vormen
• Specs – een gedetailleerd overzicht van de anatomie van app-pictogrammen en verlichtingsspecificaties
• Iconbehandelingen: informatie over app-kleur, laag, scoren, overlap, accordeon en vervormen

Material Design is bedoeld om u te helpen een app-pictogram te maken met een tastbaar gevoel door middel van het medium pixels. Het is complex, maar het is de moeite waard om te bestuderen.

Apple’s Human Interface Guidelines lezen op een vriendelijker manier die ook gemakkelijk te volgen is. Het biedt tien tips, zoals “Omarm de eenvoud” en “Test uw pictogram tegen verschillende achtergronden”, samen met instructies over hoe ze op te volgen.

Na deze tips biedt Apple informatie over hoe je:

• Attributen van app-pictogrammen kunt formatteren
• Het app-pictogram in verschillende formaten kunt maken

• Zorgen voor door de gebruiker te selecteren pictogrammen
• Spotlight-, instellingen- en meldingspictogrammen maken voor iOS

De richtlijnen voor de menselijke interface zijn korter en in veel opzichten eenvoudiger dan de richtlijnen voor materiaalontwerp van Google, maar de laatste biedt meer ontwerptips.

Vraag # 3: Hoe kan ik het doel van mijn app laten doorschemeren?

Zoals we hebben gezien bij de leer-voor-piano apps, is het communiceren van het doel van je app naar je publiek van essentieel belang.

Laten we eens kijken naar een ander voorbeeld. Stel dat u een app-icoon ontwerpt voor een app die schrijvers helpt hun gedachten en ideeën te organiseren. Misschien stelt uw app ook doelen voor het aantal woorden en stelt deze gebruikers in staat de dagelijkse schrijftijd bij te houden. Bovendien biedt uw app misschien kick-in-the-pants-citaten om schrijvers aan het schrijven te krijgen.

Dus wie is uw publiek?

Schrijvers, natuurlijk. Beginnende schrijvers. Romanschrijvers. Freelancers. Journalisten. Elke schrijver kan uw app gebruiken!

Nou, kijk eens naar uw concurrentie.

Zoek in de App Store op “apps voor schrijvers” en je krijgt een scala aan organisatorische apps.

Let op de app-iconen hier. Ten eerste, er is een snor met een rode achtergrond. Als je de titel niet zag, zou je niet weten dat deze app zelfs gericht is op schrijvers. En dan nog is het onduidelijk wat de app precies doet om schrijvers te helpen schrijven.

Het volgende app-pictogram heeft een witte achtergrond met een rood…papieren vliegtuigje? Penpunt? Zalmhoofd? Het is niet helemaal duidelijk.

Het laatste app-pictogram in onze kleine studie heeft een gloeilamp-pen tegen een zwarte achtergrond. Alleen al door naar het pictogram te kijken, krijg je het gevoel dat deze app schrijvers zal helpen ideeën te vormen en die inspiratie te laten stromen totdat het een boek, artikel of gedicht wordt.

Emuleer dit pictogram, niet de eerste twee. Hint naar de functionaliteit die uw app biedt.

Houd er rekening mee dat het laten doorschemeren van functionaliteit er anders uit moet zien voor verschillende soorten apps.

Als u bijvoorbeeld een utiliteitsapp hebt gemaakt – zoals een fooiencalculator of een zaklamp – moet het app-pictogram de persoon die door de app bladert, het gevoel geven dat hij de app al gebruikt voordat hij op het pictogram klikt.

Het app-pictogram hieronder bereikt dit doel niet, en bovendien is het druk en moeilijk te lezen.

Het onderstaande app-pictogram daarentegen geeft u het gevoel dat u snel toegang hebt tot deze fooiencalculator omdat deze praktisch al is geopend.

Icoontjes voor mobiele games hebben ook een speciale behandeling nodig. Het doel van een pictogram voor een game-app is om de kijker het gevoel te geven dat hij of zij zich al in de wereld van de game bevindt. Ze hoeven alleen maar op het app-pictogram te klikken en ze krijgen de dopamine-rush van het spelen van iets nieuws, spannends en belonends.

Hier is een goed voorbeeld van een app-pictogram dat dit bereikt:

Je kunt bijna de rush voelen van het naar beneden rijden van een hobbelige heuvel, alleen maar door naar dit app-pictogram te kijken. Het is een heerlijke sensatie, een die ervoor zorgt dat je het spel wilt spelen.

Een niet-zo-goed voorbeeld? Dit app-icoon voor een basketbalwedstrijd.

Je hebt het gevoel dat je… naar een basketbal zit te staren. Niet dat je een spel speelt. Saai!

Vraag 4: Hoe ziet mijn app eruit?

Hoewel het een goed idee is om creatief te zijn bij het ontwerpen van een app-pictogram, wilt u niet dat uw app-interface en app-pictogram verschillende texturen hebben. Ze moeten samenwerken in een naadloos ontwerpsysteem.

Hier zijn twee woord-blokspellen waarvan de pictogrammen overeenkomen met de look en feel van de spellen die ze vertegenwoordigen.

Het pictogram van Word Stacks heeft dezelfde zonsondergangskleuren en grove woordblokken als het spel zelf.

Het app-pictogram van Woody Block Puzzle is net zo houtachtig als het spel zelf.

U wilt uw publiek niet laten denken dat uw app een woody block-achtig spel is, maar vervolgens een sunset-kleurig, schuimend woordblokspel onthullen. Inconsistente branding is slecht ontwerp.

Zoals een blogger schrijft op 99designs, “Als het ontwerp van uw app plat is, moet uw pictogram ook plat zijn. Als je app skeuomorfisme bevat, moet je pictogram ook ten minste een element van skeuomorfisme hebben.”

Maak dat uw app-pictogram de kleuren, texturen en het gevoel van uw app zo veel mogelijk weerspiegelt.

Tips om in gedachten te houden tijdens het ontwerpen van uw app-pictogram

Nu u de vier essentiële app-ontwerpvragen hebt beantwoord, is het tijd om te beginnen met het maken van verschillende variaties of voorgestelde ontwerpen voor uw app-pictogram. Begin met een basisontwerp en experimenteer vervolgens met verschillende kleuren, randen en afbeeldingen.

Hier zijn een paar tips om u te begeleiden:

• Gebruik slechts twee of drie kleuren. Meer dan drie en uw app-icoon begint te drukke look.
• Vermijd het gebruik van een echte foto. U kunt altijd een foto omzetten in een illustratie/vectorafbeelding, hoewel.
• Denk klein. Het pictogram van uw app ziet er misschien groot uit terwijl u het ontwerpt, maar het is piepklein op een iPhone- of Android-scherm. Zorg ervoor dat elk element duidelijk is, zelfs in de kleinste vorm van het pictogram.
• Bewaar woorden voor de titel en tagline. Een app-pictogram is bedoeld om een visuele impact te hebben. U kunt zeggen wat u moet zeggen in woorden op de titel, tagline, en app beschrijving.
• Volg altijd Apple en Google’s app store icoon grootte eisen en richtlijnen. U kunt de groottevereisten van Google Play hier vinden en die van de Apple App Store hier. Houd er rekening mee dat u verschillende versies van uw app-pictogram voor elke winkel moet maken. Hoewel de App Store op iPhone afgeronde hoeken heeft, moet je al je app-bestanden in vierkante vorm aanleveren. Het Apple systeem zal de hoeken voor u afronden.

Als je eenmaal twee of drie potentiële app-iconen hebt om uit te kiezen, is het tijd voor de belangrijkste stap van het maken van app-pictogrammen: het split-testen van je iconen om erachter te komen wat je doelgroep denkt.

Over App Store-pictogramgrootte: het split-testen van app-pictogrammen op PickFu

De beste manier om te weten wat uw doelgroep van uw app-pictogram vindt, is om het te split-testen op PickFu voordat u uw app daadwerkelijk publiceert in de Google Play Store of de App Store. Zeker, je zou een in-app A / B-test kunnen doen en verschillende variaties op de winkel zelf kunnen uitvoeren, maar dit is een traag proces dat je tijd en geld kan wegzuigen.

Door split-testing naar een pool van respondenten op PickFu voordat u uw app-pictogram live plaatst, krijgt u de feedback die u nodig hebt zonder geld te verliezen in het proces.

Het kost slechts een paar minuten om een peiling op te zetten op PickFu. Weet je nog dat ik zei dat doelgroepbepaling cruciaal is? PickFu maakt dat gemakkelijk voor u. U kunt doelgroepleden targeten op iOS- of Android-apparaat, of ze een mobiele gamer zijn, en hoeveel ze hebben uitgegeven in de App Store, naast vele andere nuttige kenmerken.

Een app-ontwikkelaar nam onlangs PickFu om te testen tussen twee pictogrammen voor een dating-app.

Het eerste pictogram toont het roze profiel van een vrouw die een telefoon vasthoudt, de app-titel in twee verschillende kleuren, en een roodachtige en oranje achtergrond. In totaal bevat dit app-icoon ongeveer zes verschillende kleuren.

De tweede optie verwijdert de vrouw, behoudt een meer gestroomlijnde oranjerode achtergrond en laat de woorden staan, maar dan in het wit met een klein hartje in de holte van de letter M. Dit app-icoon bevat slechts drie kleuren.

De respondenten stemden massaal voor de eenvoudigere, schonere optie B. Anders dan bij een traditionele live A/B-test geven PickFu-respondenten u gedetailleerde schriftelijke feedback. We kunnen dus precies zien waarom optie B heeft gewonnen.

Ten eerste waardeerden respondenten de eenvoudigere, professionelere uitstraling van optie B. Ze zeiden dingen als: “Ik hou gewoon van de eenvoud van deze en het kiest niet één geslacht uit voor gebruik” en “Ik heb echt een hekel aan de felle paars/roze kleuren in optie A – het is echt moeilijk voor de ogen.”

Hopefully, de app-ontwikkelaar ging voor het tweede app-pictogram, dat veel meer kans heeft om potentiële gebruikers aan te trekken dan optie A.