10 designhack för att göra fantastiska appikoner
Appikoner är det första som dina användare lägger märke till när de snubblar över din app. Med miljarder appar som kämpar om uppmärksamheten i appbutiken har en appikon blivit viktiga skillnader som bryter röran och tar användare till din app. De är verkligen den första kontaktpunkten som dina användare stöter på. Därför är det extremt viktigt att dra nytta av denna erfarenhet direkt.
I det här inlägget kommer jag att föreslå några designhack som kan hjälpa dig att bygga coola appikoner som kan sticka ut i appbutiken och eventuellt lyfta fram din app bland andra som konkurrerar om installationer.
Innan jag berättar poängen för dig måste du förstå att en appikons grundläggande syfte är att utveckla en omedelbar anslutning och skapa kognitiva ledtrådar. Allt som föreslås i det här inlägget går i grunden tillbaka för att uppnå det.
Här är några av designhackarna för att skapa fantastiska appikoner
70%-regeln
Det råder enighet bland designers om att använda 70 % av ikonutrymmet för att markera huvudobjektet som är kopplat till appen. Ett objekt kan vara vad som helst relaterat till appen. Om du designar en fotoapp kan objektet vara en kamera eller ett objektiv. För ett spel kan det vara ansiktet på en karaktär och så vidare.
Med andra ord bör objektet uppta majoriteten (70 %) av ikonens yta. Tanken är att utveckla omedelbar kognition med användarna och få dem att navigera till appsidan för beskrivningen. När de väl landar på appsidan som har en beskrivning blir det mycket lättare för dig att skaffa användaren.
Det räcker dock inte att bara tillåta större utrymme till föremålet. Det måste vara fritt från skräp också. Först då kan den ansluta och skapa snabbare kognition, vilket tar oss till nästa punkt.
Skär bort röran tills grunderna börjar falla isär
Fortsätt att minska röran tills den grundläggande idén om objektet i ikonen börjar komma fram. Med andra ord, ta bort din ikon till en punkt där objektet i ikonen går från att vara vettigt till meningslöst. Skär ner tills föremålet behåller sin universella form och kan identifieras av en majoritet av människor.
Om du till exempel skapar en app för att dölja bilder kan du komma upp med en appikon som har "nycklar och lås" som det primära objektet. Nu kan du ta bort skuggor eller räknare och välja en helt platt ikon. Efter när det är gjort, kan du vara minimalistisk på designen och leka helt med färger för att skapa 3D-effekter för "lås och nyckel"-formen som används i ikonen.
Matt på glänsande och glänsande på matt
Nästa sak som får en appikon att sticka ut är lämplig användning av kontrast. Designers använder ofta kontrast mellan objektet och bakgrunden på appikonen. Om du kan utföra de två stegen som nämnts ovan kan du landa här automatiskt.
Att skapa kontraster har också mycket att göra med färger. Börja med en förutbestämd färgpalett i ditt sinne och arbeta dig igenom. Kom bara ihåg att tanken är att skapa livfullhet och kontrast mellan bakgrundsfärgen och elementen i objektet. Om du är nybörjare i detta kan du hänvisa till några designs på Dribbble och ladda ner färgpaletter som du väljer.
När du är klar med den slutliga skärningen kan du skapa 2-3 versioner med mer vitt eller svart till färgerna. Nu kan du välja den som känns rätt för dina ögon. Efter iOS 7, mycket betoning på att betalas på fräscha färger med starkare toner av vitt i dem.
Låt dig inte luras av din stora Mac
När den har installerats på en enhet visas din appikon i olika upplösningar. För att den ska verka betydelsefull även i sin minsta avatar måste man designa den med proportionerna i åtanke. Ofta arbetar designers på stora Mac-skärmar där även de minsta detaljerna kan listas ut. Men när samma ikon testas på en smartphone med olika ikonstorlekar går detaljerna förlorade.
Om du arbetar på en Mac och gör ikonens appbutik först, kan du lätt ha råd att lägga in några små detaljer. Men kom ihåg att den minsta ikonen som är avsedd för inställningsmenyn är en bild på 29x29px. Finare detaljer som små texter eller andra symboler kommer inte att synas på den.
Det du bäst kan göra är att ha storleken i åtanke och använda grundläggande former och mönster för att få jobbet gjort. Omfamna enkelheten och fokusera på ett enda objekt. Gärna en unik form eller element som behåller sina konturer och detaljer trots skalning. På så sätt skulle din ikon se lämplig ut för alla upplösningar som föreslås i riktlinjer från Apple och Android.
Prova din ikon mot en myriad av bakgrundsbilder
Användare har olika smaker och preferenser som återspeglas av valet av bakgrundsbilder och teman i deras smartphones. Det betyder att din appikon måste sticka ut mot en myriad av färger. Därför är det alltid en bra idé att testa din ikons synlighet mot bakgrundsbilder i sju grundfärger. Du kan öka eller minska den vita/svarta mättnaden inom tapeterna du använder för att avsluta ett tillfredsställande test.
Det kan finnas några situationer där tapeten skulle störa sikten. Bakgrundsbilder som selfies kan sakna enhetliga färger och kan störa ikonens synlighet. Du kan inte göra mycket här men som sagt, du kan testa dem mot de sju grundfärgerna för att komma igång.
Bestäm dig för abstraktion och gör iterationer
Designers lider av ett konstant dilemma mellan abstraktion och verklig skildring av det främsta objektet i ikonen. Med framväxten av platta ikoner och användargränssnitt har viktåldern skiftat mycket mot abstraktion, men man kan inte helt enkelt göra sig av med en verklig skildring av ett objekt. Verkliga föremål eller skeuomorfa ikoner är fortfarande starka i appbutiken och det finns giltiga skäl för att vara det.
Om du till exempel gör en ljudförbättrande app kan du rita en skeuomorf förstärkare i appikonen istället för att platta till den eller göra en linjeikon. Men med tanke på det faktum att en förstärkare inte är en bekant vara, skulle dess kognition minska om den plattas till. För saker som är relativt vanliga och som åtnjuter universell förtrogenhet bland massorna (en kamera för en fotoapp), kan du definitivt komma ut med en platt ikon. Men om appen är ansluten till något obskyrt är det bättre att hålla den verklig eller skeuomorphic.
Ett annat bra sätt att komma fram till en bra ikondesign är att göra flera iterationer med skeuomorphic och platt. Du kan ha den andra punkten i åtanke när du gör det. Gör flera iterationer och ta bort några detaljer åt gången. Stapla dem alla sida vid sida och bestäm vilken du gillar mest och varför.
För spel, identifiera en karaktär
Att göra spelikoner kan vara riktigt roligt eftersom många kreativa saker kan åstadkommas genom att göra en. Mitt i det måste du ha märkt att spel ofta har berättelser och karaktärer. Om vi håller oss till regeln om att bygga upp kognition med användare så kan ansikten på karaktärer från själva spelet göra ett bra jobb. Faktum är att detta är anledningen till att karaktärers ansikten är så vanliga i ikoner för spelappar.
Om du gör ett spel måste du ta reda på huvudpersonen eller en karaktär som är gemensam på alla nivåer. På grund av karaktärens starka förtrogenhet med spelarna kan karaktären användas för att skapa en stark återkallelse för spelet. Och av samma anledning kan den bli appikonen för din spelapp också.
Du kan bestämma en färgpalett och konstruera din appikon runt dem. Ärligt talat blir det mycket lättare om du går efter ett ansikte. Men samtidigt kan du behöva lägga till några ytterligare effekter för att få det att sticka ut.
Konsekventa färgpaletter och konventioner för ikoner och användargränssnitt
Appens gränssnitt kommer att ha ett specifikt tema och användning av vissa färger. Det är bäst att använda samma färger för att designa ikonen också. Du kan också göra detsamma med vissa element som du har implementerat i användargränssnittet och använda dem i ikonen. Att göra det gör din design mer enhetlig och leder till ett starkare återkallande och förtrogenhet med din app bland användarna.
Kreativitet räddar dagen
Kör en sökning efter "att göra-appar" på Google Play och du kommer att snubbla över ett rutnät fullt av bockar. Ja, de flesta av att göra-apparnas designer kunde bara komma med en bock som sin appikon – en vanlig ikon för att göra. Men mitt i det bruset sticker Evernote-ikonen ut bekvämt.
Sökresultat för termen "att göra appar". Lägg märke till att Evernote-ikonen sticker ut bland andra.
Idén med ikonen kommer från det faktum att en elefant aldrig glömmer. Det är kopplat till ett briljant utförande av ett vikt elefantöra som betecknar ett anteckningsblock. Det skiljer Evernote direkt från andra att göra-appar i butiken och skapar stark kognition.
Ett annat exempel på fantastisk ikondesign kan tillskrivas Pocket. Till att börja med är idén med appen unik. Även om bokmärken funnits länge, kunde det inte få användare att komma tillbaka för att läsa innehållet de sparat.
Pocket å andra sidan använde miniatyrer för att skapa ett tydligt visuellt minne. Appen utlöser en "spara detta innehåll"-känsla och den avbildas tydligt och smart av själva ikonen. Den röda formen hänvisar till en "Pocket" medan nedåtpilen visar "nedladdning" utan tvekan.
Använd inte foton eller bilder
Förutom de ovan nämnda tipsen kan du också undvika direkt implementering av foton och bilder i appikonen. Även om du hänvisar till ett fotografi måste du skapa dina egna vektorer i Illustrator eller Photoshop. Först då kommer det att se autentiskt ut och ha en magnetisk effekt.
Det kan låta som en klyscha men du måste hålla din design ren. Jag har redan nämnt om att blanda mer vitt eller svart till färgerna för att komma fram till den perfekta färgtonen du vill ha. Detta är väldigt praktiskt för att rensa bort en ikon. Om vissa färger görs ljusare eller vice versa, sjunker den totala ljudnivån vid olika tillfällen.
Appikoner måste bli som populära låtar som alla kan känna igen och följande designhack hjälper dig att skapa en fantastisk appikon. Jag hoppas att du tyckte att poängen var värdefulla. Om du har något att lägga till eller föreslå, skriv dina kommentarer nedan.