Storlek på appbutiksikoner:

Vad är rätt storlek på App Store-ikonen? Vad ska du avbilda i din ikon? Vilken skillnad kommer allt detta att göra? Den här guiden för app-ikoner hjälper dig att besvara dessa viktiga frågor, ger tips och länkar till resurser.

Varför app-ikoner är viktiga

App Store-ikonstorleken är liten. När ikonerna visas på din smartphoneskärm tar var och en av dem bara en tumme bredd av utrymmet. Men i Apple App Store eller Google Play Store är designen som du packar in i denna lilla storlek på appbutiksikonen allt.

Som bokomslag eller bilder på produktlistor på Amazon hjälper ikoner för mobilappar dina potentiella kunder att göra en snabb bedömning på en bråkdel av en sekund.

Förutom de läser appens titel eller beskrivning kommer de att se ikonen. Ikonen för din mobilapp måste berätta om din app på ett tilltalande sätt och få dem att vilja veta mer. När någon har klickat på din ikon är det mer sannolikt att de installerar din app. Och det är vad du vill. I princip är din appikon porten till installationer.

Det är därför det är viktigt att göra rätt.

En appikon är inte en logotyp

Det kanske verkar enklast att bara överföra varumärkeslogotypen till appikonen och avsluta det hela. Låt bli. En appikon är inte en logotyp. En logotyp representerar varumärket bakom applikationen, ja, men appikonen representerar själva appen.

På samma sätt som du inte skulle använda en logotyp i stället för en produktbild på en Amazon-lista, ska du inte klistra in en logotyp i storlekskraven för appbutikens ikoner och kalla det för en ikon. Endast megamärken som Starbucks eller Target kan komma undan med detta.

Om du är ett hyfsat etablerat och välkänt varumärke får du dock gärna lägga till din logotyp i din app-ikon på något sätt, men gör den inte till fokus.

I exemplet nedan inkluderar det välkända reseboksförlaget Lonely Planet sin logotyp i appikonen för Guides by Lonely Planet. Men logotypen är bara en del av appdesignen. Den lugnande blå gränsen får det varmt gultonade stadslandskapet att framträda och bjuder in betraktaren till nästa äventyr.

Taglinen säger att den här appen är en sammanställning av ”kurerade stadsguider”, och appikonen antyder den funktionen.

Alla som älskar att utforska nya städer och som gör en sökning i butik efter ”reseguider” kommer att lockas av den här varma men spännande appikonen.

Växla Lonely Planet-appen med en annan app för reseguider som du hittar under samma sökning.

mTrip tar M:et från sin logotyp, lägger till en grön bakgrund och ger sig själv tummen upp för att lägga upp ikonen i App Store.

Men ikonen säger ingenting om vad användaren får, och mTrip är inte tillräckligt känt för att kunna kännas igen på en enda bokstav. Netflix, nedan, tar också den första bokstaven från sin logotyp och använder den som app-ikon, men det här varumärket kan klara det eftersom alla vet vad Netflix är och vad de gör.

Nu när du vet skillnaden mellan en logotyp och en app-ikon ska vi ta en titt på de viktiga frågor du måste ställa dig innan du börjar designa.

App Store-ikonstorlek: 4 frågor att ställa innan du skapar en app-ikon

Det är sant att din app-ikon måste locka så många ögon som möjligt. Du vill att den ska sticka ut från alla appikoner runt omkring, och i en app-mättad värld är det ingen lätt uppgift.

Men här är en hemlighet: du behöver inte få din app-ikon att tilltala alla i världen. Fokusera istället på att få den att tilltala personerna i din målgrupp.

Så här är den första frågan att tänka på.

Fråga nr 1: Vem är målgruppen för den här appen?

Är din app till för personer som älskar att laga mat? Föräldrar med små barn? Älskare av spel som Candy Crush och Angry Birds? Resenärer? Musiker i början av karriären?

Då du redan har byggt appen bör du veta svaret på den här frågan. Men gör det till fokus för designen av appikonen också.

Sök efter en enkel fras som definierar din målgrupp.

Låt oss till exempel säga att din app lär människor hur man spelar piano. En sökning på ”lära sig piano” i Google Play-butiken ger dessa toppappar.

Vad skulle du klicka på för att lära dig mer om de fyra ikonerna?

För mig, en före detta pianist som gärna vill lära mig det jag en gång kunde, vinner den här appen. Helt klart.

Jag tycker inte alls att Flowkeys appikon är tilltalande eftersom den inte berättar något om pianospel. (Återigen, det är i princip en logotyp och inget mer). De andra två har pianotangenter inne i ikonen – förväntat, kanske, men helt okej.

För mig vinner Real Piano Teacher eftersom den visar händer som spelar piano på märkta tangenter med ett notblad framför personen som spelar.

Det går inte att lära sig spela piano utan att lära sig noter, och att lära sig läsa noter kan vara lika utmanande som att lära sig läsa ett skrivet språk. Enbart genom sin app-ikon lovar den här appen att hjälpa användarna att lära sig att läsa noter, vilket gör att de kommer närmare sin dröm om att spela vackra melodier på egen hand.

Här kommer haken: du, som skapare av en app, måste fråga dig själv hur jag kan göra min app-ikon ännu bättre än den som jag tycker bäst om (Real Piano Teacher’s)?

Designa din app-ikon så att den sticker ut från alla dina främsta konkurrerande val.

Fråga nr 2: Vilka aktuella designstandarder bör jag följa?

Designtrender ändras hela tiden. Jag har varit med tillräckligt länge för att minnas den senaste ändringen av Starbucks logotyp 2011. Jag kände mig lite ledsen över att sirenen skiftade, men i slutändan blev designen återigen synonym med mitt favoritkafé och jag kunde inte föreställa mig att den skulle återgå till sin tidigare design.

Naturligtvis tycker vissa att den nya logotypen är för sparsmakad och skämtar om att den så småningom bara kommer att vara en grön prick.

Spratt åsido, det är viktigt att hålla koll på de aktuella designtrenderna och hur de relaterar till din appdesign. Både Google Play Store och App Store publicerar aktuella riktlinjer som du kan (och bör) följa.

Dessa riktlinjer hjälper dig att skapa en appikon med den mest moderna, tillgängliga känslan.

Googles Material Design erbjuder en grundlig uppsättning riktlinjer som täcker följande ämnen:

• Designprinciper, inklusive varumärkesuttryck och designstrategi
• Grid- och keylineformer
• Specifikationer – en detaljerad uppdelning av app-ikonens anatomi och belysningsspecifikationer
• Ikonbehandlingar: Information om app-färg, lager, ritsning, överlappning, dragspel och förvrängning

Materialdesign syftar till att hjälpa dig att skapa en app-ikon med en taktil känsla med hjälp av pixlar. Det är komplicerat, men det är värt att studera.

Apples riktlinjer för mänskliga gränssnitt läses på ett vänligare sätt som också är lätt att följa. Där finns tio tips, till exempel ”Omfamna enkelhet” och ”Testa din ikon mot olika bakgrundsbilder” tillsammans med instruktioner om hur de ska följas.

Efter detta erbjuder Apple information om hur man:

• Formaterar appikonens attribut
• Producerar appikonen i flera olika storlekar

• Förbered ikoner som kan väljas av användaren
• Skapa ikoner för spotlight, inställningar och aviseringar för iOS

Riktlinjerna för mänskligt gränssnitt är kortare och på många sätt enklare än Googles riktlinjer för materialdesign, men de senare ger fler designtips.

Fråga nr 3: Hur kan jag antyda syftet med min app?

Som vi såg i fallet med apparna för att lära sig spela piano är det oerhört viktigt att kommunicera syftet med appen till målgruppen.

Låt oss ta en titt på ett annat exempel. Säg att du designar en appikon för en app som hjälper författare att organisera sina tankar och idéer. Kanske sätter din app också upp mål för antalet ord och låter användarna spåra den dagliga skrivtiden. Dessutom kanske din app tillhandahåller citat för att få författarna att skriva.

Så vem är din målgrupp?

Författare, förstås. Nybörjare. Romanförfattare. Frilansare. Journalister. Alla författare kan ha nytta av din app!

Ta nu en titt på dina konkurrenter.

Sök på App Store efter ”appar för författare” och du får fram en rad organisatoriska appar.

Fokusera på appikonen här. Först finns det en mustasch med en röd bakgrund. Om du inte såg titeln skulle du inte veta att den här appen ens riktar sig till författare. Även då är det oklart vad appen exakt gör för att hjälpa författare att skriva.

Nästa appikon har en vit bakgrund med ett rött… pappersflygplan? Pennspets? Laxhuvud? Det är inte superklart.

Den sista app-ikonen i vår lilla studie har en glödlampspenna mot en svart bakgrund. Bara genom att titta på ikonen får man en känsla av att den här appen kommer att hjälpa författare att formulera idéer och hålla inspirationen flytande tills den förvandlas till en bok, artikel eller dikt.

Emulera den här ikonen, inte de två första. Ge en antydan om den funktionalitet som din app erbjuder.

Tänk på att antydan om funktionalitet bör se olika ut för olika typer av appar.

Om du till exempel har skapat en nyttoapp – som en tipskalkylator eller en ficklampa – bör app-ikonen få den person som bläddrar att känna att han/hon redan använder appen innan han/hon ens har klickat på ikonen.

App-ikonen nedan uppnår inte detta mål, och dessutom är den överbelastad och svår att läsa.

Däremot får app-ikonen nedan dig att känna att du snabbt kan få tillgång till den här tipskalkylatorn eftersom den praktiskt taget redan är öppen.

Ikoner för mobilspel behöver också specialbehandling. Ditt mål med en ikon för en spelapp är att få betraktaren att känna att han eller hon redan är nedsänkt i spelets värld. Allt de behöver göra är att klicka på app-ikonen så får de dopaminruset av att spela något nytt, spännande och givande.

Här är ett bra exempel på en app-ikon som uppnår detta:

Du kan nästan känna ruset av att rida nerför en ojämn backe bara genom att titta på denna app-ikon. Det är dock en läcker kick som får dig att vilja spela spelet.

Ett inte så bra exempel? Den här app-ikonen för ett basketspel.

Det känns som om du… stirrar på en basketboll. Inte när du spelar ett spel. KÖRDIGT!

Fråga nr 4: Hur ska min app se ut?

Det är en bra idé att vara kreativ när du utformar en app-ikon, men du vill inte att app-gränssnittet och app-ikonen ska ha olika texturer. De ska fungera tillsammans i ett sömlöst designsystem.

Här är två ordblockspel vars ikoner matchar utseendet och känslan hos de spel de representerar.

Word Stacks ikon har samma solnedgångsfärger och klumpiga ordblock som själva spelet.

Woody Block Puzzle’s appikon är lika träig som själva spelet.

Du vill inte få din publik att tro att din app är ett spel av typen woody block men sedan avslöja ett solnedgångsfärgat, skummande ordblockspel i stället. Inkonsekvent varumärkeshantering är dålig design.

Som en bloggare skriver på 99designs: ”Om din appdesign är platt bör din ikon också vara platt. Om din app innehåller skeuomorfism bör din ikon också ha åtminstone något inslag av skeuomorfism”.

För att appikonen ska återspegla appens färger, texturer och känsla så mycket som möjligt.

Tips att tänka på när du utformar din app-ikon

Nu när du har svarat på de fyra viktiga frågorna om app-design är det dags att börja skapa flera varianter eller förslag på design för din app-ikon. Börja med en grundläggande designskiss och experimentera sedan med olika färger, ramar och grafik.

Här är några tips som kan vägleda dig:

• Förlita dig på bara två eller tre färger. Fler än tre och din appikon börjar se för upptagen ut.
• Undvik att använda ett riktigt fotografi. Du kan dock alltid förvandla ett fotografi till en illustration/vektorbild.
• Tänk småskaligt. Din appikon kanske ser stor ut för dig när du utformar den, men den är liten på en iPhone- eller Android-skärm. Se till att varje element är tydligt även i ikonens minsta form.
• Spara ord till titeln och taglinen. En appikon är tänkt att ha en visuell effekt. Du kan säga vad du behöver säga i ord på titeln, taglinen och appbeskrivningen.
• Följ alltid Apples och Googles krav och riktlinjer för ikonstorlek i appbutiker. Du hittar Google Play’s storlekskrav här och Apple App Store’s storlekskrav här. Tänk på att du måste skapa flera versioner av din appikon för varje butik. Observera också att även om App Store på iPhone har rundade hörn bör du skicka in alla dina appfiler i fyrkantig form. Apples system kommer att avrunda hörnen åt dig.

När du har två eller tre potentiella app-ikoner att välja mellan är det dags för det viktigaste steget i ditt skapande av app-ikoner: split-testning av dina ikoner för att ta reda på vad din målgrupp tycker.

Bortom App Store-ikonstorlek: split-testning av app-ikoner på PickFu

Det bästa sättet att veta vad din målgrupp tycker om din app-ikon är att split-testa den på PickFu innan du faktiskt publicerar din app-lista på Google Play Store eller App Store. Visst kan du göra ett A/B-test i appen och köra flera varianter i själva butiken, men det är en långsam process som kan ta din tid och dina pengar i anspråk.

Du får den feedback du behöver utan att förlora pengar i processen genom att göra ett splittest med en pool av respondenter på PickFu innan du publicerar din appikon live.

Det tar bara några minuter att sätta upp en omröstning på PickFu. Minns du hur jag sa att målgruppsinriktning är avgörande? PickFu gör det enkelt för dig. Du kan rikta in dig på iOS- eller Android-enheter, om de är mobilspelare och hur mycket de har spenderat i App Store, bland många andra användbara egenskaper.

En apputvecklare använde sig nyligen av PickFu för att testa mellan två ikoner för en dejtingapp.

Den första ikonen visar den rosa profilen på en kvinna som håller en telefon, apptiteln i två olika färger och en rödaktig och orange bakgrund. Totalt har den här app-ikonen ungefär sex olika färger.

Det andra alternativet tar bort kvinnan, behåller en mer strömlinjeformad orangeröd bakgrund och låter orden vara kvar, men i vitt med ett litet hjärta instoppat i böjningen av bokstaven M. Den här app-ikonen har bara tre färger.

Respondenterna röstade överväldigande mycket för det enklare och renare alternativ B. Till skillnad från i ett traditionellt live A/B-test ger PickFu-respondenterna dig detaljerad skriftlig feedback. Så vi kan se exakt varför alternativ B vann.

För det första uppskattade respondenterna alternativ B:s enklare och mer professionella utseende och sa saker som: ”Jag gillar enkelheten i den här och att den inte pekar ut ett kön för användning” och ”Jag ogillar verkligen den ljusa lila/rosa färgen i alternativ A – den är verkligen jobbig för ögonen.”

Förhoppningsvis valde app-utvecklaren den andra app-ikonen, som med mycket större sannolikhet kommer att locka till sig potentiella användare än alternativ A.