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

Edward Mac Gillavryedward@webmapper.net

www.webmapper.net

HARTELIJK DANKHARTELIJK DANK

CARTOGRAFISCH CARTOGRAFISCH GEREEDSCHAPGEREEDSCHAP

OPEN SOURCEOPEN SOURCE