Web cartografie: 10 tips
52
Edward Mac Gillavry - Webmapper 24 november 2011 Web Cartografie Web Cartografie 10 design tips 10 design tips
-
Upload
edward-mac-gillavry -
Category
Design
-
view
449 -
download
0
description
Deze 10 tips over web cartografie zijn gepresenteerd op 24 november 2011 in Kampen tijdens de bijeenkomst van Geo-Informatie Nederland (GIN) regio Oost.
Transcript of Web cartografie: 10 tips
Edward Mac Gillavry - Webmapper24 november 2011
Web CartografieWeb Cartografie10 design tips10 design tips
Cartografie is
de wetenschap,de techniek en
de kunstvan het maken van kaarten
1. ESTHETISCH EFFECT1. ESTHETISCH EFFECT
Mooie ontwerpenworden ervaren als
gebruiksvriendelijker en beterdan
lelijke ontwerpen
MARINETRAFFICMARINETRAFFIC
NEDERLAND VAN BOVENNEDERLAND VAN BOVEN
OPENSTREETMAPOPENSTREETMAP
OPENSTREETMAPOPENSTREETMAP
2. AFFORDANCE2. AFFORDANCE
Fysieke kenmerkenvan een ontwerp
beïnvloedende functie
KLIKKEN!KLIKKEN!
3. MAPPING3. MAPPING
Een duidelijke relatietussen gereedschap
en het effectleidt tot betere
gebruiksvriendelijkheid
4. NUDGE4. NUDGE
Geef op een voorspelbare manier een zetje in de goede richting
langs de weg van de minste weerstand
5. CONSTRAINTS5. CONSTRAINTS
Beperk de actiesdie uitgevoerdkunnen worden
GESTRUCTUREERDE KEUZESGESTRUCTUREERDE KEUZES
GESTRUCTUREERDE KEUZESGESTRUCTUREERDE KEUZES
CONVENTIESCONVENTIES
CONVENTIESCONVENTIES
CONVENTIESCONVENTIES
6. PROGRESSIVE DISCLOSURE6. PROGRESSIVE DISCLOSURE
Beheers de complexiteitdoor alleen de
nodige of gevraagdeinformatie
op het juiste moment te tonen
GENERALISATIEGENERALISATIE
7. KLEURGEBRUIK7. KLEURGEBRUIK
WEBKLEURENWEBKLEURENHTML4 en CSS 2.1: 16 + 1HTML4 en CSS 2.1: 16 + 1
+130 kleuren in SVG 1.0 = 147 in CSS 3
WEBKLEURENWEBKLEUREN216 “web safe” kleuren216 “web safe” kleuren
VERZADIGINGVERZADIGINGHue, Saturation, Lightness (HSL)Hue, Saturation, Lightness (HSL)
KLEURENCOMBINATIESKLEURENCOMBINATIES
kuler.adobe.com
www.colourlovers.com
KLEURENCOMBINATIESKLEURENCOMBINATIES
www.colorbrewer2.org
KLEURENBLINDHEIDKLEURENBLINDHEID
KLEURENBLINDHEIDKLEURENBLINDHEID
KLEURENBLINDHEIDKLEURENBLINDHEID
8. TYPOGRAFIE8. TYPOGRAFIE
LETTERTYPES KIEZENLETTERTYPES KIEZEN
Schreefloos (“sans-serif”) Verschillende diktes:
Medium Bold
Condensed
CISALPINCISALPIN
LETTERTYPES COMBINERENLETTERTYPES COMBINEREN
www.typebrewer.org
CORPSGROOTTECORPSGROOTTE
6pt Amsterdam
8pt Amsterdam
9pt Amsterdam
10pt Amsterdam
11pt Amsterdam12pt Amsterdam13pt Amsterdam14pt Amsterdam
7pt Amsterdam
9. VOORGROND-ACHTERGROND9. VOORGROND-ACHTERGROND
WIDGETS v. KAARTWIDGETS v. KAART
THEMA v. ORIËNTATIETHEMA v. ORIËNTATIE
10. REACTIESNELHEID10. REACTIESNELHEID
TILING SCHEMA 0 – 14TILING SCHEMA 0 – 14Zoom level Resolutie Schaal (96 dpi) MaxScaleDenominator
12.500.000
0 3440.64 12.288.000
6.500.000
1 1720.32 6.144.000
5.000.000
2 860.16 3.072.000
3.000.000
3 430.08 1.536.000
1.500.000
4 215.04 768.000
400.000
5 107.52 384.000
200.000
6 53.76 192.000
100.000
7 26.88 96.000
50.000
8 13.44 48.000
REDUCEER CONNECTIESREDUCEER CONNECTIES
Kaartlagen Image sprites Combineer JS Combineer CSS Minimaliseer JS en CSS
CARTOGRAFISCH CARTOGRAFISCH GEREEDSCHAPGEREEDSCHAP
OPEN SOURCEOPEN SOURCE
