We hebben eerder een website opgeleverd die gebruik maakt van een eigen webfont! In dit design zijn uniek ontworpen icoontjes gebruikt.
Je kan een icoontje zelf ontwerpen en uitwerken met Illustrator of ander programma dat vector bestanden kan maken en vervolgens als .svg opslaan.
Met dit bestand kan vervolgens een font gemaakt worden die je in je website kan gebruiken.
Dit is prettig in gebruik als je icoontjes regelmatig laat terugkomen in verschillende formaten en kleuren.
Daarom wil ik in dit blog item wat meer vertellen over de toegevoegde waarde van icoontjes in webdesign. In het volgende blog vertel ik meer over hoe we deze hebben gemaakt.
Icoontjes zie je in het dagelijks leven overal. Verkeersborden, toetsenbord en ga zo maar door.
Icoontjes helpen ons content sneller te begrijpen en zijn daarom niet alleen geschikt voor off-line media, maar ook prima toe te passen in webdesign.
Icoontjes doeltreffend inzetten in je webdesign, hoe doe je dat?
Het is niet moeilijk om te bepalen of een webdesign goed is of niet. Maar waarom zou een bepaald webdesign niet goed zijn? Daar weten we niet altijd direct de vinger op te leggen. Vaak zit het hem in de kleine details.
Voor een website is content zoals tekst die makkelijk te lezen is en hoofdpunten die direct te begrijpen zijn heel belangrijk. Het gebruik van icoontjes om de belangrijke punten uit te lichten kan hier aan bijdragen. Zo komt de lezer snel en gemakkelijk tot de kern van het verhaal.
Een Icoontje kan verkorten, uitlichten en verduidelijken
Content verkort weergeven
Het Icoontje is vaak gerelateerd aan het stukje tekst dat erbij staat en maakt zelfs in enkele gevallen het lezen van de tekst overbodig. Zoals bij een webshop een winkelwagen icoontje () geen uitleg nodig heeft. Zo heeft ook het icoontje op de aan/uit knop () van de PC dat bijvoorbeeld niet meer nodig.
Dekt het icoontje de lading niet helemaal, dan kun je er alsnog tekst bij plaatsen of screenshots. Dit is vooral bij een uitleg prettig. (Afbeelding hieronder) Met een icoontje kun je een herkenbaar beeld maken en de tekst kan de betekenis toelichten.
Aandacht doen vestigen op content
De juiste afbeelding kan zoveel meer zeggen dan woorden. Daarom worden afbeeldingen ook overal toegepast. Want zeg nu zelf, een tekst zonder afbeeldingen of icoontjes kan knap saai zijn. Pak de krant er bijvoorbeeld bij. Welke artikelen vallen direct op? Een afbeelding of icoontje maken een stuk tekst niet alleen veel uitnodigender om te lezen, maar ook eenvoudiger.
Icoontjes kunnen daarnaast ook orde scheppen. Denk bijvoorbeeld aan een opsomming (afbeelding a). Of Icoontjes kunnen juist verschillen aangeven (afbeelding b). Met een opsomming kun je een lijst netjes rangschikken en informatie duidelijk weergeven.
Om het nog complexer te maken… Hetzelfde icoontje kan meerdere keren ingezet worden voor verschillende functies zoals op deze afbeelding (afbeelding c).
A opsomming
B verschil aangeven
C hetzelfde icoon, 2 verschillende functies
In bovenstaande afbeelding zie je twee keer het icoontje met het envelopje. Icoontje met envelop nummer 1 verduidelijkt het e-mail adres waarmee contact per e-mail opgenomen kan worden. Icoontje met envelop nummer 2 verduidelijkt de optie om je in te schrijven voor de nieuwsbrief. Eén icoontje met twee verschillende functies.
Heel belangrijk is de plek waar het icoontje staat en welke stijl wordt toegepast. Zo heeft het icoontje met envelop nummer 1 dezelfde stijl als het icoontje met de telefoon erboven. Icoontje met envelop nummer 2 is een button en heeft dezelfde stijl als de andere buttons op de website. Door het gebruik van een verschillende stijl is de functie duidelijk en kunnen dezelfde icoontjes gebruikt worden.
Content verduidelijken
Een lijstweergave kan content goed overzichtelijk weergeven, maar bullets zijn vrij gewoon. Om het interessant te houden kun je hier ook een eigen bullet voor ontwerpen en aan je font toevoegen en gebruiken als icoontje.
In bovenstaande afbeelding zijn zogenaamde check icoontjes gebruikt om diensten weer te geven (afbeelding links). Ze geven hier een positief tintje aan mee, zoals correct en/of beschikbaar.
Bij de opsomming van de nieuws categorieën zijn pijl icoontjes ingezet (afbeelding rechts). Deze pijlen zijn bedoeld als een verduidelijking van de navigatie.
Gebruik de lijsten met opsommingen met mate. Met te veel lijsten kun je er ook een chaotische situatie van maken. Met als resultaat dat je door de bomen het bos niet meer ziet. Dit komt de leesbaarheid dan niet ten goede.
Een Icoon op zich is vaak niet voldoende
Voor de meeste web gebruikers zijn de icoontjes helder. De minder ervaren gebruiker weet zich soms geen raad. Wat als eenvoudig bedoeld was en handig in gebruik wordt dan heel verwarrend. Het plaatsen van een tekst ernaast kan dan uitkomst bieden. Wanneer een Icoontje volledig is geïntegreerd denk aan bijvoorbeeld het winkelwagentje, dan kan tekst weggelaten worden.
Iconen klein, groot, met tekst of zonder zijn een goed hulpmiddel om tekst in een notendop weer te geven, te verduidelijken en de aandacht te trekken naar de hoofdpunten in een stuk tekst.
Goed artikel en heel erg waar. Icoontjes zijn subtiel, maar hebben veel waarde!