We recently updated Mapbox Light and Dark, our maps for data visualizations and overlays. In the most recent round of design updates, we’ve made some significant improvements for mobile use. Today, we are going to focus on how we overhauled our color systems for both maps.
In redesigning Mapbox Light and Dark, we knew we wanted to update both color schemes to increase contrast and improve legibility of the map’s larger background features like parks, water, buildings, and land use. The unique demands of mobile usage – a smaller screen, less surrounding context – only underscored the need for easy differentiation of features.
Both maps had always used monochrome palettes, but we decided that adding a very small amount of color could provide the added clarity necessary for mobile viewing. We were initially wary of this strategy, afraid that the addition of color might impose too strong a color system and distract from the map’s shared mission of complementing overlaid data. However, by employing the lightest possible touch – the amount of saturation is always very light – we have been able to provide a greater degree of clarity without pushing these maps into the foreground.
Compare the two approaches in the following images. On the top, the new Mapbox Light, along with a selection of colors pulled out of the map. Underneath it is a version of the exact same map, had it been designed with a set of completely desaturated tones. The monochrome version is not terrible, but the new version clearly provides a greater sense of depth and better distinguish San Francisco’s various parks, land uses and water bodies from one another.
We optimized the new Mapbox Light and Dark for mobile, but these improvements look great and deliver the same benefits across all devices, screen types, and environments. Explore Mapbox them both further, and start building with Light and Dark today!