10 designhack for å lage flotte appikoner
Appikoner er det første brukerne legger merke til når de snubler over appen din. Med milliarder av apper som kjemper om oppmerksomheten i app-butikken, har et app-ikon blitt viktige forskjeller som bryter rotet og bringer brukere til appen din. De er faktisk det første berøringspunktet brukerne dine kommer over. Derfor er det ekstremt viktig å dra nytte av denne opplevelsen umiddelbart.
I dette innlegget vil jeg foreslå noen designhacks som kan hjelpe deg med å bygge kule appikoner som kan skille seg ut i appbutikken og muligens fremheve appen din blant andre som konkurrerer om installasjoner.
Før jeg forteller deg poengene, må du forstå at et appikons grunnleggende formål er å utvikle en umiddelbar forbindelse og skape kognitive signaler. Alt som er foreslått i dette innlegget går grunnleggende tilbake for å oppnå det.
Her er noen av designhakkene for å lage flotte appikoner
70%-regelen
Det er enighet blant designere om å bruke 70 % av ikonplassen til å fremheve hovedobjektet som er koblet til appen. Et objekt kan være hva som helst relatert til appen. Hvis du designer en fotoapp, kan objektet være et kamera eller en linse. For et spill kan det være ansiktet til en karakter og så videre.
Med andre ord, objektet skal okkupere majoriteten (70 %) av området til ikonet. Ideen er å utvikle umiddelbar kognisjon med brukerne og få dem til å navigere til app-siden for beskrivelsen. Når de lander på appsiden som har en beskrivelse, blir det mye lettere for deg å skaffe brukeren.
Det er imidlertid ikke nok å bare tillate større plass til objektet. Det må være fritt for rot også. Først da kan den koble seg sammen og skape raskere erkjennelse, noe som bringer oss til neste punkt.
Kutt rotet til det grunnleggende begynner å falle fra hverandre
Fortsett å kutte rotet til den grunnleggende ideen om objektet i ikonet begynner å komme ut. Med andre ord, fjern ikonet ditt til et punkt der objektet i ikonet går fra å være fornuftig til ikke-sensisk. Kutt ned til objektet beholder sin universelle form og kan identifiseres av et flertall av mennesker.
Hvis du for eksempel lager en app for å skjule bilder, kan du komme opp med et appikon som har "nøkler og lås" som hovedobjekt. Nå kan du fjerne skygger eller tellere og gå for et helt flatt ikon. Når det er gjort, kan du gå minimalistisk på designet, og leke helt med farger for å lage 3D-effekter for "lås og nøkkel"-formen som brukes i ikonet.
Kjedelig på blank og blank på matt
Den neste tingen som får et appikon til å skille seg ut er riktig bruk av kontrast. Designere bruker ofte kontrast mellom objektet og bakgrunnen til appikonet. Hvis du kan utføre de to trinnene som er nevnt ovenfor, kan du automatisk lande her.
Å skape kontrast har også mye å gjøre med farger. Start med en forhåndsbestemt fargepalett i tankene dine og jobb deg gjennom. Bare husk at ideen er å skape liv og kontrast mellom bakgrunnsfargen og elementene i objektet. Hvis du er en nybegynner i dette, kan du referere til noen design på Dribbble og laste ned fargepaletter etter eget valg.
Etter at du er ferdig med det endelige klippet, kan du lage 2-3 versjoner med mer hvitt eller svart til fargene. Nå kan du velge den som føles riktig for øynene dine. Etter iOS 7, mye vekt på å bli betalt på friske farger med sterkere toner av hvitt i dem.
Ikke la deg lure av din store Mac
Når det er installert på en enhet, vises appikonet ditt i forskjellige oppløsninger. For at den skal virke betydningsfull selv i sin minste avatar, må man designe den med proporsjonene i tankene. Ofte jobber designere på store Mac-skjermer der selv de minste detaljene også kan finne ut. Men når det samme ikonet er testet på en smarttelefon med varierte ikonstørrelser, går detaljene tapt.
Hvis du jobber på en Mac og lager ikonet app store først, kan du lett ha råd til å legge inn noen små detaljer. Men husk at det minste ikonet som er ment for innstillingsmenyen er et 29x29px bilde. Finere detaljer som små tekster eller andre symboler vil ikke være synlige på den.
Det du best kan gjøre er å ha størrelsen i tankene og bruke grunnleggende former og mønstre for å få jobben gjort. Omfavn enkelhet og fokus på ett enkelt objekt. Gjerne en unik form eller element som beholder sine konturer og detaljer til tross for skalering. På denne måten vil ikonet ditt se passende ut på tvers av alle oppløsningene som er foreslått i retningslinjer gitt av Apple og Android.
Prøv ikonet ditt mot en myriade av bakgrunnsbilder
Brukere har variert smak og preferanser som gjenspeiles av valg av bakgrunnsbilder og temaer på smarttelefonene deres. Det betyr at appikonet ditt må skille seg ut mot en myriade av farger. Derfor er det alltid en god idé å teste ikonets synlighet mot bakgrunnsbilder med syv grunnleggende farger. Du kan øke eller redusere hvit/svart-metningen i bakgrunnsbildene du bruker for å avslutte en tilfredsstillende test.
Det kan være noen situasjoner der tapetet vil forstyrre synligheten. Bakgrunnsbilder som selfies kan mangle ensartede farger og kan forstyrre synligheten til ikonet. Du kan ikke gjøre mye her inne, men som jeg sa, du kan teste dem mot de syv grunnleggende fargene for å komme i gang.
Bestem deg for abstraksjon og gjør iterasjoner
Designere lider av et konstant dilemma mellom abstraksjon og ekte skildring av hovedobjektet i ikonet. Med fremveksten av flate ikoner og brukergrensesnitt, har vektalderen flyttet seg mye mot abstraksjon, men man kan ikke bare gjøre unna en ekte skildring av et objekt. Virkelige objekter eller skeuomorfe ikoner er fortsatt sterk i appbutikken, og det er gyldige grunner for å være det.
Hvis du for eksempel lager en lydforbedrende app, kan du tegne en skeuomorf forsterker i appikonet i stedet for å flate den ut eller lage et linjeikon. Men gitt det faktum at en forsterker ikke er en kjent vare, vil dens erkjennelse reduseres hvis den blir flatet ut. For ting som er relativt vanlige og nyter universell kjennskap blant massene (et kamera for en fotograferingsapp), kan du definitivt komme ut med et flatt ikon. Men hvis appen er koblet til noe obskurt, vil det være bedre å holde den ekte eller skeuomorf.
En annen fin måte å komme frem til et godt ikondesign på er å gjøre flere iterasjoner med skeuomorphic og flat. Du kan ha det andre punktet i bakhodet mens du gjør det. Gjør flere iterasjoner og fjern noen få detaljer om gangen. Stable dem alle sammen side ved side og bestem hvilken du liker best og hvorfor.
For spill, identifiser en karakter
Å lage spillikoner kan være veldig gøy siden mange kreative ting kan oppnås ved å lage et. Midt i det må du ha lagt merke til at spill ofte har historier og karakterer. Hvis vi holder oss til regelen om å bygge erkjennelse med brukere, kan ansikter til karakterer fra selve spillet gjøre en god jobb. Faktisk er dette grunnen til at karakteransikter er så vanlige i ikoner for spillapper.
Hvis du lager et spill, må du finne ut hovedpersonen eller en karakter som er vanlig på alle nivåer. På grunn av sterk kjennskap til karakteren med spillerne, kan karakteren brukes til å skape en sterk tilbakekalling av spillet. Og av samme grunn kan det også bli appikonet for spillappen din.
Du kan bestemme en fargepalett og konstruere appikonet rundt disse. Ærlig talt blir det mye lettere hvis du går for et ansikt. Men samtidig må du kanskje legge til noen ekstra effekter for å få den til å skille seg ut.
Konsekvente fargepaletter og konvensjoner for ikoner og brukergrensesnitt
Brukergrensesnittet til appen kommer til å ha et spesifikt tema og bruk av visse farger. Det er best å bruke de samme fargene for å designe ikonet også. Du kan også gjøre det samme med enkelte elementer som du har implementert i brukergrensesnittet og bruke dem i ikonet. Å gjøre det gjør designet ditt mer enhetlig og fører til en sterkere tilbakekalling og fortrolighet med appen din blant brukerne.
Kreativitet redder dagen
Kjør et søk etter «å gjøre-apper» på Google Play, og du vil snuble over et rutenett fullt av hakemerker. Ja, de fleste av oppgavedesignerne kunne bare komme opp med et hakemerke som appikonet deres – et vanlig ikon for gjøremål. Men midt i den støyen skiller Evernote-ikonet seg komfortabelt ut.
Søkeresultater for begrepet «å gjøre-apper». Legg merke til at Evernote-ikonet skiller seg ut blant andre.
Ideen til ikonet er avledet fra det faktum at en elefant aldri glemmer. Det er kombinert med en strålende utførelse av et brettet elefantøre som betegner en notisblokk. Det skiller Evernote umiddelbart fra andre gjøremålsapper i butikken og skaper sterk erkjennelse.
Et annet eksempel på flott ikondesign kan tilskrives Pocket. Til å begynne med er ideen om appen unik. Selv om bokmerke har eksistert i lang tid, kunne det ikke få brukerne til å komme tilbake for å lese innholdet de lagret.
Pocket på den annen side brukte miniatyrbilder for å lage et klart visuelt minne. Appen utløser en "lagre dette innholdet"-følelse, og den er tydelig og smart avbildet av selve ikonet. Den røde formen refererer til en "lomme", mens pil ned viser "nedlasting" uten tvil.
Ikke bruk Bilder eller bilder
I tillegg til de ovennevnte tipsene, kan du også unngå direkte implementering av bilder og bilder i appikonet. Selv om du henviser til et fotografi, må du lage dine egne vektorer i Illustrator eller Photoshop. Først da vil det se autentisk ut og ha en magnetisk effekt.
Det kan høres ut som en klisjé, men du må holde designet rent. Jeg har allerede nevnt om å blande mer hvitt eller svart til fargene for å komme frem til den perfekte fargetonen du ønsker. Dette er veldig nyttig for å rydde opp i et ikon. Hvis noen farger gjøres lysere eller omvendt, faller det generelle støynivået ved forskjellige tilfeller.
Appikoner må bli som populære sanger som alle kan kjenne igjen, og følgende designhacks vil hjelpe deg med å lage et flott appikon. Jeg håper du fant poengene verdifulle. Hvis du har noe å legge til eller foreslå, skriv inn kommentarene nedenfor.