Een iconenset voor een website of app: zo plan en bestel je hem

Iconen zijn de kleine afbeeldingen die mensen laten zien waar ze moeten tikken: home, winkelwagen, bezorging, support, profiel. Komen ze uit verschillende gratis pakketten, dan ziet een site eruit als een lappendeken, met dikke lijnen naast dunne en ronde hoeken naast scherpe. Een bij elkaar passende set lost dat op en laat zelfs een eenvoudige site af ogen. Zo plan je er een.

Maak eerst een lijst

Loop je site of app door en schrijf elke plek op waar een icoon zou helpen:

• Hoofdmenu: home, catalogus, zoeken, winkelwagen, account.
• Functies of voordelen: snelle levering, veilig betalen, retourneren, support.
• Contact en acties: telefoon, e-mail, locatie, delen, downloaden.

Beschrijf elk icoon in een paar woorden, bijvoorbeeld "bezorging: een busje" of "retour: een doos met een pijl". Hoe duidelijker de lijst, hoe minder wijzigingen later.

Hoeveel iconen je nodig hebt

• Ongeveer 4: een landingspagina met drie of vier voordelen, of een korte presentatie.
• Ongeveer 8: de hoofdonderdelen en functies van een kleine site.
• Ongeveer 16: een volledige set voor een app of een grotere site met veel onderdelen.

Meestal is het beter er een paar meer te bestellen dan je vandaag nodig hebt. Iconen die later in een aparte bestelling worden getekend, zijn moeilijker precies op elkaar af te stemmen.

Kies één stijl

Kies één stijl en houd die aan voor de hele set:

• Outline: dunne lijnen, licht en modern, goed voor strakke interfaces.
• Gevuld: volle vormen, goed leesbaar op heel kleine formaten.
• Duotone: twee tinten van één kleur, met iets meer karakter.
• 3D: zacht volume en schaduwen, goed voor kleurrijke landingspagina's.

Heb je al een paar iconen die je mooi vindt, deel dan een link ernaar, zodat de nieuwe dezelfde uitstraling krijgen.

Kleuren

Gebruik je merkkleuren en geef ze op als hexcodes, zoals #1A73E8, als je die hebt. Eén hoofdkleur en één accentkleur zijn meestal genoeg. Heb je nog geen merkkleuren, dan werkt een neutraal palet op elke achtergrond.

Kleine formaten bepalen alles

Een icoon in een menu is vaak maar 24 pixels breed. Op dat formaat verdwijnen details, dus eenvoudige vormen winnen:

• Eén idee per icoon. Een busje voor bezorging, geen busje met een weg, een klok en een doos.
• Geen tekst erin. Woorden worden onleesbaar als het icoon klein is.
• Bekende symbolen. Een vergrootglas voor zoeken en een winkelwagen voor winkelen worden overal begrepen.

Wat je krijgt en hoe je het gebruikt

Een gangbare set bestaat uit losse PNG-bestanden met een transparante achtergrond, zodat je elk icoon op elke kleur kunt plaatsen. PNG is een rasterformaat: prima voor websites, apps en dia's, maar geen vectorbestand dat je onbeperkt kunt vergroten. Heb je een favicon nodig, dan zet een gratis online converter een PNG binnen een minuut om naar een ICO-bestand.

Kort samengevat

Een duidelijke lijst, het juiste aantal iconen, één stijl en je merkkleuren: zo oogt een set op elk scherm consistent. Laat je de set liever voor je tekenen, bestel dan een iconenset: je stuurt de lijst met iconen, de stijl en je kleuren en krijgt 4, 8 of 16 bij elkaar passende iconen als losse PNG-bestanden met een transparante achtergrond. De betaling wordt pas vrijgegeven nadat je het werk hebt goedgekeurd.