Iconen. Voordelen van goede iconen. De iconen waar het bij deze opdracht om gaat zijn:

Transcriptie

1 Iconen Steeds vaker wordt binnen (web)design gebruik gemaakt van iconen. Informatie wordt op deze manier gevisualiseerd. Hierdoor is het mogelijk op een snelle, duidelijke en vaak ook mooie manier te communiceren. Voordelen van goede iconen Het zijn goede targets : je kunt ze makkelijk aanraken op een touchscreen, maar ook met een muis. Ze besparen veel ruimte op het scherm(pje). Ze zijn in één oogopslag herkenbaar (of zouden dat moeten zijn). Ze zijn universeel, dus je hoeft ze niet te vertalen voor internationale gebruikers. Ze zijn meestal aantrekkelijk om naar te kijken en voegen echt iets toe aan het ontwerp van een pagina of interface. Ze vergroten de herkenbaarheid van een productgroep of merk als dezelfde iconen en stijl worden gebruikt op verschillende plekken. De iconen waar het bij deze opdracht om gaat zijn: Knop: Zoals home, contact, shop, producten, programma of agenda. Social media button: Twitter, Facebook, LinkedIn, Instagram, etc. Avatar: Een plaatje dat als gebruikersafbeelding op het internet gehanteerd wordt. Favicon: Een klein icoontje voor een website dat vaak te zien is in de adres- of titelbalk. 1

2 Aandachtspunten Eigenheid en herkenbaarheid Door consequente toepassing van een bepaalde stijl ontstaat eigenheid en herkenbaarheid. In het voorbeeld uit de huisstijl van Rijksoverheid is gebruik gemaakt van een specifieke keep. Gestileerd of geometrisch De vorm van een icoon kan wordt worden opgebouwd vanuit - een gestileerde waarneming (een realistisch beeld dat grafisch is gemaakt) - geometrische vormen (zoals een rechthoek en een cirkel) 2

3 Rond of rechthoekig De afgeronde hoeken geven de iconen een vriendelijk en toegankelijk karakter. Door een object dat dichterbij staat een andere hoekradius te geven dan een object in de verte wordt op subtiele wijze diepte gesuggereerd. Binnenvormen zijn meestal voorzien van rechte hoeken. Begrijpelijkheid en samenstelling De begrijpelijkheid van het icoon gaat te allen tijde voor vorm. Het heeft de voorkeur een icoon op te bouwen vanuit één element. Maar soms kan het voor de begrijpelijkheid of context wenselijk zijn om een combinatie te maken van meerdere objecten of onderwerpen. Tekstuele toevoeging Uiteraard is uitgangspunt dat iconen voor zich spreken en een tekstuele toevoeging overbodig is. Vaak blijkt de betekenis van iconen vanzelf uit de context waarbinnen deze toegepast worden. Soms is een tekstuele toevoeging onvermijdelijk, waar het gaat om organisatienamen bijvoorbeeld. 3

4 Kleurgebruik De iconen worden opgezet in één kleurvariant (meestal zwart) en kunnen in elke kleur van het huisstijlkleurenpalet gebruikt worden. Er kan ook gebruik gemaakt worden van tinten, arcering en gradients. Let wel op voldoende contrastwaarde tussen de kleur van het icoon en de achtergrond kleur. Een geel icoon op een witte ondergrond bijvoorbeeld is 'slecht leesbaar'. Diapositief Voor witte objecten is een alternatief icoon nodig voor diapositieve toepassing. Belangrijk is dat het icoon geen lijnicoon is maar opgebouwd uit vlakken en optisch dezelfde uitstraling en grootte heeft als de positieve versie ervan. 4

5 Opdracht 4 Iconen Maak een eigen iconenserie bestaande uit: 4a 1 avatar 4b 1 favicon 4c 2 buttons (home contact shop producten programma etc) 4d 2 social media follow-buttons (Twitter Facebook LinkedIn Instagram etc) Criteria Eenheid De iconen moeten gezamenlijk 1 serie vormen, in één stijl worden ontworpen. Dit betekent dat je consequente keuzes moet maken voor gestileerd of geometrisch, rond of rechthoekig, arcering, gradiënt, kleurgebruik, lijndikte, tekenstijl, etc. Oorspronkelijkheid / originaliteit Probeer een specifiek eigen element te verwerken in je ontwerp wat je uiteraard ook weer consequent toepast. Duidelijkheid Liefst vanuit 1 element en zonder tekstuele toevoeging moet duidelijk zijn wat met het icoon bedoeld wordt. Voldoende contrast en een minimum aan details moeten ervoor zorgen dat het icoon in klein formaat nog duidelijk is. Kwaliteit Een icoon van 2,5cm 2,5cm met een resolutie van 300 dpi moet 100% haarscherp (niet vaag of pixelig) zijn. Uiteraard heeft vector de voorkeur. 5