Graphic ExceptionGraphic ExceptionGraphic ExceptionGraphic Exception
  • Home
  • Over de Studio
    • Webdesign
      • WordPress website laten maken?
      • Website onderhoud met strippenkaart
    • Grafisch Ontwerp
      • Professioneel Logo laten maken?
    • PowerPoint
  • Portfolio
  • Blog
  • Contact

Verbeter je Webdesign met Icoontjes

    Home Tips en Inspiratie Verbeter je Webdesign met Icoontjes
    Next
    eigen icoon webfont

    Verbeter je Webdesign met Icoontjes

    By Melissa Dekker | Tips en Inspiratie | 1 comment | 10 januari, 2017 | 3

    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.

    icoontje met content verkort weergeven

    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

    orde scheppen met opsomming tekens

    B verschil aangeven

    verschil aangeven met icoontje

    C hetzelfde icoon, 2 verschillende functies

    hetzelfde icoon verschillend in gebruik

    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.

    voorbeeld opsomming met check icoontjes
    voorbeeld opsomming met icoon pijltjes

    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.

    Iconen, Tip, Webdesign

    Melissa Dekker

    Oprichter van Graphic Exception. Grafisch ontwerper en Webdesigner.

    More posts by Melissa Dekker

    Related Posts

    • Corporate ID is de huisstijl up to date

      Is de huisstijl nog wel up to date? Doe de test!

      By Melissa Dekker | 0 comment

      De huisstijl werkt niet voor je of is deze al een aantal jaar in gebruik? Dan kun je je afvragen of deze toe is aan een re-styling of een complete vernieuwing. De huisstijl kun jeRead more

    1 comment

    • Grafisch Ontwerp Amsterdam Beantwoorden 15 juni 2017 at 16:55

      Goed artikel en heel erg waar. Icoontjes zijn subtiel, maar hebben veel waarde!

    Leave a Comment

    Reactie annuleren

    Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

    Next

    Recente berichten

    • WordPress Templates
    • Vector of Pixel, Wat is het Verschil?
    • Is de huisstijl nog wel up to date? Doe de test!
    • “Content is king” met goede web teksten
    • Flexibel Easy CMS voor MKB

    Archieven

    • oktober 2020
    • januari 2019
    • maart 2018
    • augustus 2017
    • januari 2017

    Categorieën

    • Informatie
    • Strategie
    • Tips en Inspiratie
    • Wordpress Themes

    Onze Diensten

    • Webdesign
    • Grafisch Ontwerp

    Webdesign & Development

    • WordPress website laten maken?
    • Website onderhoud met strippenkaart

    Contact

    Graphic Exception
    Colinslandsedijk 34, 3234 KB TINTE

    Email Adres
    info@graphic-exception.nl

    Blijf op de hoogte

    Schrijf u nu in voor de Nieuwsbrief Klik hier!
    Copyright 2016 graphic-exception.nl | All Rights Reserved
    • Blog
    • Contact
    • Grafisch Ontwerp
    • Home
    • Nieuwsbrief
    • Over Graphic Exception
    • Portfolio van Graphic Exception
    • PowerPoint template laten maken?
    • Privacy Verklaring
    • Professioneel Logo laten maken?
    • Webdesign
    • Website onderhoud – Thuis met een Glimlach
    • Website onderhoud met strippenkaart
    • WordPress website laten maken?
    • Zakelijke Website Template Concorde
    Graphic Exception