Nästan varje designer tänker på appdesign idag. En av de minsta funktionerna i varje app är ikonen som används för att representera den på skärmen på alla mobila enheter och i appbutikerna. Att utforma en bra ikon är mer än att bara sätta en logotyp i en låda. Du behöver något som står ut bland alla andra appikoner där ute.
En bra ikon kan användas på olika sätt - för appar, sociala medier och till och med på mindre utskrivna projekt eller visitkort. Och allt som krävs är en liten design och planering.
1. Gör det lätt att läsa
En ikon behöver vara lätt att läsa. (Och vi pratar inte om text.) Visuell läsbarhet är nyckeln.
Ikonen ska innehålla en synkronisering som är mycket igenkännbar på grund av branding eller för att det är lätt att förstå. Tänk på ikonerna på skrivbordet på din dator till exempel. Du vet var saker finns på grund av ikonernas enkla natur - dokument lagras i mappar, musik spelas från en knapp i form av en notering och bilder lagras på en plats som ser ut som ett polaroidfoto.
När det gäller visuell läsbarhet är varumärke en stor del av övervägande. Stora hushållsmärken har ofta ikoner som ingår i deras logotyp eller en ikonisk bild. Människor tenderar att känna igen dessa element genast även i små storlekar. Detta kan vara lite tuffare för nya eller mindre märken eller ikonkoncept och designers kan välja att gå med andra tekniker för optimal påverkan.
2. Tänk ikon, inte bild
En ikon är inte ett foto i en låda. En ikon kan innehålla en bild, men det kan också vara en textrepresentation, logomark eller kombination av dessa element.
Det behöver bara vara mycket visuellt och igenkännligt. De flesta logotyper innehåller inte egentliga fotografier, men är en mer grafisk representation av en idé. (Detta begrepp betonas av behovet av att skapa en vektorbaserad ikon.)
En bild kan också bli svår att läsa i små storlekar och gå vilse i ett hav av andra ikoner på en användares telefon eller annan enhet. En mer grafisk representation kan ofta bära mer visuell vikt.
Mobilappikonen för Macys varuhus ovan är ett bra exempel på detta. Den stora vita stjärnan i mitten av en röd låda är lätt att identifiera. Ikonen varierar från standardbehandlingen av företagets signaturikon eftersom färgen vänds för att lägga tonvikten på ikonen. En röd bakgrund kommer sannolikt att sticka ut mer än en vit mot en mängd olika bakgrundsbilder.
3. Undvik ord
En sak som du inte ser i ikoner är användningen av ord. Det finns helt enkelt inte tillräckligt med utrymme för en ikon som är fylld med saker att läsa och förstå.
Som en tumregel, undvik text helt och hållet om det inte ingår i din logotyp. Även text som ingår i en logotyp bör övervägas noggrant innan den används i den primära logotypen.
Ikonen ska utformas på ett sådant sätt att det skapar identitet utan ord. Vidare, kom ihåg hur många ikoner som faktiskt används i sammanhang med de enheter som de visas på. De flesta innehåller en rad beskrivartekst under det aktuella ikonblocket.
Design Shack-ikonen, till exempel, är en som använder ett enstaka bokstav? D? med färg- och typbehandlingar som överensstämmer med webbplatsen. Denna enhetliga branding och lättläst brev skapar en visuell slips och anslutning utan ord.
4. Använd Vibrant Color
Vill du ha din ikon att sticka ut? Gå djärvt med färg. Ett vibrerande färgval hjälper dig att ställa upp appen på en mängd olika bakgrunder och kommer att fånga användarnas uppmärksamhet.
Det sista du vill ha från en ikondesign är att den ska blandas med alla andra tillgängliga alternativ. Detta gör blå - särskilt himmel och marinblå nyanser - en färg som du sannolikt vill undvika eftersom så många andra ikoner använder den.
Om blå är din primära logotyp eller varumärkefärg, försök att para det med något ljusare för påverkan. Tänk på en? Ny neutral? som lime grön, eller välja en säsongsbetonad nyans som en ljus orange i höst eller ljusrosa på våren.
5. Utveckla ett symbol eller en enkel logotyp
Du har sannolikt en logotyp för ditt varumärke, men när det gäller ikoner är en symbol också viktig. En symbol kan vara en enkel grafisk representation eller utdrag av en logotyp eller en bild.
Det behöver bara vara skarp och minnesvärd. Fler varumärken innehåller ikoniska symboler i deras standardiserade varumärken och logotyper för att skapa en fullständig koppling mellan mindre ikoner och större designprojekt.
Tänk på Snapchat-meddelanden och bilddelning. Spöksymbolen har blivit så igenkännlig att den kan visas som ikonanvändarna är bekanta med, i andra färgscheman och former och till och med som en fristående bild på en skylt. Detta är ett utmärkt exempel på en symbol som fungerar.
6. Kom ihåg skala
Medan de flesta av oss tänker på ikoner som de små sakerna på våra telefoner eller stationära datorer, är en ikon inte alltid liten. Den ska utformas på ett sätt som gör det användbart oavsett storlek.
Detta är särskilt viktigt på grund av det ständigt föränderliga digitala landskapet, framkomsten av mer näthinnan visas och eftersom olika plattformar och enheter kan göra ikoner i olika storlekar.
Byggde den stor och sedan skala ner.
7. Skapa i ett vektorformat
När det gäller skala och storlek är format också ett viktigt övervägande. En ikon måste skapas med en vektorbaserad design.
Att ha en vektorbild ger dig frihet att göra ändringar och spara ikonen för en mängd olika enheter, storlekar och visningar utan att skapa många individuella bilder. Eftersom verkligheten är kommer du behöva flera versioner av en ikon som är dimensionerad för en rad olika projekt.
Fördelen med vektor är flexibilitet. Men det finns en fångst. För många applikationer eller plattformar kommer du sannolikt att spara en kopia i ett icke-vektorformat för uppladdning.
8. Tänk utanför designfältet
Under de senaste månaderna har det funnits många ikoner som använder enfärgad bakgrund med en vit ikon, platt designteknik och långa skuggor. Även om dessa trender kan vara mycket roliga, sitter du inte fast i designboxen. Gör något annorlunda med din ikon.
Om alla andra arbetar med ruta kanter, överväg något mer avrundat. Lägg till en antydan av textur i bakgrunden för att sticka ut från all den platta färgen. Känner inte att du måste modellera din ikon på vad alla andra gör.
9. Gör det svartvitt
Det finns en rolig liten knep designers har använt i flera år för att testa effektiviteten i småskaliga mönster - gör det monokromt. Om din design kommunicerar samma meddelande med eller utan färg, fungerar det förmodligen. Om ikonen behöver färg att läsas, fortsätt arbeta med revisioner.
Personligen startar jag nästan alla designprojekt i svartvitt och börjar sedan senare lägga till färg. Det är skissen på ett datorkoncept. Om du skissar det på papper och det fungerar innan du verkligen börjar lägga färg, har tanken troligtvis en solid ram.
10. Tänk Square
Din ikon och alla delar inuti torgramen måste också passa ihop. Detta betyder inte att konstruktionen eller bilden måste vara exakt fyrkantig i form, men det grundläggande bildförhållandet för varje ikon har samma höjd och bredd.
Så, om du har en symbol som är super vertikal eller horisontell, behöver du ett sätt att fylla utrymmet runt det så att det inte går vilse i bakgrunden. Välj ett koncept som fyller en betydande del av ett utrymme som kommer att vara mestadels kvadrat. (Till och med en rund, cirkulär ikon har samma höjd och bredd.)
Slutsats
Det kan låta clich ?, men nyckeln till bra ikon design är att vara? väl? ikoniska. Det är så enkelt.
Design med enkelhet, färg och visuellt erkännande i åtanke. Tänk på gränssnitt och aktuella trender så att din design passar till standarder. (Du skulle inte designa en skeuomorf ikon för en iOS mobil app dessa dagar, skulle du?) Och ha kul; en ikon är användarens dörröppning till ditt digitala gränssnitt.
Bildkällor: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta och Microsiervos Geek Crew.