10 tips for utforming av ikoner som ikke suger
Nesten hver designer tenker på appdesign i disse dager. En av de minste funksjonene i hver app er ikonet som brukes til å representere det på skjermen til hver mobilenhet og i appbutikkene. Å designe et flott ikon er mer enn bare å sette en logo i en boks. Du trenger noe som skiller seg ut blant alle de andre appikonene der ute.
Et godt ikon kan brukes på mange forskjellige måter - for apper, sosiale medier og til og med på mindre trykte prosjekter eller visittkort. Og alt som trengs er litt design og planlegging.
1. Gjør det enkelt å lese
Et ikon må være enkelt å lese. (Og vi snakker ikke om tekst.) Visuell lesbarhet er nøkkelen.
Ikonet skal inneholde et visual som er svært gjenkjennelig på grunn av merkevarebygging eller fordi det er lett å forstå. Tenk på ikonene på skrivebordet på datamaskinen din for eksempel. Du vet hvor ting er plassert på grunn av den enkle naturen til ikoner - dokumenter lagres i mapper, musikk spilles av fra en knapp i form av et notat og bilder lagres på et sted som ser ut som et Polaroid-bilde.
Når det gjelder visuell lesbarhet, er merkevarebygging en stor del av hensynet. Store husholdningsmerker har ofte ikoner som er en del av deres logo eller et ikonisk bilde. Folk har en tendens til å gjenkjenne disse elementene med en gang, selv i små størrelser. Dette kan være litt tøffere for nye eller mindre merker eller ikon-konsepter, og designere kan velge å gå sammen med andre teknikker for optimal effekt.
2. Tenk ikon, ikke bilde
Et ikon er ikke et bilde i en boks. Et ikon kan inneholde et bilde, men kan også være en tekstrepresentasjon, logomark eller en kombinasjon av disse elementene.
Det trenger bare å være svært visuelt og gjenkjennelig. De fleste logoer inkluderer ikke faktiske fotografier, men er en mer grafisk fremstilling av en idé. (Dette konseptet understrekes av behovet for å lage et vektorbasert ikon.)
Et bilde kan også bli vanskelig å lese i små størrelser og gå seg vill i et hav av andre ikoner på en brukers telefon eller annen enhet. En mer grafisk fremstilling kan ofte ha mer visuell vekt.
Mobilapp-ikonet for Macy's varehus ovenfor er et godt eksempel på dette. Den store hvite stjernen i midten av en rød boks er lett å identifisere. Ikonet varierer fra standardbehandlingen av selskapets signaturikon ved at fargen er omvendt for å legge vekt på ikonet. En rød bakgrunn vil sannsynligvis skille seg mer enn en hvit mot en rekke bakgrunnsbilder.
3. Unngå ord
En ting du ikke vil se på ikoner er bruk av ord. Det er rett og slett ikke nok rom for et ikon som er fylt med ting å lese og forstå.
Som en tommelfingerregel, unngå tekst helt med mindre det er en del av logoen din. Selv tekst som er en del av en logo, bør vurderes nøye før du bruker den i den primære logoutformingen.
Ikonet skal utformes på en slik måte at det skaper identitet uten ord. Husk videre hvor mange ikoner som faktisk brukes i sammenheng med enhetene de vises på. De fleste inkluderer en linje med beskrivende tekst under selve ikonblokken.
Design Shack-ikonet er for eksempel et som bruker en bokstav “d” med farge- og typebehandlinger i samsvar med nettstedet. Denne enhetlige merkevaren og lettleste bokstaven skaper et visuelt bind og uten sammenheng.
4. Bruk levende farger
Vil du at ikonet ditt skal skille seg ut? Bli fet med farger. Et levende fargevalg vil hjelpe deg med å app skille seg ut på en rekke bakgrunner og vil fange oppmerksomhet fra brukere.
Det siste du ønsker fra et ikonutforming, er at det kan smelte sammen med alle de andre tilgjengelige alternativene. Dette gjør blå - spesielt himmel og marine fargetoner - til en farge du sannsynligvis vil unngå fordi så mange andre ikoner bruker den.
Hvis blå er din primære logo eller merkefarge, kan du prøve å sammenkoble den med noe lysere for påvirkning. Tenk på en "ny nøytral" som kalkgrønn, eller velg en sesongens fargetone som en lys oransje om høsten eller knallrosa om våren.
5. Utvikle et symbol eller en enkel logo
Du har sannsynligvis en logo for merkevaren din, men når det gjelder ikoner er et symbol også viktig. Et symbol kan være en enkel grafisk fremstilling eller utdrag av en logo eller et bilde.
Det trenger bare å være skarpt og minneverdig. Flere merker bruker ikoniske symboler i deres standard merkevarebygging og logoer for å skape en fullstendig forbindelse mellom mindre ikoner og større designprosjekter.
Tenk på meldings- og bildedelingsappen Snapchat. Spøkelsessymbolet har blitt så gjenkjennelig at det kan vises som ikonet brukerne er kjent med, i andre fargevalg og former og til og med som et frittstående bilde på en tavle. Dette er et godt eksempel på et symbol som fungerer.
6. Husk skala
Mens de fleste av oss tenker på ikoner som de små tingene på telefonene våre eller stasjonære datamaskiner, er ikke et ikon alltid lite. Den skal utformes på en måte som gjør den brukbar uansett størrelse.
Dette er spesielt viktig på grunn av det stadig skiftende digitale landskapet, fremveksten av flere netthinnedisplay og fordi forskjellige plattformer og enheter kan gjengi ikoner i forskjellige størrelser.
Bygget den stor og deretter skalere ned.
7. Lag i et vektorformat
Når det gjelder skala og størrelse, er format også en viktig vurdering. Et ikon må opprettes ved hjelp av et vektorbasert design.
Å ha et vektorbilde vil gi deg frihet til å gjøre endringer og lagre ikonet for en rekke enheter, størrelser og utsiktsbilder uten å lage mange individuelle bilder. Fordi virkeligheten er at du vil trenge flere versjoner av et ikon i størrelse for en rekke prosjekter.
Fordelen med vektor er fleksibilitet. Men det er en fangst. For mange applikasjoner eller plattformer vil du sannsynligvis måtte lagre en kopi i et ikke-vektorformat for opplasting.
8. Tenk utenfor designboksen
De siste månedene har det vært mange ikoner som bruker bakgrunnsfarger med en farge, med et hvitt ikon, flate designteknikker og lange skygger. Selv om disse trendene kan være veldig morsomme, må du ikke sitte fast i designboksen. Gjør noe annet med ikonet ditt.
Hvis alle andre jobber med firkantede kanter, bør du vurdere noe mer avrundet. Legg til et snev av tekstur i bakgrunnen for å skille seg ut fra all flat farge. Føler ikke at du må modellere ikonet ditt på hva alle andre gjør.
9. Gjør det svart / hvitt
Det er et morsomt lite triks designere har brukt i årevis for å teste ut effektiviteten til småskala design - gjør det til svart / hvitt. Hvis designen din kommuniserer den samme meldingen med eller uten farge, fungerer den sannsynligvis. Hvis ikonet trenger farge for å kunne leses, fortsett å jobbe med revisjoner.
Personlig starter jeg nesten alle designprosjekter i svart-hvitt og begynner senere å legge til farger. Det er skissen på et datakonsept. Hvis du tegner det på papir og det fungerer før du virkelig begynner å legge til farger, har ideen sannsynligvis en solid ramme.
10. Tenk torg
Ikonet ditt og eventuelle deler i den firkantede rammen trenger også å passe riktig. Dette betyr ikke at designen eller bildet må være nøyaktig kvadratisk, men det grunnleggende sideforholdet for hvert ikon har samme høyde og bredde.
Så hvis du har et symbol som er super vertikalt eller horisontalt, trenger du en måte å fylle rommet rundt det slik at det ikke går seg vill i bakgrunnen. Velg et konsept som fyller en betydelig del av en plass som stort sett vil være firkantet. (Selv et avrundet, sirkulært ikon har samme høyde og bredde.)
Konklusjon
Det kan høres klisjé ut, men nøkkelen til god ikonedesign er å være… vel… ikonisk. Så enkelt er det.
Design med enkelhet, farge og visuell gjenkjennelse i tankene. Tenk på grensesnitt og aktuelle trender slik at du designer passer med standarder. (Du ville ikke designet et skeuomorfisk ikon for en iOS-app i disse dager, vil du?) Og ha det moro; et ikon er en brukeres døråpning til det digitale grensesnittet.
Bildekilder: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta og Microsiervos Geek Crew.
