Skip to main content

Ontwerp

Ontwerp richtlijnen

  • Gebruik geen icoon wanneer tekst volstaat. Iconen kunnen onnodig voor visuele ruis zorgen, gebruikers kunnen iconen niet begrijpen en tekst is makkelijk te vertalen.
  • Overweeg of puur decoratieve iconen daadwerkelijk iets toevoegen voor de gebruiker.
  • Een icoon moet duidelijk direct de betekenis uitbeelden. Zorg ook dat het icoon binnen de gebruike context duidelijk van betekenis is.
  • Maak de vormen van een icoon niet onnodig complex maar tracht deze zo simpel mogelijk te houden zonder duidelijkheid te verliezen.
  • Zorg dat iconen consistent met elkaar zijn. Denk bijvoorbeeld aan lijndikte, rondingen, visuele grootte, etc.
  • Gebruik een consistent iconengrid voor visuele consistentie.
  • Gebruik geen outlined en filled iconen door elkaar.
  • Gebruik waar mogelijk ‘universele’ iconen, iconen die algemeen voor hetzelfde doel worden gebruikt. Gebruikers kennen voor veel concepten al een bestaande beeldtaal. Denk bijvoorbeeld aan een icoon van een verkeersbord met een ‘P’ voor parkeergelegenheden. Iets anders dan deze gebruiken voor eenzelfde betekenis zou een gebruiker kunnen verwarren.
  • Gebruik voor verdieping van tekstpassages een illustratie of animatie.
  • Gebruik een icoon voor een enkele betekenis. Gebruik bijvoorbeeld niet eenzelfde icoon van een persoon voor zowel een profiel als voor een contactenlijst.

Outline vs. filled (solid)

Probeer zogenaamde outlined (lijn) iconen niet in dezelfde applicatie te mixen met filled (gevulde) iconen. Het is wel mogelijk om bijvoorbeeld gevulde iconen te gebruiken als actieve staat (focus/hover) wanneer standaard lijn-iconen worden gebruikt. (Zie Toegankelijkheid)

Lijnen

Te dunne lijnen kunnen tot visuele problemen leiden. Gebruikers met staar kunnen bijvoorbeeld problemen hebben met deze iconen. Té weinig ruimte tussen lijnen kan tevens om dezelfde reden tot problemen leiden. De iconen-tekening kan hierdoor als het ware dichtslibben.

Grootte(s)

Er zijn meerdere manieren om iconen op diverse afmetingen te tonen. Een icoon in SVG formaat kan in principe zonder kwaliteitsverlies verkleint en vergoot worden. Wanneer iconen in verschillende groottes worden getekend kunnen grotere iconen van meer detail worden voorzien, en dus als het ware opnieuw getekend.

Voorbeeld van een icoon die op verschillende afmetingen een andere tekening heeft

Bron: http://blog.useiconic.com/digitally-remastering-iconic/

Er zijn meerdere manieren om iconen op diverse groottes te tonen. Een icoon in SVG formaat kan in principe zonder kwaliteitsverlies verkleint en vergroot worden. Wanneer iconen in verschillende groottes worden getekend kunnen grotere iconen van meer detail worden voorzien, en dus als het ware opnieuw getekend.

Dark mode

Iconen die in een dark mode thema worden getoond dienen vaak van een dunnere lijndikte voorzien te zijn. Dit is vergelijkbaar met het aanbieden van een lichter tekstgewicht in dark mode, omdat lichte tekst op een donkere achtergrond visueel dikker oogt.

Referenties