8 enkla steg till bättre ikondesign
Ikoner är överallt. Från appikoner på hemskärmar till grafiska representationer som leder användarna genom en design är ikondesign en stor sak.
Det finns en fin konst till bra ikondesign. Inte bara måste elementet känna igen på minsta storlekar, bra vektorbaserade ikoner kan även skalas för att användas i överdimensionerade proportioner. Vissa designers använder även ikonstilstil bilder för dominerande bilder.
Så var börjar du? Här är en guide till att utforma en bättre ikon i åtta (något) enkla steg.
1) Börja med ett rutnät
Bra ikondesign börjar med en solid grund. Ett enkelt rutblock är allt du behöver för att börja skissa en ikon.
Använd samma griddat papper som du arbetade med i klassskolan för att skapa ikonskisser med penna och papper eller börja med ett kvadratiskt pixelgrid i designprogram. Du borde noga designa på en fyrkantig duk, eftersom de flesta ikoner hamnar i att passa in i kvadratiska utrymmen. (Detta inkluderar allt från ikoner för appar till ikoner i webbdesign eller för sociala medier.)
När du har ett rutnät, se till att ge dig själv ett element av vitt utrymme runt omkretsen. Detta ger dig tillräckligt med flexibilitet för att lägga till en bakgrund om det behövs och hålla ikonen från att bli avskuren i applikationer som kan ha rundade kanter eller andra typer av snedställningar.
Bara för att ditt rutnät är kvadratiskt betyder inte att din ikon måste vara. Den kan vara rund eller mer rektangulär. Kom ihåg: När du designar något som inte är kvadratiskt, borde det ställa upp horisontellt och vertikalt centrerat i gallret för enkel användning senare. Det hjälper dig också att behålla en konsekvent skala för en ikonuppsättning.
Nätet är bara för att hjälpa dig att skapa en ram där du kan utforma konsekvent. Som en bonus kan du också använda rutnätet för att hjälpa till att rita element i ikonen; använd rader för att rita raka vinklar eller bestämma placeringen av slag i konstruktionen.
2) Bygg med geometri
Ikoner är ofta små, så det är viktigt att bygga med element som användare känner igen vid en blick. Därför är så många ikoner rotade i geometriska former.
Cirklar, kvadrater och trianglar är de mest populära kombinationerna av former. Användare behöver inte tänka på dem eller fråga vad de är. Varje form är enkel och identifierbar. Därefter kan de sammanfogas och anslutas för att skapa andra element med samma geometriska styling.
Titta på ikonen för Dropbox, till exempel. Det är inget mer än några kvadrater kopplade ihop för att bilda en låda. Konceptet är kreativt, enkelt och lätt att läsa i alla storlekar.
Ett annat populärt "geometrisk" alternativ är att använda en enda blockbokstav som en del av ikonografi. Även om detta inte fungerar bra för utbredd applikation kan den fungera som en funktionell varumärkesidentifierare. Facebook är ett primärt exempel på den här ikonanvändningen i åtgärd.
3) Skapa en unik form
Medan du börjar med cirklar och rutor är det bra, du vill skapa en form som är din. Detta är viktigast om du arbetar med en varumärkesidentifierande ikon. Även till synes komplicerade ikoner börjar ofta med enkla former som förvandlas till något mer unikt.
När det gäller unika är det några designelement att tänka på.
- Håll dig borta från bilder. De ser inte bra ut små.
- Håll dig borta från text. Användare kan inte läsa den.
- Vissa trender är värda. Plana och nästan platta ikonstilar fungerar underverk.
- Arbeta med raka linjer och vinklar anslutna med punkter på rutnätet. Kurvor kan bli besvärliga snabbt.
- De bästa ikonerna fungerar i färg men är också igenkännliga som svartvita konturer.
4) ge det gott om utrymme
Ikoner behöver gott om utrymme att andas. Tänk på hur ikoner används. Särskilt om du utformar en appikon som användare kommer att se på galen bakgrundsbilder på deras enheter, måste designen sätta in i ramen lite för att göra den mer läsbar och särskiljbar.
Inuti ditt rutnät skapar du en konsekvent kant runt kanten. Tänk på detta utrymme nästan som du skulle när du arbetar med en blöda i tryckdesign. Färgen behöver sträcka sig till den här delen av duken, men det kommer sannolikt att vara osynligt.
5) hålla fast vid varumärkets färger
Bli inte galen med ikonens färgpaletter bara för att du kan. Om du skapar något för varumärkesarbete, håll dig till din färgpalett. Medan du kan avvika från din normala varumärkeslogotyp för en ikon, bör färg vara konsekvent.
Om du arbetar på en ikonuppsättning för ett webbdesignpaket eller annan användning, börja först med svarta eller vita ikoner först. Lägg sedan till färg när du närmar dig designen. Genom att arbeta med enkla element med hög kontrast - svart på vitt eller vitt på svart - får du verkligen en känsla för hur varje ikon ser ut i rymden. Om det fungerar oberoende av färg, är chansen större så att det fungerar bra med färg som också läggs till.
6. Använd konsekventa divots
Var uppmärksam på varje detalj i ikondesignen. Har du klippt ut ett vinklat hörn i designen? Överväg då att göra det på alla hörn.
Även om dessa små detaljer inte verkar vara viktiga - kan de inte ens vara helt synliga i minsta storlekar - de kan lägga till en klassisk stil på ikoner som används i mer grafiska bildskärmar.
Fler designers använder ikoner som knappar i hela mönster och för att hjälpa ögonen mellan mer text tunga element. Noggrant utformade ikoner kan hjälpa till att glädja användaren och uppmuntra webbkonverteringar.
7. Design för minsta storlek
Medan ikoner kan användas i nästan vilken storlek som helst, vill du utforma designen så att den fungerar i minsta storlekar. Vanligtvis favikon ikoner laddas upp på bara 16 av 16 pixlar. Är din ikon deklarerad i den här storleken?
Om svaret är nej, har du två val:
- Börja med ikondesignen.
- Skapa en alternativ ikon för små mellanslag, till exempel favicons.
8) Dekorera inte
Slutligen, håll det enkelt. Motstå strävan att dekorera din ikondesign. Några av de bästa programmen lider fortfarande av obekväma ikoner. (Wunderlist kommer omedelbart att tänka på. Tänk bara på hur mycket trevligare det skulle se ut utan skuggorna och skissera.)
Dekoration slutar bara se obehagligt i dessa små utrymmen. Det kan också överväldiga designen. Tänk på ikoner som design accentmärken, de är inte det primära fokuset. Om en användare lungar på en ikon för länge för att de försöker utreda meningen med den, kan de förlora vad de ska göra. Ikoner ska signalera snabba interaktioner.
Slutsats
Ikon design kan vara mycket roligt om du har tid att finpussa denna färdighet. Men om du inte är en expert oroa dig inte. Det finns gott om bra affärer där ute som släpp ikonen för att du ska kunna använda i dina projekt.
Om du bara börjar med ikondesign, är det värt att ladda ner en av dessa uppsättningar. Kasta ikonerna på ett rutnät och plocka dem ifrån varandra. Du kan lära dig mycket om hur du bättre kan skapa dina egna enkla former från den här övningen.