We recently updated Mapbox Streets and Mapbox Outdoors, our two general use maps. While they’re designed to be optimized across a variety of devices, screen types, and environments, mobile use cases are increasingly important. When designing maps for mobile, we take into account material considerations, like smaller viewports and a wider variety of physical environments. We also take into account user behavior, such as faster, more fluid map manipulation (zooming, panning, tilting), and the need for faster visual processing speeds when on the move.
Designing for mobile touches all aspects of cartography, but I want to take a closer look at two very visual facets: color systems and iconography.
Defining a color system
Smaller viewports mean you see a lot less context at one time. A larger proportion of map features and labels are also cut off at screen edges, obscuring them and making them less recognizable. A systematic color scheme can help reduce ambiguity.
Unifying features through color relationships
Both Mapbox Streets and Mapbox Outdoors use around a dozen unique hues (what we normally think of as “color”), but a variety of shades and tints.
Many conceptually similar features share the same hue value, to reinforce their meaning and create a more cohesive map. For example, many features related to navigation and transportation share the same blue hue: rail labels, highway shields, ferry routes, and even road casings.
Creating visual depth
More saturated colors jump to the foreground while less saturated colors sink into the background. Maps that have more visual depth – a greater contrast between foreground and background – tend to look less abstract, since the delineation of different features makes them more readily understandable.
For example, landuse and landcover areas on Mapbox Streets and Mapbox Outdoors sit on two visual planes: water bodies and parks are more saturated and closer to the foreground while the rest are closer to the background.
Some landuse areas like schools, hospitals, and airports are less saturated at low-to-mid zoom levels, but become more saturated at high zoom levels to create more visual contrast with buildings.
Refining icons
These global maps include a lot of icons, mainly divided into three categories: transit icons, highway shields, and points of interest (POI) icons. We’ve redesigned all three icon sets to be precise and comprehensible because at-a-glance legibility matters – especially when you’re looking at a map on the go.
Creating visual hierarchy
To better differentiate between types of icons, we made transit icons and highway shields more visually prominent, and POI icons less prominent. Since POI icons tend to be denser than other types of icons, making them more subtle reduces clutter.
Compared to the previous version of Mapbox Streets, these redesigned maps have POI icons with smaller footprints: we removed the background shape on all POI icons, and completely redesigned the icon for non-categorized POIs to be an unobtrusive dot. While colors are dark and saturated for legibility, they’re close in hue to the landuse and building features behind them. This helps them recede into the background compared to highway shields and transit icons.
Designing crisp icons
We designed all three icon sets on a pixel grid, allowing these tiny images to look sharp at any screen resolution.
Adapting transit logos and highway shields
For select cities and countries, our maps feature local public transit icons and highway shields. These help orient the user by visually connecting the map to their environment – particularly useful for on-the-ground navigation on mobile devices.
Both of these icon sets are based on symbols originally designed at much larger scales, which means that simply resizing existing images would result in blurry, illegible icons. Instead, we redrew every symbol, simplifying the details and exaggerating the form. Our biggest challenge was balancing good pixel-alignment with an accurate representation of the original symbol.
Designing information-dense POI icons
Mapbox Streets and Mapbox Outdoor POI icons are based on our newly redesigned Maki icon set and styled using our newly launched Maki icon editor. To be instantly recognizable at their tiny size, our POI icons are as simple as possible in concept and shape, with distinct silhouettes.
Take a closer look at Mapbox Streets and Mapbox Outdoors!