Map design
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?
- Clear
- Catchy
- Interesting
- 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
Design principles
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.
Design elements
Symbols, color and typography are the main customizable elements of the (base)map.
General principles
- Besides the basemap, use at most three thematic components
- Distribute those components in different visual layers through the usage of
- Points
- Different point sizes are divided into different visual layers
- Small points fade into the background
- Large points pop into the foreground
- Lines
- Different line widths are divided into different visual layers
- Thin lines fade into the background
- Thick lines pop into the foreground
- Areas
- Mostly in the visual background
- Use color to highlight or deemphasise
- Points
Color
- 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)
Typography
- 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
Hands-On
You can choose different tabs to alter different aspects of the map. In the Layers tab you can choose to hide or display different layers. By clicking on the small color patch next to the layer names in the General, Landcover or Text tab you can adjust the color and opacity of the respective layer. On the left side of the color picker you should see a history of choosen colors for the specific layers (although it takes a bit to synchronize). In the Text tab you can also change the font and size multiplier of the text layers and the language of the displayed text.