Deze 10 tips over web cartografie zijn gepresenteerd op 24 november 2011 in Kampen tijdens de bijeenkomst van Geo-Informatie Nederland (GIN) regio Oost.

1. Web Cartografie
10 design tips
Edward Mac Gillavry - Webmapper
24 november 2011

2. Cartografie is
de wetenschap,
de techniek en
de kunst
van het maken van kaarten

3. 1. ESTHETISCH EFFECT

4. Mooie ontwerpen
worden ervaren als
gebruiksvriendelijker en beter
dan
lelijke ontwerpen

5. MARINETRAFFIC

6. NEDERLAND VAN BOVEN

7. OPENSTREETMAP

8. OPENSTREETMAP

9. 2. AFFORDANCE

10. Fysieke kenmerken
van een ontwerp
beïnvloeden
de functie

13. KLIKKEN!

14. 3. MAPPING

15. Een duidelijke relatie
tussen gereedschap
en het effect
leidt tot betere
gebruiksvriendelijkheid

17. 4. NUDGE

18. Geef op een voorspelbare manier
een zetje in de goede richting
langs de weg van de
minste weerstand

20. 5. CONSTRAINTS

21. Beperk de acties
die uitgevoerd
kunnen worden

22. GESTRUCTUREERDE KEUZES

23. GESTRUCTUREERDE KEUZES

24. CONVENTIES

25. CONVENTIES

26. CONVENTIES

27. 6. PROGRESSIVE DISCLOSURE

28. Beheers de complexiteit
door alleen de
nodige of gevraagde
informatie
op het juiste moment te tonen

29. GENERALISATIE

30. 7. KLEURGEBRUIK

31. WEBKLEUREN
HTML4 en CSS 2.1: 16 + 1
+130 kleuren in SVG 1.0 = 147 in CSS 3

32. WEBKLEUREN
216 “web safe” kleuren

33. VERZADIGING
Hue, Saturation, Lightness (HSL)

34. KLEURENCOMBINATIES
kuler.adobe.com
www.colourlovers.com

35. KLEURENCOMBINATIES
www.colorbrewer2.org

36. KLEURENBLINDHEID

37. KLEURENBLINDHEID

38. KLEURENBLINDHEID

39. 8. TYPOGRAFIE

40. LETTERTYPES KIEZEN

Schreefloos (“sans-serif”)

Verschillende diktes:

Medium

Bold

Condensed

41. CISALPIN

42. LETTERTYPES COMBINEREN
www.typebrewer.org

43. CORPSGROOTTE
6pt Amsterdam
7pt Amsterdam
8pt Amsterdam
9pt Amsterdam
10pt Amsterdam
11pt Amsterdam
12pt Amsterdam
13pt Amsterdam
14pt Amsterdam

44. 9. VOORGROND-ACHTERGROND

45. WIDGETS v. KAART

46. THEMA v. ORIËNTATIE

47. 10. REACTIESNELHEID

48. TILING SCHEMA 0 – 14
Zoom 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

49. REDUCEER CONNECTIES

Kaartlagen

Image sprites

Combineer JS

Combineer CSS

Minimaliseer JS en CSS

50. Edward Mac Gillavry
edward@webmapper.net
HARTELIJK DANK
www.webmapper.net

51. CARTOGRAFISCH
GEREEDSCHAP

52. OPEN SOURCE