Infographics

Een infographic is een informatieve illustratie, een grafische weergave van informatie in de vorm van grafieken, diagrammen of andersoortige illustraties. Dit document dient als steun bij het ontwerpen van infographics voor Bebat.

Het bevat enkele voorbeelden die gecategoriseerd zijn onder verschillende types infographics. Daarnaast zijn er nog enkele guidelines die gevolgd dienen te worden bij het ontwerpen van nieuwe infographics.

Type infographics

De infographics van Bebat kunnen we onderverdelen in verschillende types. Hieronder een oplijsting met bijbehorende voorbeelden.

Statistich

Om enquêteresultaten, gegevens of argumenten voor te stellen, is een statistische infographic de beste keuze.

De statistische infographic legt de nadruk op gegevens/data. De lay-out en visuals helpen om het verhaal achter de gegevens te vertellen. De visuele ondersteuning kan in de vorm van grafieken, pictogrammen, afbeeldingen of opvallende lettertypes.

Informatief

Een informatieve infographic is de beste infographic om duidelijk te communiceren over een nieuw concept of een overzicht van een onderwerp te geven. Meestal is een informatieve infographic verdeeld in secties met beschrijvende titels.

Door de secties te nummeren, begeleid je de mensen doorheen de infographic. Bij deze verschillende secties kunnen nog illustraties toegevoegd worden als visuele ondersteuning van de verschillende secties.

Tijdslijn

Een tijdslijn wordt gebruikt om geschiedenis te visualiseren, om belangrijke data te markeren of om een overzicht van gebeurtenissen weer te geven.

Visuele hulpmiddelen zoals lijnen, pictogrammen, foto's en labels helpen allemaal om punten in de tijd te markeren en uit te leggen.

Stappenplan & proces

Terwijl een tijdlijn-infographic punten in de tijd markeert, is een proces-infographic de beste infographic voor een samenvatting of overzicht van de stappen in een proces.

De meeste proces infographics volgen een eenvoudige stroom van boven naar beneden of van links naar rechts. Wanneer het over een cyclus gaat, wordt de informatie in een cirkel geplaatst om duidelijk te maken dat het een weerkerend proces is. Door de stappen te nummeren, kan je proces gemakkelijk gevolgd worden. Dit is niet verplicht maar dit zorgt voor een duidelijkere communicatie.

Geografisch

Geografische infographics gebruiken kaartgrafieken als visuele focus. Afhankelijk van het type data dat je wil weergeven, zal er een andere soort kaart gebruikt worden.

Vergelijkingen

Vergelijkingen worden gebruikt om bepaalde informatie te staven aan elkaar. Afhankelijk van de hoeveelheid data, kan dit anders worden weergegeven. Iconen of illustraties helpen om de context van de vergelijking weer te geven.

Grafieken

Grafieken kunnen gebruikt worden om grote stukken data te gaan weergeven in een visuele voorstelling. Dit kunnen verschillende soorten grafieken zijn zoals een taartgrafiek, staafdiagram, … afhankelijk van de informatie die je wil overbrengen.

Richtlijnen

Het is de bedoeling dat de infographics de stijl van Bebat goed vertalen. Hiervoor zijn enkele richtlijnen uitgeschreven die helpen om deze vertaling zo goed mogelijk te doen.

Kleurgebruik

De infographics maken voornamelijk gebruik van de hoofdkleuren. Indien de hoofdkleuren niet voldoende zijn, kunnen de infographics en grafieken aangevuld worden met afgeleiden van de hoofdkleuren.

Gebruik de brandkleuren als de grafiek iets over het brand vertelt. Als er meer kleuren nodig zijn, gebruik dan ver uiteenliggende nuances van de brandkleur voor voldoende contrast. Dit is voornamelijk het geval voor grafieken in corporate toepassingen.

Gebruik de brandkleuren in combinatie met contextkleuren indien er niet genoeg nuances zijn of er meerdere kleuren gewenst zijn. Door de verschillende kleuren kan een groter contrast verkregen worden. Dit kan het geval zijn bij grafieken naar leerlingen/scholen toe om het wat speelser en aangenamer te maken voor deze doelgroep.

  • Zand

    • RGB rgb(162,147,135)
    • HSL hsl(26.67,0.13,0.58)
    • HEX #a29387
    • CMYK 34-35-40-16
    • Pantone Warm Grey 7 C
  • Groen

    • RGB rgb(175,202,11)
    • HSL hsl(68.48,0.9,0.42)
    • HEX #afca0b
    • CMYK 40-0-100-0
    • Pantone 390 C
  • Gras groen

    • RGB rgb(0,154,68)
    • HSL hsl(146.49,1,0.3)
    • HEX #009a44
    • CMYK 94-2-95-0
    • Pantone 347 C
  • Donker groen

    • RGB rgb(143,173,21)
    • HSL hsl(71.84,0.78,0.38)
    • HEX #8fad15
  • Lime

    • RGB rgb(196,214,0)
    • HSL hsl(65.05,1,0.42)
    • HEX #c4d600
    • CMYK 33-0-100-0
    • Pantone 382 C
  • Donker zand

    • RGB rgb(99,89,78)
    • HSL hsl(31.43,0.12,0.35)
    • HEX #63594e
  • Licht grijs

    • RGB rgb(198,195,193)
    • HSL hsl(24,0.04,0.77)
    • HEX #c6c3c1
  • Lichter grijs

    • RGB rgb(241,241,239)
    • HSL hsl(60,0.07,0.94)
    • HEX #f1f1ef

Typografie

Titels en cijfers worden steeds in PF BeauSans geplaatst, het primaire font voor Bebat. De overige tekst is afhankelijk van grafiek tot grafiek. Indien het korte tekst is, kan dit ook in PF BeauSans geplaatst worden.

Bij langere teksten is het aangewezen om Roboto te gebruiken voor de betere leesbaarheid.