In de semiotiek is een icoon een teken dat in zijn vorm overeenkomt met zijn betekenis, hetgeen waarnaar het in de realiteit verwijst.
Om het gebruik van iconen in de Sunny Cars applicatie te verbeteren is er een Sunny Cars icon-family ontworpen en ontwikkeld.
Aanleiding
In de oorspronkelijke opzet van de Sunny Cars applicatie werd gebruik gemaakt van FontAwesome (generiek) en Icomoon (specifiek) om iconen te tonen.
Daar zaten een aantal minpunten aan:
- FontAwesome moest volledig worden ingeladen, al werden slechts enkele iconen gebruikt.
- Beheer van de Icomoon iconen was complex en potentieel foutgevoelig.
Met de ontwikkeling van icoon variabelen zijn we nu in staat de daadwerkelijke svg-code in de broncode op te nemen.
Dit biedt ons een aantal voordelen:
- We hoeven niet langer gebruik te maken van icon-fonts.
- Sneller: minder calls, minder laadtijd.
- Flexibeler: klaar voor animatie en gebruik offline media.
- Maatvoering iconen is onafhankelijk van maatvoering tekst.
- Beter beheerbaar.
- Volledige creatieve vrijheid.
Focus in het ontwerpproces
Bij het design van de nieuwe Sunny Cars iconen is er in het bijzonder aandacht besteed aan:
- Consistentie in vormtaal.
- Leesbaarheid op klein formaat.
- Afstemming op de Sunny Cars Brand Identity.
- Minimalisatie bestandsgroottes.
Vormtaal
Er is geen specifiek creatief kader gecreëerd voor het design van de iconen. Uitgangspunt voor ieder icoon was het behoud van de herkenning voor de gebruiker. Verbeteringen lagen voornamelijk op het gebied van consistentie (vorm, hoekafronding, verdeling op het grid, gebruik van typografie en elementen) en afstemming op de typografie van de Sunny Cars Brand Identity.
Leesbaarheid
Door het verwijderen van onnodige details in de oude iconen en het versterken van de vormen die overbleven, zijn de iconen leesbaarder geworden. Dit merk je vooral op wanneer de iconen op een klein formaat worden gebruikt.
Sunny Cars stijl
Iconen en typografie gaan in een user interface meestal hand in hand. De Sunny Cars Brand Identity maakt gebruik van het lettertype Calibri. Door de iconen af te stemmen op de vormtaal, stijlkenmerken en ritme van Calibri creëren we een harmonie die zorgt voor naadloze integratie met de Brand Identity.
Vereenvoudiging en optimalisatie
Met zorgvuldige controle van ieder coördinaat van een vectorpunt in het grid en het optimaliseren van de .svg output met een specifieke set regels hebben we de totale bestandsgrootte van de icon-family (256 iconen) kunnen beperken tot 250 kB.
Gewichten
De oorspronkelijke Sunny cars iconen waren overwegend 'bold'. We vonden het nodig om deze subtieler te maken en besloten om verschillende gewichten te introduceren, zodat hetzelfde icoon beter kan worden afgestemd op de omgeving waarin je het wil gebruiken.
Met deze basisprincipes ontwikkelden we de gewichten:
- Behoud vorm en verschijning, maar zorg voor een graduele afname.
- Ga uit van 3 gewichten: 'bold' (vet gedrukt), 'regular' (normaal) en 'light' (licht gedrukt).
- Hanteer voor 'bold' een lijndikte van 8 pixels, voor 'regular' 6 pixels en voor 'light' 4 pixels.
Badges
Om efficiënt meerdere stappen in een proces te kunnen duiden (bijvoorbeeld: een boeking) zijn er badges geïntroduceerd. Deze kunnen op een bestaand icoon worden geplaatst. Om te voorkomen dat badges onleesbaar worden op klein formaat zijn deze op een 16x16 pixel grid ontworpen. Om de badge duidelijk te scheiden van het icoon waarop het geplaatst wordt is er een 2 pixel lijn geïntegreerd in het badge grid. De badge zelf is daardoor dus 12x12 pixels.
Badges zijn rond van vorm om zoveel mogelijk van het icoon waarop ze geplaatst worden in tact te laten. Badges moeten eenvoudig te begrijpen zijn en iets toevoegen aan het bestaande icoon. Het oorspronkelijke icoon mag niet minder goed leesbaar worden nadat er een badge op is geplaatst.
Naamgeving conventie
Er is gebruik gemaakt van een omschrijvende naamgeving conventie. Hierbij omschrijft de naam van het icoon hetgeen je ziet afgebeeld (bijvoorbeeld: 'icon-hand-with-key') in tegenstelling tot hetgeen waar het icoon voor staat (in dit geval: de representative service). Op deze manier is zonder visuele referentie duidelijk wat het icoon verbeeldt, en kan het voor verschillende situaties worden ingezet.
De Icon Library
Al tijdens het design proces werd duidelijk dat er een behoefte was om de nieuw vormgegeven iconen binnen de organisatie te delen. Om te voorkomen dat er verouderde versies van iconen in omloop zijn hebben we hiervoor de icon-family ondergebracht in een live icon-library. Deze library bevat alle 256 iconen, verdeeld in categorieën en voorzien van een omschrijving van de toepassing per icoon. Via de library kun je een icoon zoeken, bekijken en downloaden.
De volledige icon-family is vastgelegd in één JSON bestand met daarin de .svg-code en metadata per icoon. Op deze manier is een nieuw ontworpen en goedgekeurd icoon met een enkele handeling beschikbaar te maken voor de applicatie en de library. De library is zo dus altijd up to date.
SCRUM
De icon design language, de icon family en de icon-library zijn tijdens design en development sprints tot stand gekomen.
Deliverables
icon design language, icon-family of 256 icons, icon-library
