The map is a graphic creation. Even when it is so highly conditioned by scientific purpose, it cannot escape graphic laws.
What should your map be like?
- Easy to read
- Uncomplicated to understand
- Adapted to the user group
Why does good map design matter?
- Tell the story the map is supposed to tell
- Keep users visually connected to the brand or app the map is integrated to
- Guide the user
- Highlight or deemphasise information
- Have a decent basemap that keeps the user oriented but doesn't distract from the main data and interactions
The first and most important design rule is: Rules are made to be broken. There are no hard rules on this so take all the following as suggestions.
Symbols, color and typography are the main customizable elements of the (base)map.
- Besides the basemap, use at most three thematic components
- Distribute those components in different visual layers through the usage of
- Different point sizes are divided into different visual layers
- Small points fade into the background
- Large points pop into the foreground
- Different line widths are divided into different visual layers
- Thin lines fade into the background
- Thick lines pop into the foreground
- Mostly in the visual background
- Use color to highlight or deemphasise
- Light colors for areas and layers in the visual background
- Strong dark colors for points, text and layers in the visual foreground
- Use assosiative colors (soil: brown, water: blue, hot temperatur: red, …)
- A limited color palette of at most 12 unique colors is best (but a larger variety of shades and tints is ok)
- Text has lowest geometric information but is main explanatory element
- Possible components of the map text
- Place names (München, Arcisstraße, …)
- Functional names (university, airport, …)
- Assosiative names (Englischer Garten, A99, …)
- Numbers (contour lines, ocean depths, …)
- Other (copyright, scale, …)
- Can be in different languages with different alphabets (your font has to support that)
- Use fonts consistent for similar object classes
- Prefere light, sans-serif fonts