Best Practices for Map Design
2013 Esri International User Conference July 8–12, 2013 | San Diego, California Technical Workshop
Best Practices for Map Design Kenneth Field, Damien Demaj & Wes Jones
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Kenneth Field (@kennethfield)
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Damien Demaj (@damiendemaj)
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Wes Jones
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Outline of session •
Cartographic Requirement
•
Design principles
•
Putting the pieces together
•
Publishing online
•
Synopsis, final checking
CAR T OGRAPHY Esri UC2013 . Technical Workshop . Best Practices for Map Design
Map User Map Maker Knowledge Transfer
GIS User
Cartographer
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Design is crucial to communication in GIS
Large database Equal Treatment No inherent design
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Design
Data Processing Function Meaning
Evaluation as part of the design process
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Cartographic Requirement
Esri UC2013 . Technical Workshop .
What’s the story?
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Maps are complex graphics
Written/spoken word: SERIAL
Graphics: PARALLEL
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Cartographic requirement • Audience •
Media resolution
•
Viewing distance
•
Output medium
• Anticipated
level of understanding
•
Conditions of use
•
One map or multiple maps
•
What areal extent to show
•
Insets
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Requirement
Esri UC2013 . Technical Workshop .
2011/12
Esri UC2013 . Technical Workshop . Best Practices for Map Design
2013
Cartographic Requirement Take-aways • Know your who’s, what’s, where’s & how’s. • Ask if you don’t know!
Esri UC2013 . Technical Workshop .
Cartographic Design Principles
Esri UC2013 . Technical Workshop .
Visual hierarchy
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Visual hierarchy
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Visual hierarchy
Esri UC2013 . Technical Workshop .
Visual Hierarchy Take-aways • Visual hierarchy creates structure and visual pleasure for your users. • A great organizational aid.
Esri UC2013 . Technical Workshop .
Visual contrast
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Figure-ground
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Figure-ground
Esri UC2013 . Technical Workshop .
Figure-ground Take-aways • Make the important features on your map pop. • Know who the actor is, and who is the stage.
Esri UC2013 . Technical Workshop .
Projections Online map services • WGS 1984 Web Mercator (Auxiliary Sphere)
ArcGIS Online Bing OSM Google
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Projection
Esri UC2013 . Technical Workshop .
Projection Take-aways
• Don’t marry Mercator • On-the-fly re-projecting can be costly
Esri UC2013 . Technical Workshop .
Symbol palette spacing
orientation
size
hue
shape
lightness
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Symbol meaning
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Symbols
Esri UC2013 . Technical Workshop .
Symbols Take-aways • Know your visual variables • Text is a symbol. Don’t forget that!
Esri UC2013 . Technical Workshop .
Classifying data
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Feature generalization Large scale
Small scale Esri UC2013 . Technical Workshop . Best Practices for Map Design
Feature generalization Simplify Smooth Aggregate Amalgamate Collapse Esri UC2013 . Technical Workshop . Best Practices for Map Design
Feature generalization Merge Refine Exaggerate Enhance Displace Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Feature generalization
Esri UC2013 . Technical Workshop .
Generalization Take-aways • Too much detail will kill your map • Complex geometries are ugly
Esri UC2013 . Technical Workshop .
Colour – sequential
Sequential
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Colour – diverging Diverging Critical Class
Diverging Critical Break
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Colour – qualitative Qualitative
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Colour
Esri UC2013 . Technical Workshop .
Colour Take-aways • Use colour wisely • Understand which colour scheme to use and when • Put a ‘u’ in colour
Esri UC2013 . Technical Workshop .
Typography Purpose
Size 5 point
Position 7 point
10 point
12 point
18 point
24 point CITIES Towns villages
Conflict Style
sans serif serif Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Typography
Esri UC2013 . Technical Workshop .
Typography Take-aways • Possibly the most difficult map element to get right (alongside colour) • Give labeling the time it deserves
Esri UC2013 . Technical Workshop .
Putting the pieces together
Esri UC2013 . Technical Workshop .
User interface for web map apps
•
Map/app title
•
Main map
•
Pop-ups
•
Dynamic legends
•
Sliders, clickable icons
•
Multi-media content
•
Credit and source
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: layout
Esri UC2013 . Technical Workshop .
Layout Take-aways • Poor UI and map surrounds can murder your map. • Give your map the finish it deserves!
Esri UC2013 . Technical Workshop .
Synopsis
Esri UC2013 . Technical Workshop .
Thank you… Please fill out the session evaluation
First Offering ID: 1222 Second Offering ID: 1422
Online – www.esri.com/ucsessionsurveys Paper – pick up and put in drop box Esri UC2013 . Technical Workshop . Best Practices for Map Design
[email protected]
@kennethfield
[email protected]
@damiendemaj
[email protected]
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Best Practices for Map Design Kenneth Field, Damien Demaj & Wes Jones
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Kenneth Field (@kennethfield)
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Damien Demaj (@damiendemaj)
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Wes Jones
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Outline of session •
Cartographic Requirement
•
Design principles
•
Putting the pieces together
•
Publishing online
•
Synopsis, final checking
CAR T OGRAPHY Esri UC2013 . Technical Workshop . Best Practices for Map Design
Map User Map Maker Knowledge Transfer
GIS User
Cartographer
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Design is crucial to communication in GIS
Large database Equal Treatment No inherent design
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Design
Data Processing Function Meaning
Evaluation as part of the design process
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Cartographic Requirement
Esri UC2013 . Technical Workshop .
What’s the story?
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Maps are complex graphics
Written/spoken word: SERIAL
Graphics: PARALLEL
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Cartographic requirement • Audience •
Media resolution
•
Viewing distance
•
Output medium
• Anticipated
level of understanding
•
Conditions of use
•
One map or multiple maps
•
What areal extent to show
•
Insets
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Requirement
Esri UC2013 . Technical Workshop .
2011/12
Esri UC2013 . Technical Workshop . Best Practices for Map Design
2013
Cartographic Requirement Take-aways • Know your who’s, what’s, where’s & how’s. • Ask if you don’t know!
Esri UC2013 . Technical Workshop .
Cartographic Design Principles
Esri UC2013 . Technical Workshop .
Visual hierarchy
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Visual hierarchy
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Visual hierarchy
Esri UC2013 . Technical Workshop .
Visual Hierarchy Take-aways • Visual hierarchy creates structure and visual pleasure for your users. • A great organizational aid.
Esri UC2013 . Technical Workshop .
Visual contrast
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Figure-ground
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Figure-ground
Esri UC2013 . Technical Workshop .
Figure-ground Take-aways • Make the important features on your map pop. • Know who the actor is, and who is the stage.
Esri UC2013 . Technical Workshop .
Projections Online map services • WGS 1984 Web Mercator (Auxiliary Sphere)
ArcGIS Online Bing OSM Google
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Projection
Esri UC2013 . Technical Workshop .
Projection Take-aways
• Don’t marry Mercator • On-the-fly re-projecting can be costly
Esri UC2013 . Technical Workshop .
Symbol palette spacing
orientation
size
hue
shape
lightness
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Symbol meaning
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Symbols
Esri UC2013 . Technical Workshop .
Symbols Take-aways • Know your visual variables • Text is a symbol. Don’t forget that!
Esri UC2013 . Technical Workshop .
Classifying data
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Feature generalization Large scale
Small scale Esri UC2013 . Technical Workshop . Best Practices for Map Design
Feature generalization Simplify Smooth Aggregate Amalgamate Collapse Esri UC2013 . Technical Workshop . Best Practices for Map Design
Feature generalization Merge Refine Exaggerate Enhance Displace Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Feature generalization
Esri UC2013 . Technical Workshop .
Generalization Take-aways • Too much detail will kill your map • Complex geometries are ugly
Esri UC2013 . Technical Workshop .
Colour – sequential
Sequential
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Colour – diverging Diverging Critical Class
Diverging Critical Break
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Colour – qualitative Qualitative
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Colour
Esri UC2013 . Technical Workshop .
Colour Take-aways • Use colour wisely • Understand which colour scheme to use and when • Put a ‘u’ in colour
Esri UC2013 . Technical Workshop .
Typography Purpose
Size 5 point
Position 7 point
10 point
12 point
18 point
24 point CITIES Towns villages
Conflict Style
sans serif serif Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: Typography
Esri UC2013 . Technical Workshop .
Typography Take-aways • Possibly the most difficult map element to get right (alongside colour) • Give labeling the time it deserves
Esri UC2013 . Technical Workshop .
Putting the pieces together
Esri UC2013 . Technical Workshop .
User interface for web map apps
•
Map/app title
•
Main map
•
Pop-ups
•
Dynamic legends
•
Sliders, clickable icons
•
Multi-media content
•
Credit and source
Esri UC2013 . Technical Workshop . Best Practices for Map Design
Demo: layout
Esri UC2013 . Technical Workshop .
Layout Take-aways • Poor UI and map surrounds can murder your map. • Give your map the finish it deserves!
Esri UC2013 . Technical Workshop .
Synopsis
Esri UC2013 . Technical Workshop .
Thank you… Please fill out the session evaluation
First Offering ID: 1222 Second Offering ID: 1422
Online – www.esri.com/ucsessionsurveys Paper – pick up and put in drop box Esri UC2013 . Technical Workshop . Best Practices for Map Design
[email protected]
@kennethfield
[email protected]
@damiendemaj
[email protected]
Esri UC2013 . Technical Workshop . Best Practices for Map Design
