Iconen

Iconografie gebruikt afbeeldingen en symbolen om een ​​object visueel weer te geven. Ze communiceren een boodschap en moeten onderscheidend en informatief zijn. Iconen moeten spaarzaam worden gebruikt om duidelijkheid te bieden en de cognitieve belasting van gebruikers te verminderen.

Visueel gebruik

Grootte

De meeste iconen zijn 16px. Hoewel de meeste iconen een vierkant tekengebied hebben, kunnen sommige iconen rechthoekig zijn waarbij dus de breedte of hoogte van de iconen groter of kleiner dan 16px is.

Achtergrond

De iconen moeten altijd op een transparante achtergrond worden geplaatst met een grootte van 24px.

Padding

Wanneer er iconen worden ontworpen in Illustrator, dan hoeft er geen rekening te worden met de padding. Maar wanneer de iconen in Sketch worden geïmporteerd, krijgen ze een padding mee. De waarde van de padding verschilt bij iedere icoon. Een klein pijltje heeft een grotere padding dan een sociale media icoon.

Kleur

Iconen moeten dezelfde kleur-contrastverhouding doorstaan ​​als typografie in een verhouding van 4,5: 1. De iconen hebben altijd een effen kleur. De kleur hangt ook af van de achtergrondkleur. In een groene button kleurt de icoon wit, maar op een witte achtergrond kan deze weer blauw zijn.

Bij een hover van de sociale media iconen, worden deze donkergrijs. De overige iconen zijn geen op zichzelf losstaand element. Die worden vaker in rechthoeken geplaatst. In dat geval is de standaard hoverkleur (bruin) van toepassing.

Dikte

Iconen van dezelfde grootte moeten hetzelfde visuele gewicht hebben. Eén icoon mag er niet zwaarder of lichter uitzien dan een ander icoon van dezelfde grootte. De meeste iconen worden ontworpen met een breedte van 2px.

Zorg ervoor dat de 2px-streek niet verandert bij het wijzigen van het formaat van de iconen, omdat hierdoor de iconen er ongelijk uitzien. Bij het schalen van de iconen moet elk icoon altijd worden gestart met hetzelfde basisformaat (bij voorkeur de standaardwaarde van 24 px).

Iconen van 16px moet altijd gevuld zijn. Dit geeft de icoon een ​​zichtbaar gewicht, waardoor het zijn juiste nadruk behoudt en goed zichtbaar blijft. Dunne lijndiktes kunnen verdwijnen of breken.

Pixel raster

Zorg ervoor dat de iconen altijd worden uitgelijnd met het basispixelraster bij het tekenen of aanpassen ervan. Dit zorgt voor pixelhelderheid en scherpte op alle schermverhoudingen. De x- en y-coördinaten van pictogrammen mogen nooit decimalen bevatten.