FedGIS Conference February 24–25, 2016 | Washington, DC
BEST PRACTICES FOR MAP DESIGN ADVANCED
Billie Leff, Esri BEST PRACTICES FOR MAP DESIGN: ADVANCED
Cartography and design principles
Designing basemaps and thematic overlays WHY ARE MAPS A BIG DEAL?
• Maps generate reactions! • Esthetics or something else? • The importance of expertise - Cartography - Graphic design - Subject matter - Institutional knowledge - Audience expectations - Technology - Other? • Conceived before you are done with your “GIS work” WHAT MAKES MAPS EFFECTIVE?
Is there data/content to support the established purpose and message? Is the necessary contextual data Who is the target available? audience?
What are the What is the map overarching design purpose and considerations? message? MAP CONCEPT
Drivers • Audience • Purpose/message • Design considerations
Limiting factors
• Got data? • Got context? • Performance BEFORE YOU BEGIN WORKING ON THE MAP
1. Identify and research standards and guidance • Industry specific • Cartography or visualization related 2. Engage stakeholders and collect • Business needs (and expectations) • Data and metadata • Subject matter expertise • Plan for prototypes/iterations 3. Document business & tech requirements 4. Aggregate, enrich, simplify… data WHAT MAKES MAPS RECOGNIZABLE & EASY TO READ?
• Recognizable - Purposeful colors - Custom meaningful symbology - Font use - Standards/conventions driven • Easy to read - Recognizable - Effective - Engaging or actionable - Good design VISUAL WEIGHT
New Zealand VISUAL CONTRAST What is the relationship between foreground and background? VISUAL HIERARCHY & COMMUNICATION Use visual hierarchy and weight to Prioritize content and visualize map element relationships to Create meaning for the map users/audience INTENDED VS. PERCEIVED HIERARCHY
• Author intended - Read - Understand - Learn - See • Reader perceives - Interesting - Familiar - Actionable
SCALE DEPEND SYMBOLOGY BERTIN’S VISUAL VARIABLES
Position changes in the x, y loc
Size change in length, area, repetition
Shape changes in shape
Value change from light to dark
Color changes in hue
Orientation changes in alignment
Texture variation in “grain” BERTIN’S VISUAL VARIABLES
Use for 2-3 types of features
Use for 4-5 types of features
Use for 6 types of features
Use for 7-8 types of features
Use for 9-12 types of features COLOR AND READING SPEED 10% difference for adjacent colors 30% difference for non-adjacent colors COLOR AND IMPLIED MEANING
Is the use of color consistent with the map message? COLOR BLINDNESS DESIGNING FOR COLOR-IMPAIRED AUDIENCE
2 5 1
Avoid color alone Shape & Color Size & Color Label attributes
Pure green Blue-green, blue Light/dark green Pure red Orange, gold Dark/light red Avoid Use Use LABELING FOR WEB MAPS
• Use ~2 meaningful font faces - Serif: paragraphs, prominent features - Italic: physical features - San serif: fast recognition, numerous • Scale-dependent • Color matches feature color • Halo matches predominant background color SYMBOLOGY STANDARDS & GUIDES
Custom
Standard
Guide CARTOGRAPHIC STANDARDS
• Consistency • Effectiveness • Efficiency • Trade craft WEB CONTENT ACCESSIBILITY GUIDELINES 2.0
• Perceivable - Provide text alternatives for non-text content. - Provide captions and other alternatives for multimedia. - Create content that can be presented in different ways, including by assistive technologies, without losing meaning. - Make it easier for users to see and hear content. • Operable • Understandable • Robust ESTHETICS • Color palette should be consistent with branding • Linework should look precise • Type should be legible, not overly decorative • Map symbols should be abstract • Proper visual hierarchy and contrast should be present
Much subjective wiggle room left
THE WEB MAP BURGER
Reference overlay Labels and features for context
Thematic/operational overlay Content, could be a self-contained map and not an overlay
Basemap Context = background (raster), could include reference data CHRACTERISTICS OF BASEMAPS Light Dark 1. Saturation is below 60% Grayscale 2. In the background (visual contrast and hierarchy) 3. Good scale dependencies 4. Intuitive/standard color use Topo Physical 5. Creates good geography context Community Base 6. Aids in pattern recognition 7. Matches the theme of the operational data
Imagery BASEMAP ACCESS BASEMAPS WHY CUSTOM BASEMAPS?
• Different projections and custom tiling schemes • More appropriate regional/cultural context • Richer detail • Branding/identity DESIGNING BASEMAPS: BEFORE YOU START • Start with an inspiration, concept • Research to validate and for examples • Assemble colors and symbology (keep it simple)
Paved and unpaved streets
Green space
Water
Thematic DESIGNING BASEMAPS: SETTING UP
• Configure map document • Layer data • Start at mid-scale DESIGNING BASEMAPS: COLOR USE
• Define color values • Apply colors from the TOC bottom • Adjust color values in HSV mode SPECIFYING COLOR: HSV
Hue 0 360 194
Saturation 0 100 16
Value
0 100 95
194 H 16 S 95 V SPECIFYING COLOR: HSV
Hue 0 360 194
Saturation 0 100 16 46
Value
0 100 75 95
194 H 194 H 16 S 46 S 95 V 75 V SPECIFYING COLOR: HSV
Hue 0 360 194 255
Saturation 0 100 46
Value
0 100 75
194 H 194 H 255 H 16 S 46 S 46 S 95 V 75 V 75 V DESIGNING THEMATIC MAPS
• Select basemap DESIGNING THEMATIC MAPS
• Select basemap • Add thematic data by topic • Define mid-scales first - Query definition - Symbology - Labeling properties • Scale up and down CHARACTERISTICS OF THEMATIC OVERLAYS
1. Audience specific 2. Operational content only 3. In the foreground visually 4. Designed for a specific basemap 5. Standards compliant 6. Simplified but enriched 7. Well organized for use without a legend 8. Properly configured scale dependency and popups DESIGNING FOR A CONTEXT DESIGNING FOR A CONTEXT LABELING FOR THEMATIC LAYERS • Use halos (0.4 size = 1 pixel) • Use light labels for dark backgrounds, dark labels for light backgrounds
Saint Louis Washington APPALACHIAN MISSOURI MOUNTAINS LABELING PEFORMANCE
- Number of labels and features being labeled - Feature complexity - On the fly projection - Complex queries and expressions - Halos DESKTOP SYMBOLOGY SYMBOLOGY FOR THEMATIC OVERLAYS
Applied on the Applied on the desktop (vector) client (raster) REMEMBER BERTIN’S VISUAL VARIABLE!
Use for 2-3 types of features
Use for 4-5 types of features
Use for 6 types of features
Use for 7-8 types of features
Use for 9-12 types of features CUSTOM SYMBOLOGY PLANNING CUSTOM SYMBOLOGY PLANNING: CATEGORIZE CUSTOM SYMBOLOGY PLANNING: SELECT SHAPES CUSTOM SYMBOLOGY PLANNING: SELECT COLORS CUSTOM SYMBOLOGY PLANNING: SELECT PICTOGRAPHS SYMBOLOGY FOR THEMATIC OVERLAYS (SUMMARY)
• Standard or compliant custom • Uses outlines, casings, halos and masks • Scale-dependent • Applied on the - Desktop (vector) - Client side (raster) • Organized - Category (symbol shape, service) - Theme (symbol color, layer group) - Detail (symbol icon, individual layer) RED CROSS FEATURE TAXONOMIES
• Event • Activity • Asset/resource • Contact/person RED CROSS TAXONOMY FOR EVENTS RED CROSS SYMBOLOGY FRAMEWORK COLOR CHOICES RED CROSS ICONOGRAPHY
Events
Assets/Resources
Contacts/People DEMONSTRATION: DESKTOP AND WEB SYMBOLOGY
• Select color values, apply to map, adjust • Character marker symbology in ArcGIS Desktop • Picture symbology in ArcGIS Online PLEASE TAKE OUR SURVEY!
Download the Esri Events Select the session Scroll down to find the survey Complete Answers app and find your event you attended and Select “Submit” Print your customized Certificate of Attendance Print stations located in the 140/150 Concourse Networking Reception Smithsonian National Museum of the American Indian Thursday, 6:30 p.m. – 9:30 p.m. Bus pickup on L Street GIS Solutions Expo, Hall A Thursday, 10:45 a.m. – 4:00 p.m. • Exhibitors • Hands-on Learning Lab • Demo Theaters • Esri Showcase QUESTIONS?
Billie Leff - [email protected]