Design af fantastiske ikoner til mobile apps

Analyse, retningslinjer og eksempler til at gøre det rigtige design.

En af de vigtigste markedsføringsbeslutninger, som du bliver nødt til at stå over for, når du lancerer en app, er designet af ikonet. Dets betydning kommer af det faktum, at ikonet vil påvirke brugerens første indtryk, og det vil være måden at fange deres opmærksomhed på, når de gennemser markedet. Især hvis du starter en app-baseret opstart, vil din succes være direkte relateret til din synlighed på app-markederne.

Denne artikel vil fokusere på Android- og iOS-apps-design. Jeg vil opsummere nogle af de vigtigste aspekter af designet som formfaktoren og valg af farve. Desuden indeholder artiklen nogle kilder til gratis ressourcer og retningslinjer, der skal følges.

1. FARVEMÅLET

Den overvejende farve på dit ikon er et af de mest vanskelige valg. Det er altid en god mulighed at prøve en A / B-test for at kontrollere effekten af ​​dit design. Dette gælder ikke kun for farveskemaet, men for hele designet. Du kan læse mere om et reelt tilfælde af A / B-test af et appikon her: De målte næsten 50% præstationsforskel fra det bedste ikon til det værste.

En god retningslinje er at bruge din app-farveskema på ikonet. Det er bedre at bruge en af ​​brandingfarverne som den dominerende, for eksempel i baggrunden. Nick Saporito giver os et godt eksempel på at bruge brandfarverne til hans ikondesign. Lad os se nogle andre eksempler på denne almindelige praksis:

Nogle berømte appikoner fra Play Store. Billederne hører til deres respektive ejere.

Vi kan lære flere farvetimer fra ikonet vist ovenfor. Som vi kan se, bruger de alle deres vigtigste brandingfarve til ikonets baggrund. Halvdelen af ​​dem bruger en slags farvegradient eller skygge for den baggrund, idet Tinder og Glovo er de mest indlysende tilfælde. Dette gør ikonet til at se mindre almindeligt ud og måske mere interessant.

Bortset fra den vigtigste farve inkluderer Just Eat og Glovo deres andre firmafarver på ikonet. Bemærk dog, at teksten og logoerne normalt er hvide og centrerede. Grundlæggende bruger vi en generel baggrundsfarve og nogle hvide ikoniske figurer eller tekst, vi søger for kontrast og renlighed.

HVORDAN VÆLGER DU DEN PREDOMINANTE FARVE?

Dette er ikke kun et ikondesignvalg, men en branding og generel markedsføringsbeslutning. Det er almindeligt, at du vælger din virksomheds virksomhedsfarve som den dominerende i dit ikon, og at farven bliver nødt til at matche din generelle markedsføringsstrategi og positionering. Der er masser af oplysninger om generel appfarve på Internettet, og du kan læse denne fantastiske artikel i Adoriasoft om appfarveskemaer for noget inspiration.

Desuden er det en god ide at lære om det grundlæggende i farvepsykologien, inden du vælger et eller andet. Denne artikel af AttwoodDigital om betydningen af ​​farve i marketing opsummerer de mest almindelige anvendelser af farver til branding ved hjælp af ikoner fra velkendte virksomheder som demonstration. Det næste diagram fra Digital Resource giver dig en kort oversigt over evokering af forskellige farver:

Derudover bør du se på det store arbejde i Stuart Hall, der studerer distributionen af ​​berømte appikoner i farvehjulet. Billederne er fra 2015, men den generelle idé er stadig gyldig:

Top 200 gratis iOS-appikonfarver, 2015. Fra farverne på et appikon, Stuart Hall.

Resultaterne er ens for Android's Play Store. De fleste af de Top apps bruger blå eller rød som den dominerende farve, og nogle af dem har en tendens til at bruge forskellige nuancer af grønt eller gult. Der er en åbenlys mangel på pink og lilla, men vi bør være opmærksomme på redesignet af dette særlige ikon:

Instagram-ikon, redesignet i 2016.

Instagram udfordrede trends ved hjælp af et lillaorienteret ikon. Det fungerede godt, men pas på: Instagram havde allerede tilstrækkelig kraft på markedet til at møde denne type beslutning. Ikke-almindelige farver differentierer din app, men der er en risiko ved at se anderledes ud, fordi brugerne måske føler, at din app ikke er det, de leder efter.

Imidlertid fulgte Instagram-redesign stadig nogle typiske mønstre: en generel farvet baggrund med gradueringer og nogle enkle og centrerede hvide kontrastformer.

FARVER: UDTAGELISTEN

Kan du ikke huske alt? Bare kontroller følgende liste:

  • Brug en overvejende baggrundsfarve, der typisk svarer til din brandfarve.
  • Brug farveforløb og skygger for at undgå at blive for meget almindelig.
  • Brug hvidt, eller opret kontrast ved hjælp af din branding-palet til logoet, teksten eller figurerne inde i ikonet.
  • Læs om Psychology of Color for at tilpasse dine farver til formålet med din app.
  • Nogle A / B-tests hjælper dig med at kontrollere, om dit farvevalg er korrekt.
  • Vær forsigtig, når du vælger ualmindelige farver som lilla eller turkis nuancer: det adskiller din app, til det gode og det dårlige.

2. FORMERNE: IKKE BARE EN KVARTAL

Både iOS- og Android-designere kan gøre brug af de anbefalede skabeloner. Generelt forventer Google, at du spiller med figurerne og farverne på en original måde, mens Apple vil foretrække mere standardiserede ikoner.

Apple Store og Google Play ikoner.

iOS OFFICIELT ICON-TEMPLAT

Apple leverer en ikonskabelon i forskellige formater (Adobe Photoshop, Adobe Xd, Sketch, Keynote) som en del af de officielle Apple Design Resources i deres
Retningslinjer for menneskelig grænseflade.

iOS-ikonform udgør den officielle skabelon

Apple giver dig bare en skabelon til test af forskellige størrelser for dit ikon og giver dig maskeringsformen. I deres retningslinjer anbefaler de dig dog at designe dit ikon helt firkantet, da systemet automatisk maskerer de afrundede hjørner.

Det anbefales at oprette firkantede ikoner til Apple Store, da ikonet altid viser konturer efter maskeformen. På grund af dette har kun et par ikoner cirkulære eller uregelmæssige former i Apple Store.

ANDROID MATERIAL DESIGN-TEMPLAT

Android leverer forskellige nøgleformer til Play Butik-ikoner. Alle deres retningslinjer er inkluderet i en del af dokumentationen til materialedesign.

Adaptivt maskeret ikon med de anbefalede former fra Materialedesign.

Derudover introducerede Android 8.0 adaptive ikoner, der kan maskeres til forskellige enheder, som det ses på de foregående billeder. På grund af det er det ikke en dårlig idé at designe et generelt firkantet ikon, der senere kan maskeres. Noget meget ligner det, Apple anbefaler til deres App Store.

Den bedste praksis er at kigge efter den form, der bedre matcher formålet med din app. F.eks. Passer den rektangulære form til konvolutdesignet til Gmail-ikonet, og cirkulære former ligner muligvis et mål for en kamera-app. En god ide er at udforske, hvilke former der bruger andre lignende apps.

Husk, at anbefalede former kun er et værktøj til at hjælpe designerne, men at de ikke er skrevet i sten. Du er fri til at udforske enhver tilpasset form, du foretrækker, og sommetider er det godt at have elementer, der går ud af boksen i dit ikon. Selv Google gør det!

Gratis-formede ikoneksempler fra Play Store
Tip: Hvis du er i tvivl, er de generelle kvadratiske eller afrundede kvadratformer altid de mere standardindstillinger.

FORMER: UDTAGELISTEN

Igen, hvis du har travlt, finder du praktisk liste med følgende liste:

  • Følg de officielle retningslinjer fra Google og Apple, og kontroller deres ressourcer fra retningslinjerne for menneskelige grænseflader og materialedesign.
  • At designe et grundlæggende firkantet ikon er normalt den første mulighed. Du kan maskere det senere for at tilpasse dit design til den forskellige markedsplads.
  • Originale figurer kan hjælpe dig med at empatisere formålet med din app. Den trekantede form på Google Play er et godt eksempel.
  • Du er altid fri til at prøve tilpassede figurer og tilføje out-of-the-box-elementer. CCleaner-ikon eller Google Maps er gode eksempler.
  • Igen hjælper A / B-test med at kontrollere, hvilken form der er din bedste mulighed.

3. TEKST, FORMER OG BILLEDER

Kernen i dit ikon. Mens form og farve er basen i dit design, har dit ikon brug for noget andet for at være unikt og genkendeligt. Hvis vi vender tilbage til det første billede af denne artikel, kan vi bemærke, at hvert ikon bruger en simpel logo form eller tekst til at identificere deres app. Det er normalt virksomhedens logo eller i det mindste en forenklet version.

Brug af tekst som kernen i dit ikon kan være en dårlig idé på grund af skalerbarhedsproblemet: Når dit ikon vises i en mindre størrelse, er teksten muligvis ikke læsbar. Brug af et enkelt bogstav eller en anden form undgår imidlertid normalt dette problem. Det samme skalerbarhedsproblem opstår for komplekse former og tegninger, og det er grunden til enkelheden i de fleste ikondesign.

Hvis formularerne ikke er knyttet til et specifikt logo eller firmabillede, skal de ligne formålet med appen. For eksempel har kameraikoner normalt en hvilken som helst kameralignende form, som vi så på Instagram-ikonet. Notes-apps inkluderer normalt en vis henvisning til notebooks, penne eller klæbrige etiketter. Sprogapps bruger muligvis flag, kort og bogstaver. Matematiske apps viser tal og matematiske symboler. Og så videre.

FORMS OG TEKST: UDTAGELISTEN

  • Undgå at bruge tekst på dit ikon, hvis det er muligt. Det vil være et problem, når jeg skalerer ikonet.
  • Formålet med enkle og let genkendelige former eller logoer i dit design.
  • Formularerne, bogstaverne eller billederne i dit ikon skal ligne formålet med appen, hvis ikke direkte din virksomheds brand.
  • Spil med teksturer og dybde, men skab ikke et meget komplekst billede. Enkle forløb og skygger gør arbejdet.

Den overordnede undtagelse: SPIL-IKONER

Næsten alt, hvad vi har læst her, er ikke sandt for spilikoner. I det mindste ikke helt sandt. Hvis du ser på de mest downloadede spil i App Store eller Google Play, finder du komplekse ikoner med masser af farver, karakterer og andet element, der er uddraget fra spillet.

Der er grunde bag dette. Spil er beregnet til at være sjovt, og deres ikoner afspejler den manglende elegance eller enkelhed, mens de satser på et mere aggressivt og ligetil opmærksomhedsopfordring.

Spilikoner bruger meget beskrivende billeder, der viser nøgleelementer fra spillet og nærbilleder af figurer.

Spilikoner fra Play Store.

Fra det forrige billede følger kun et ikon de typiske designmønstre. Det er fordi Rise Up er et spil designet med en minimalistisk stil. Imidlertid bruger alle de andre slående strukturer og farver.

KONKLUSION

At designe det rigtige ikon er ikke en let opgave. Som i mange andre situationer mislykkes den bedste succes ikke.

De tre hovedkomponenter i dit ikon vil være farveskemaet, ikonformen og kerneindholdet inde i formen. Hvis du vil have noget til at starte med, skal du bruge en grundlæggende farvet baggrund med nogle gradueringer eller skygger og derefter placere en centreret formular til tydeligt at vise formålet med din app. At spille med den eksterne form giver dig muligheden for at være original og anderledes end andre apps.

Men hvis du designer et ikon til et spil, skal du glemme enkelheden. Gå efter et mere oplagt design ved hjælp af elementer i spillet for at kalde publikum. Prøv noget sjovt, attraktivt og leg med dybde og teksturer.

Denne historie er offentliggjort i The Startup, Medium's største iværksætterpublikation efterfulgt af +397.714 mennesker.

Abonner for at modtage vores tophistorier her.