Webcarto vormgeving webcartografie HSFM08 2122

grafische vormgeving

• compositie
• kleur
• typografie
• beeld

compositie/layout

plaats van alle elementen in een logische volgorde van belangrijkheid, hoe prominent en bij layout gaat het om waar te tonen.

visuele hierarchie: proces van beslissen welke elementen je gaat benadrukken en waarom om je boodschap over te brengen.

3 elementen van layout

• screen real estate: hoeveelheid ruimte op elk device. a. Je weet niet hoe groot het scherm van je gebruiker is. b. Kaart kan onderdeel van een andere applicatie zijn. c. er bestaat geen one-size-fits-all webmap.
• screen resolutie: hoeveel verticale en horizontale van pixels full hd: 1920x1080 pixels, laptop 2048x1536
• pixels per inch: hoeveel pixels er zichtbaar zijn in een lijn van 1 inch op een bepaald scherm. Hoe meer pixels hoe meer details. let op resolutie is wat anders! telefoon heeft meer ppi dan tv. maar tv resolutie is hoger.

wie is de gebruiker? wat voor soort kaart? welke elementen gebruik je? Hoe is de visuele hierarchie? Maak een mockup van je layout en doe een usertest en daarna opnieuw een test

fluid of compartmentalized

voorkeur op smartphones? waar ligt het accent op?

kleur en cartografie?

we bekijken een video over kleur en ik vond nog deze website over kleuren uit oude kaarten

colorbrewer

colorblindness simulator

• Voor informatieoverdracht: kleur als grafische variabele
• Om kaarten visueel aantrekkelijker te maken: beschouwingstijd wordt langer

hue (kleurtoon)

• ‘ware’ kleuren, dus kleuren zonder menging met zwart of wit
• chorochromatische kaart

value/brightness (helderheid)

• Helderheid (brightness): de mate van ‘lichtheid’ van de kleuren. Hoogste waarde(+100) geeft wit, laagste waarde (-100) geeft zwart
• choropleten kaart

saturation (verzadiging)

• is een maat voor de kleurigheid, of zuiverheid, van een bepaalde kleur. Kleuren met een lage verzadiging zijn fletser dan kleuren met een hoge verzadiging. Zwart-witfoto's hebben een verzadiging van nul.

samengevat

ken je het kleurenwiel nog? primaire, secundaire en tertiaire kleuren? en simultaan contrast?

Wat zijn monochromatische, achromatische, complementair, split complementair, analogous, neutrale en incongruous kleuren?

kleursystemen

1. RGB
2. CMYK
3. HSV: hue saturation, value

RGB

• Het RGB-kleursysteem is een kleurcodering, een manier om een kleur uit te drukken met behulp van een combinatie van de drie primaire kleuren Rood-Groen-Blauw, uitgaande van additieve kleurmenging. De hoeveelheid van elke primaire kleur die benodigd is om de mengkleur te verkrijgen, wordt uitgedrukt in een getal dat meestal varieert tussen 0 en 255.
• Er zijn dus 256 x 256 x 256 = 16.777.216 kleuren mogelijk.
• Waarde ‘0’ = geen licht
• Waarde ‘255’ = maximaal licht
• vaak hexadecimale Notering: eerste twee: rood, tweede twee: groen, laatste twee blauw
• 00 = niets van de kleur
• FF = alles van de kleur
• webmap model
• reflecteerd niet zoals papier/ van invloed op slaap
• maar kleur verschilt per monitor, geen absolute controle

kleurconventies

• Lichte kleuren overstralen i.h.a. sterker. Voorbeeld: geel op wit.
• Sommige kleuren dringen zich op, zoals paars of rood
• minder kleuren is sterker, max 7
• kleuren hebben verschillende betekenis (hoe we over dingen denken)
• gevoel van kleur van invloed op interpretatie/boodschap
• betekenis kleur vanuit cultuur
• voorkeuren veranderen in de tijd (jaren 70, 90 en nu)
• op zoek naar een "wow"factor gebruik dan andere kleuren

wanneer negeren van kleurenconveties?

• wow factor/ attentiewaarde, verassing
• huisstijl sterker als het 1 geheel is
• eigen stijl, maar houdt het communicatieve doel voor ogen

hoe het niet moet

• zorg voor voldoende contrast

• vermijd verkeerde associaties: zoals hier hoog percentage zwarte bevolking aangeven met zwart
• oke bij een politieke boodschap bijv. rood en blauw in VS bij verkiezingen

• Gebruik nooit wit voor ‘geen data’! maar bijv #ccc = gemiddeld grijs

• denk aan de kleurenblinden gebruik nooit stoplicht kleuren!

webrichtlijnen

• kleurenblindheid
• contrast
• vermijd kleurencombinaties: Groen, rood, oranje, bruin en geel;
• vermijd kleurencombinatie: Paars en blauw;
• vermijd kleurencombinatie: Rood op zwart of zwart op rood, of vlak tegen elkaar aan;
• vermijd kleurencombinatie: Pastelkleuren

webrichtlijnen volgens geonovum

• Houd het simpel bij het kiezen van een kleurentrap of legenda. Beperk het aantal kleuren tot 7 +/- 2, omdat 7 het optimale aantal kleuren is, dat kijkers in hun korte-termijngeheugen kunnen verwerken. Indien er meer kleuren zijn is het moeilijker voor de kijker om zich een beeld te vormen van de relaties in de gegevens.

kleurgebruik