Dizajniranje sjajnih ikona za mobilne aplikacije

Analiza, smjernice i primjeri za pravi dizajn.

Jedna od najvažnijih marketinških odluka s kojom ćete se morati suočiti prilikom pokretanja aplikacije je dizajn ikone. Njegova važnost dolazi iz činjenice da će ikona utjecati na prvi dojam korisnika, a to će biti način da privuče njihovu pažnju prilikom pregledavanja tržišta. Naročito ako pokrećete startup temeljen na aplikacijama, vaš će uspjeh biti izravno povezan s vašom vidljivošću na tržištima aplikacija.

Ovaj će se članak usredotočiti na dizajn aplikacija za Android i iOS. Sažet ću neke najvažnije aspekte dizajna poput faktora oblika i izbora boje. Nadalje, u članku će biti navedeni neki izvori besplatnih resursa i smjernice koje treba slijediti.

1. PITANJA BOJE

Prevladavajuća boja vaše ikone jedan je od najtežih izbora. Uvijek je dobra opcija isprobati A / B test kako biste provjerili učinak svog dizajna. To vrijedi ne samo za shemu boja, već i za cijeli dizajn. Ovdje možete pročitati više o stvarnom slučaju A / B testiranja ikone aplikacije: izmjerili su gotovo 50% razlike u performansama od najbolje ikone do najgore.

Jedna dobra smjernica je upotreba vaše sheme boja na ikoni. Bolje je koristiti jednu od boja marke kao prevladavajuću, na primjer, u pozadini. Nick Saporito pruža nam dobar primjer korištenja branding boja za njegov dizajn ikona. Pogledajmo još nekoliko primjera ove uobičajene prakse:

Neke poznate ikone aplikacija iz Trgovine Play. Slike pripadaju njihovim vlasnicima.

Iz gornje ikone možemo naučiti nekoliko lekcija u boji. Kao što vidimo, svi oni koriste svoju glavnu boju marke za pozadinu ikone. Polovica koristi neki gradijent boje ili sjenčanja za tu pozadinu, a Tinder i Glovo su najočitiji slučajevi. To ikonu čini manje jednostavnom i možda zanimljivijom.

Osim glavne boje, Just Eat i Glovo u ikonu uključuju i druge svoje tvrtke. Međutim, primjetite da su tekst i logotipi obično bijeli i centrirani. U osnovi, pomoću opće boje pozadine i nekih bijelih ikonskih figura ili teksta tražimo kontrast i čistoću.

KAKO IZBORITI PREDMINANTNU BOJU?

Ovo nije samo izbor dizajna ikona, već brendiranje i opća marketinška odluka. Uobičajeno je da korporativnu boju svoje tvrtke odaberete kao prevladavajuću u vašoj ikoni, a ta će boja trebati odgovarati vašoj općoj marketinškoj strategiji i pozicioniranju. Na internetu postoji puno informacija o općenitom bojanju aplikacija, a možete pročitati ovaj sjajni članak Adoriasofta o shemama boja aplikacija za neku inspiraciju.

Nadalje, dobra je ideja naučiti se o osnovama psihologije boje prije nego što odaberete jednu ili drugu. Ovaj članak AttwoodDigital o značenju boje u marketingu prikazuje sažetak najčešće upotrebe boja za markiranje, koristeći ikone poznatih tvrtki kao demonstraciju. Sljedeći grafikon iz Digital Resource-a daje vam kratki pregled evociranja različitih boja:

Uz to, trebali biste pogledati sjajno djelo Stuart Hall-a koji proučava raspodjelu poznatih ikona aplikacija u kolu s bojama. Slike datiraju iz 2015. godine, ali opća ideja i dalje vrijedi:

Top 200 besplatnih boja ikona za iOS aplikacije, 2015. Iz boja ikona aplikacije, Stuart Hall.

Rezultati su slični za Androidovu trgovinu Play. Većina Top aplikacija koristi plavu ili crvenu kao prevladavajuću boju, a neke od njih imaju tendenciju da koriste različite nijanse zelene ili žute. Očito nedostaje peteljka i ljubičica, ali trebali bismo obratiti pozornost na redizajn ove konkretne ikone:

Ikona Instagrama, redizajnirana 2016. godine.

Instagram je izazvao trendove koristeći ikonu ljubičasto orijentiranu. Dobro je funkcioniralo, ali pazite: Instagram je već imao dovoljno snage na tržištu da se suoči s takvom odlukom. Neuobičajene boje razlikovat će vašu aplikaciju, ali postoji rizik da izgledate drugačije jer će korisnici možda osjetiti da vaša aplikacija nije ono što traže.

Međutim, Instagram redizajn i dalje je slijedio neke tipične obrasce: opću obojenu pozadinu s gradijentima i neke jednostavne i centrirane oblike s bijelim kontrastom.

BOJE: POVIJEST POPISA

Ne sjećate se svega? Samo provjerite sljedeći popis:

  • Koristite prevladavajuću boju pozadine, koja obično odgovara vašoj boji marke.
  • Koristite gradijente i sjene boja kako ne biste bili pretjerano čisti.
  • Upotrijebite bijelu boju ili stvorite kontrast koristeći svoju paletu marke za logotip, tekst ili oblike unutar ikone.
  • Pročitajte o psihologiji boje kako biste svoje boje uskladili s ciljem vaše aplikacije.
  • Neki A / B testovi pomoći će vam da provjerite je li vaš izbor boje ispravan.
  • Budite oprezni pri odabiru neuobičajenih boja poput ljubičaste ili tirkizne nijanse: to će razlikovati vašu aplikaciju, za dobro i za loše.

2. OBLICI: NE POSTOJI KAO

I iOS i Android dizajneri mogu koristiti preporučene predloške. Općenito govoreći, Google očekuje da ćete se igrati s oblicima i bojama na originalan način, dok će Apple koristiti više standardizirane ikone.

Ikone Apple Store i Google Play.

IOS SLUŽBENI IKON IKONA

Apple pruža predložak ikona u različitim formatima (Adobe Photoshop, Adobe Xd, Sketch, Keynote) kao dio službenih resursa Apple Design Resources, u njihovim
Smjernice ljudskog sučelja.

Oblik ikone iOS čini oblik službenog predloška

Apple vam daje samo predložak za testiranje različitih veličina ikone i pruža vam oblik maskiranja. Međutim, u svojim smjernicama preporučuju vam da svoju ikonu dizajnirate u potpunosti kvadratno jer će sustav automatski maskirati zaobljene kutove.

Preporučuje se stvaranje ikona u kvadratu za Apple Store, jer će ikona uvijek prikazivati ​​obrise prema obliku maske. Zbog toga samo nekoliko ikona ima kružne ili nepravilne oblike u Apple Storeu.

TEMPLATNI DIZAJN ANDROID MATERIJALA

Android nudi različite oblike ključnih linija za ikone Trgovine Play. Sve su njihove smjernice dio dokumentacije o dizajnu materijala.

Ikona prilagodljive maske s preporučenim oblicima, od Material Design.

Nadalje, Android 8.0 uveo je prilagodljive ikone koje se mogu maskirati za različite uređaje kao što se vidi na prethodnim slikama. Zbog toga nije loše dizajnirati opću kvadratnu ikonu koja se kasnije može maskirati. Nešto vrlo slično onome što Apple preporučuje za njihov App Store.

Najbolja praksa je potražiti oblik koji bolje odgovara svrsi vaše aplikacije. Na primjer, pravokutni oblik odgovara dizajnu omotnice ikone Gmail, a kružni oblici mogu nalikovati cilju aplikacije kamere. Dobra ideja je istražiti koje oblike koriste druge slične aplikacije.

Zapamtite da su preporučeni oblici samo alat za pomoć dizajnerima, ali oni nisu zapisani kamenom. Slobodno možete istražiti bilo koji prilagođeni oblik koji vam je draži, a ponekad je dobro da na vašoj ikoni elementi budu izvan okvira. Čak i Google to radi!

Primjeri ikona slobodnog oblika iz Trgovine Play
Savjet: Ako imate dvojbe, općeniti kvadratni ili zaobljeni kvadratni oblik uvijek su standardnije opcije.

OBLIKOVI: POVRATAK POPISA

Ponovno, ako vam se žuri, pri ruci ćete naći sljedeći popis:

  • Slijedite službene smjernice Googlea i Applea i provjerite njihove resurse iz Smjernica o ljudskim sučeljima i materijala.
  • Dizajn osnovne ikone kvadrata obično je prva opcija. Možete ga kasnije maskirati kako biste prilagodili svoj dizajn različitom tržištu.
  • Izvorni oblici mogu vam pomoći da u što većoj mjeri ispunite svrhu svoje aplikacije. Trokutasti oblik Google Playa je dobar primjer.
  • Uvijek možete isprobati prilagođene oblike i dodavati vanserijske elemente. Ikona CCleaner ili Google Maps dobri su primjeri.
  • Opet, A / B testovi pomoći će vam da provjerite koji je vaš najbolji izbor.

3. TEKST, OBLIKE I SLIKA

Jezgra vaše ikone. Iako su oblik i boja osnova vašeg dizajna, vašoj će ikoni trebati nešto drugo da bude jedinstvena i prepoznatljiva. Vratimo li se prvoj slici ovog članka, možemo primijetiti da svaka ikona koristi jednostavni logotip ili tekst za prepoznavanje njihove aplikacije. To je obično logo tvrtke ili barem pojednostavljena verzija.

Korištenje teksta kao jezgre vaše ikone može biti loša ideja zbog problema s skalabilnošću: kada se ikona prikazuje u manjoj veličini, tekst možda neće biti čitljiv. Međutim, korištenje jednog slova ili drugog oblika obično izbjegava ovaj problem. Isti problem skalabilnosti pojavljuje se kod složenih oblika i crteža, a to je razlog jednostavnosti većine dizajna ikona.

Ako obrasci nisu povezani s određenim logotipom ili slikom tvrtke, trebali bi nalikovati svrsi aplikacije. Na primjer, ikone fotoaparata obično sadrže bilo koji oblik sličan fotoaparatu kao što smo vidjeli u ikoni Instagrama. Aplikacije za bilješke obično sadrže neke reference na bilježnice, olovke ili ljepljive naljepnice. Jezične aplikacije mogu upotrebljavati zastave, karte i slova. Math aplikacije prikazat će brojeve i matematičke simbole. I tako dalje.

OBLIKI I TEKST: NASTAVAK POPISA

  • Izbjegavajte korištenje teksta na vašoj ikoni, ako je moguće. Problem će biti prilikom skaliranja ikone.
  • Težite se jednostavnim i lako prepoznatljivim oblicima ili logotipovima u svom dizajnu.
  • Obrasci, slova ili slike na vašoj ikoni trebali bi biti slični svrsi aplikacije, ako ne izravno brandu vaše tvrtke.
  • Igrajte se teksturama i dubinom, ali ne stvarajte vrlo složenu sliku. Jednostavni gradijenti i sjene će učiniti posao.

OVLAŠTENI IZLAZ: IGRE IKONOVI

Gotovo sve što smo ovdje pročitali ne vrijedi za ikone igara. Barem, ne potpuno istinito. Ako u App Storeu ili Google Playu pogledate većinu preuzetih igara, pronaći ćete složene ikone s puno boja, znakova i drugih elemenata izvađenih iz igre.

Za to postoje razlozi. Igre su namijenjene zabavi, a njihove ikone odražavaju nedostatak elegancije ili jednostavnosti, dok se kladite na agresivniji i ravnokontrolirani poziv za pažnju.

Ikone igara koriste vrlo opisne slike koje prikazuju ključne elemente iz igre i krupne crteže likova.

Ikone igara iz Trgovine Play.

Od prethodne slike samo jedna ikona prati tipične obrasce dizajna. To je zato što je Rise Up igra dizajnirana u minimalističkom stilu. Međutim, svi ostali koriste upečatljive teksture i boje.

ZAKLJUČCI

Dizajn prave ikone nije lak zadatak. Kao iu mnogim drugim situacijama, najbolji uspjeh nije neuspjeh.

Tri glavne komponente vaše ikone bit će shema boja, oblik ikone i sadržaj jezgre unutar oblika. Ako želite nešto započeti, upotrijebite osnovnu obojenu pozadinu s nekim gradijentima ili sjenama, a zatim postavite centrirani obrazac da biste jasno pokazali svrhu svoje aplikacije. Igranje s vanjskim oblikom pružit će vam priliku da budete originalni i drugačiji od ostalih aplikacija.

Međutim, ako dizajnirate ikonu za igru, zaboravite na jednostavnost. Potražite očitiji dizajn koristeći elemente igre da pozovete publiku. Isprobajte nešto smiješno, atraktivno i poigrajte se s dubinom i teksturama.

Ova priča objavljena je u najvećoj poduzetničkoj publikaciji The Startup, koju prati +397 714 osoba.

Pretplatite se za primanje naših najboljih priča ovdje.