Republic / Artiklar /

Artikeln uppdaterad 2020-05-26.
Skriven av Niklas Rhöse.

Design av en applikationsikon

Emerson är ett globalt bolag inom forskning och tillverknings-industrin. Avdelningen "Process Management" i Sverige tillverkar system för att övervaka raffenaderier, både genom hårdvara som radarsensorer i själva oljecisternerna, och mjukvara i form av applikationer för att övervaka och styra systemen.

Repub­lic fick i upp­drag att ta fram ett helt nytt grafiskt gränss­nitt för en sådan mjuk­vara, kallad Rose­mont Tank Mas­ter. Det­ta inklud­er­ade alla ikon­er, meny­er, vyer och knap­par. Ett roligt och utmanande upp­drag med tanke på att det nya sys­temet skulle uppl­evas som mod­ernt och använ­darvän­ligt, sam­tidigt som äldre ​“powerusers” skulle kän­na igen sig. Men själ­va gränss­nit­tet får eventuellt bli en framti­da artikel, nu tänk­te jag fokusera på själ­va iko­nen för applikationen. 

Det­ta är inte tänkt att vara en kom­plett steg-för-steg-guide hur man des­ig­nar en ikon i Illus­tra­tor (det finns mas­sor av bra tuto­ri­als för det redan), utan mer av en case study där vi beskriv­er hur vi tänker och job­bar i ett sånt här uppdrag.

Bakgrund

Den tidigare ikonen föreställer en cylinder som förmodligen representerar en oljecistern. Framför cylindern är någon form av skala som är fylld till hälften. Tanken tycks ha alltså ha varit att visa att applikationen används för att mäta nivåer i cisterner, vilket ju är helt riktigt tänkt

Problemet med den äldre ikonen är dock flera. Det mest uppenbara är att själva cisternen är otydlig. Jag tror inte att det är uppenbart att det föreställer just en oljecistern, och gör man inte den kopplingen blir resten av ikonen också obegriplig. Det är också oklart och förvirrande varför taket är rött, en färg som ju oftast används för att signalera uppmärksamhet. Vidare passar ikonen inte riktigt ihop med det nya grafiska gränssnittet vi på Republic tog fram, och den ser dessutom inte speciellt modern ut. Dags att rita en ny alltså!

Brainstorming

Innan man börjar rita måste man naturligtvis ha en idé om själva motivet, och om vilken information som är viktigast att kommunicera. Tank Master är framförallt en programvara för att övervaka mängden vätska i olika tankar. Sedan kan man också ställa in larm, generera grafer och rapporter, och liknande. Detta är dock sekundärt, och skulle förmodligen bara blir plottrigt och förvirrande om man försökte få med allt i ikonen. När man väl har bestämt sig för vad ikonen skall kommunicera (att applikationen övervakar vätska i tankar) är det dags att fundera på hur man skall visa detta.

Jag började fundera på olika "mätstickor" för olja, liknande de man använder för att kontrollera oljan i bilen. Det är väldigt lätt att blir överkreativ och spinner iväg i långa accosiations-kedjor för att detta känns kreativt och "smart". Det är det dock nästan aldrig. Vi skall snart återkomma till oljetanken, men antag att man tex skall designa en ikon för att skicka mail. Den första tanken är att göra ikonen just som ett litet brev. Men sedan börjar man bli "kreativ" och får för sig att det är roligare och mer orginellt med en liten brevbärare istället. Och sedan skippar man brevbäraren och gör ikonen som en "typisk" brevbärar-mössa. Kul och lite orginellt!

Problemet är bara att det kanske bara är i din kommun brevbärarnas mössor ser ut sådär, medan de flesta andra associerar din ikon med en trafikpolis och undrar vad i hela friden det har med att skicka mail att göra. Skall du göra en ikon för att skicka brev, gör ikonen som ett brev. "Keep it simple, stupid", som designprincipen säger. Samma sak med min första skiss på mätstickan. Jag har aldrig kontrollerat oljan på en bil (delvis för att jag inte har något körkort) utan baserar min idé på luddiga föreställningar om hur sådana stickor ser ut. Dessutom kan min ikon lika gärna associeras med vilken linjal eller tumstock som helst, speciellt i sitt första utförande utan oljekladd. Tillbaka till ritbordet igen alltså. Om man skall göra en ikon för en applikation som visar hur mycket vätska det finns i en oljetank, kanske ikonen skall föreställa en tank där man ser hur mycket vätska där finns? Som sagt, keep it simple stupid.

Research

Den nuvarande tren­den i mod­er­na oper­a­tivsys­tem är gan­s­ka detal­jer­ade ikon­er i 3D-per­spek­tiv, se tex Apple Human Inter­face Guide­lines. Det är en bra idé att kika på sådana guide­lines så man inte gör ikon­er som ser helt fel ut i sam­man­hanget. Sam­tidigt är rik­tlin­jer­na gan­s­ka lud­di­ga, och även sto­ra drakar som Adobe verkar verkar inte bry sig näm­n­värt om att föl­ja dem. Är man för­resten inte nöjd med Adobes nuvarande ikon­er kan jag rek­om­mendera Mike Hop­kins vack­ra ikon­paket Cre­ative Sense . Mitt råd är att använ­da Apple´s och Microsofts guide­lines som just rik­tlin­jer, utan att stir­ra sig blind på dem.

Produktion

Jag letade upp en referens-bild på en oljecistern för att utgå ifrån, och för att se vilka formelement som var avgörande för att illustrationen skulle läsas som just en oljecistern, och inte en tunna eller en tandborstmugg. Det viktigaste är den vida, platta siluetten. Stegen på sidan är inte bara en trevlig detalj, utan hjälper också betraktaren att förstå skalan rätt. Det är en smaksak vilket program man föredrar när det kommer till ikondesign. Själv använder jag Adobe Illustrator till den här typen av ikoner och illustrationer. Om man däremot skapar mindre ikoner med en fast storlek (tex för menyn på en webbsida) föredrar jag att handpixla dem i Adobe Photoshop.

För att få rätt 3D-perspektiv utan att behöva dra upp perspektivlinjer manuellt brukar jag använda Illustrators inbyggda 3D-funktioner (Effect > 3D). De är tillräckligt enkla för att snabbt skissa upp 3D-modeller att utgå ifrån. Dock krävs det att man ljussätter manuellt med gradienter och skuggor för att få tillräcklig kontroll över slutresultatet.

Jag började med att rita upp en ytterkontur, som man sedan roterar kring sin egen axel för att bygga en 3D-kropp. Detta sätt att modellera brukar kallas "revolve" som betyder just rotera (jämför med ordet "revolver"). En fiffig sak med Illustrators 3D-funktionalitet är att de ligger som "effects" utanpå själva formen, vilket gör att de är helt oförstörande, och att man enkelt kan klicka bort dem i Apperance-paletten om man vill finsjutera själva banorna. Genom att först gruppera vätskan och tanken till en grupp, och sedan lägga på Revolve-effekten, fick jag in dem båda i samma perspektiv. För att få till "genomskärningen" av tanken roterade jag helt enkelt 270 grader istället för att gå hela varvet 360grader runt. Efter detta hade jag en bra bas (till vänster) att manuellt lägga till gradienter, högdagrar, skuggor och detaljer på (till höger)

Från färdig design till färdig ikon

Den färdiga illustrationen ser ni nedan. De blåa och svarta färgerna återkommer också i applikationens gränssnitt. En ikon består av flera olika bilder, i olika storlekar och olika antal färger. Detta för att operativsystemet skall kunna välja rätt version oavsett om det är en listvy med pytte-ikoner, eller en stor ikon i en förhandsgranskning. Således gör man oftast ett stort "orginal" på 512*512 pixlar, som oftast är det är den största storleken i moderna operativsystem. Sedan gör man de mindre storlekarna utifrån detta orginal. Ju mindre de är, dessto mer brukar man få finlira på pixelnivå för att få dem tydliga. De allra minsta versionerna brukar man byta perspektiv på, och för tydlighetens skull göra 2D-versioner som passar i listvyer och liknande.

För att göra denna process smidig använder jag Photoshop-pluginen Icon Builder från Iconfactory. Det är dels ett knippe macron som skalar om, placerar och sätter färgdjup, och dels ett pluginprogram för att bygga ihop bildfilerna till en enskild ikon. Lägg märke till att de små 16*16 pixlars versionerna är handpixlade 2D-varianter. Efter detta återstår bara att exportera ut ikonen via Icon Builder till antingen Mac- eller Windowsformat.