Geschreven door luc op

In onze moderne samenleving gaat alles vliegensvlug. Alles moet snel en niemand heeft tijd. Neem als voorbeeld het lezen van lange teksten. Waarom zou men niet gewoon een filmpje kijken wat veel sneller en makkelijker is? Hetzelfde geldt voor iconen. Bij een icoon moet je in één oogopslag kunnen zien waar het desbetreffende onderwerp over gaat. Dat maakt jouw website makkelijker, duidelijker en overzichtelijker.

Bedenk het icoon

Laten we een icoon maken voor de categorie “design”.

Hou rekening bij het bedenken van het icoon met:

  1. Is het duidelijk wat dit icoon symboliseert?
  2. Is deze makkelijk te visualiseren?
  3. Komt de boodschap over?
  4. Past deze bij het merk?

In dit geval komen we uit op een potlood. Hieronder alvast even een voorproefje van hoe het icoon eruit komt te zien.

icons_family

SchetsUitvoeringResultaat

Voorbereiding

Een schets maken is niet noodzakelijk, maar als je snel je ideeën wilt vastleggen, is schetsen de beste oplossing.

Software

Kies bij het maken van het icoon de juiste software. Adobe Illustrator is hier een ideaal programma voor. Illustrator werkt vooral met paden waardoor je een afbeelding zo groot kan exporteren als je wilt, zonder dat de resolutie vermindert. Dat betekent dat we dit icoon zo klein en zo groot mogelijk kunnen maken, het randje blijft altijd haarscherp.

Gebruik een stramien

Een stramien kan een grid, raster of patroon zijn met het doel jouw iconen meer met elkaar overeen te laten komen. In de afbeelding hierboven is te zien dat de potlood is ontworpen met behulp van een stramien.

Hoe vormen mijn iconen een setje die allemaal bij elkaar passen.

Nu kunnen we heel veel iconen verzinnen die iets te maken hebben met ons merk. Maar hoe laten we deze goed bij elkaar aansluiten? Hieronder zien we 4 verschillende potloden. Eén daarvan is ons potlood. Elk potlood straalt een ander karakter uit omdat ze allemaal verschillend ontworpen zijn. Met zo’n uitstraling kan je bepalen wat voor een invloed het icoon op je heeft.
icon_family

Formeel

Hoekig

Vlakken

Simpel

Speels

Rond

Gedetailleerd

Lijndiktes

Design

Kleurrijk

Vlakken

Gedetailleerd

Herkenbaar

Rond

Zelfde lijndikte

Simpel

Geen van de iconen passen goed bij elkaar omdat ze allemaal anders ontworpen zijn. Onder de iconen staan de belangrijkste aspecten vermeld waarmee ze zich van elkaar onderscheiden. Maar dit zijn ook aspecten waarmee je een icon set bij elkaar kan laten passen. Als we in dit geval een formele icon set willen gaan maken, moeten alle iconen hoekig, simpel en opgedeeld in vlakken zijn.

Hoe zou het er dan met ons potlood uit komen te zien? Nou zo:icons_set

Exporteren als SVG.

Klaar met illustreren? Dan kunnen de iconen geëxporteerd worden.

Nieuwe webbrowsers ondersteunen SVG. Dat is een bestandsformaat die afbeeldingen opslaat als een berekening van paden. Zo blijven illustraties altijd hun goede resolutie behouden. Dit zorgt ook voor een optimale belevenis voor mobiele gebruikers. Een SVG is over het algemeen niet heel veel zwaarder dan een PNG. Als de iconen niet al te complex zijn, zal de bestandsgrootte ook niet al te zwaar zijn.

| Contentmarketing | Conversie Optimalisatie | Display Advertising | Google AdWords | Google Analytics | Google overig | Klantcases | Nieuws | Social Media | Webdesign | Webshops | WordPress | Zo Zeo | Zoekmachine optimalisatie |

Geef een reactie