Ikoner & Illustrationer

Ikoner och illustrationer är närbesläktade, men inte riktigt samma sak. En ikon representerar alltid någonting, som en applikation eller en funktion i ett gränssnitt. En illustration däremot, kompletterar oftast någonting, som en artikel eller ett koncept. Vi skapar ibland ikoner eller illustrationer som fristående uppdrag, och ibland som delar i större design- eller gränssnittsprojekt.

Ikoner

En viktig del i arbetet med grafiska gränssnitt är ikondesign. Väl designade ikoner underlättar förståelsen, skapar ett enklare och renare gränssnitt och förbättrar användarupplevelsen.

En vektorillustration är skalbar och mycket användbar, men skall man göra riktigt små ikoner och behålla kvalitet och tydlighet måste man rita dem pixel för pixel. Här är ett exempel på ett ikon-projekt som vi nyligen avslutade :

 

Case Study: Ikoner för NovaCura

NovaCura är experter inom affärssystem och processförbättring. Deras verksamhetsområden är huvudsakligen produktion, distribution och service/underhåll samt ekonomi.

De behövde hjälp med att ta fram moderna och tilltalande ikoner för sina olika applikationer, som skall visualisera och matcha de tekniskt avancerade lösningarna. Förutom applikationsikoner behövdes även en uppsättning konsekventa ikoner att användas i deras processverktyg Flow.

NovaCura hade även önskemål om att kunna använda applikationsikonerna i andra sammanhang som trycksaker, vepor och filmer. Därför gjordes all grafik som vektorgrafik i Adobe Illustrator, så att slutleveransen (förutom själva ikon-filerna) var orginal som kan skalas upp utan några kvalitetsförluster.

 

Flow är ett program för att skapa processflöden på en enkelt och intuitivt sätt, i en vy som påminner om ett ritprogram. Som ikon skapade vi därför en halvt utrullad ritning, med “processpilar” som är på väg vidare ut från ritningen.

De processer man skapar i applikationen skall ju senare ske “in real life” vid exempelvis orderhantering eller produktion. Vi lade också till en penna för att få en känsla av att användaren skapar något eget, och för att få en bättre komposition i ikonen.

 

Texo är en integrationsplattform, och är betydligt mer abstrakt att visualisera. Vi skissade på olika idéer med pilar och flöden som sammanfogades, men det var svårt att tolka ikonerna och de blev för “akademiska”. Vi valde istället att återvända ritnings-idén från Flow, men med ett kugghjul som symboliserar den automatiska processen. Det syns tydligt att applikationerna tillhör samma svit, men gör helt olika saker.

 

 

Utöver dessa skapade vi även en ikon för mobila enheter, som också fick vara ganska abstrakt eftersom den skall kunna täcka in ett antal möjliga användningsområden. Som symbol för enkelhet och lätthet valde vi en fjäder. Ljussättning och perspektiv valdes i enlighet med riktlinjerna för Android-gränssnittet eftersom programmet i huvudsak kommer att användas på sådana enheter. Vi ritade också en allmän webb-ikon med samma processpilar runt en jordglob, samt en dokument-symbol.

 

 

Det behövdes även nya, enhetliga, ikoner för användning i Flow. Då man kan skala gränssnittet steglöst (för att få en bra överblick) krävdes det att ikonerna var enkla och tydliga. Vi arbetade med att ge varje ikon en tydlig egen färg och siluett, så att man lätt skall kunna särskilja dem från varandra även i väldigt utzoomade lägen där de bara blir några pixlar stora.

Både vi och kunden är väldigt nöjda med det färdiga arbetet, och vi ser fram emot att se ikonerna implementerade i de skarpa programvarorna framöver.

 

Illustrationer

Ibland vill kunden ha något som verkligen lyfter fram och poängterar budskapet. I många fall fungerar fotografiet utmärkt, andra gånger är illustrationen bättre lämpad.

Illustrationer är oftast uppbyggda av vektorgrafik. Det medför att man kan ändra storleken utan kvalitetsförluster; från visitkort till stortavlor. Därför är illustrationen ett riktigt bra sätt att bygga företagsidentitet och kan med fördel användas på webben, i tryck och i presentationer. Vi har bland annat gjort illustrationer till en bok om banksäkerhet, en bildbank för företagspresentationer och kategoribilder för studentrabatter. 

Ibland är det bättre att presentera material i form av rörlig grafik och video, för att till exempel förtydliga processer eller fånga besökarens uppmärksamhet. Vi gör animationer i Flash som lyfter allt material. Illustrationer och animationer passar även riktigt bra ihop när det gäller att förstärka budskap.

Ett axplock av illustrationer för Bytbostad.se , Gemalto och Humphree

« Tillbaka