Designing Mapbox Streets and Outdoors for mobile

Nicki Dlugash
Mon, 23 May 2016 11:00:00 -0400

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.

Mapbox Streets and Mapbox Outdoors

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.

Mapbox Streets colors

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.

Transportation features - highway shields, rail, and ferry - are in a consistent hue.

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.

Higher levels of saturation place features like parks and water into the foreground.

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.

Mid and high zoom levels highlight different features due to changing saturation levels.

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.

Mid zoom view of POI icons, a non-categorized POI icon and highway shields.

Designing crisp icons

We designed all three icon sets on a pixel grid, allowing these tiny images to look sharp at any screen resolution.

POI icons, highway shields and rail icons.

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.

Compared to the original, our US Interstate highway shield has exaggerated curves and points, thicker white borders, and no text labeling.

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.

Updated bike icon from the new Maki icon set.

Take a closer look at Mapbox Streets and Mapbox Outdoors!