May 8th, 2012

Designing Icons for Web Cartography

For our latest guest blog post we invited designer / cartographer Saman Bemel Benrud to talk about the unique challenges presented when designing icons for maps.  Saman is one of the creators of Maki which is an open source map icon project.  We are proud to announce the Maki collection is now available for download on The Noun Project as well. 


Maps are capable of powerfully communicating ideas, clearly visualizing complex data, and adding context to a stories, whether you’re mapping humanitarian crisis in Africa or providing directions to the nearest café. As a designer with MapBox, I’ve been working on and off over the last few months on Maki, an open source icon set made especially for cartography and based on the points-of-interest used in OpenStreetMap. In cartography, points-of-interest include things like restaurants, bus stations, and schools. Maki will eventually grow to include icons for pretty much anything you might want to mark on a map. I’m excited that Maki has been added to the Noun Project as a collection, and to introduce these symbols, I thought I’d outline some of the unique challenges that come along with designing icons for maps. While these icons were designed with mapping in mind, they should work great in many different situations.

Icon Size


Effective map icons need to be large enough to be recognizable but small enough to not impede the readability of the rest of the map. Most of the time, icons larger than 25 or 30 pixels in either direction are going to be too big. With Maki, I designed three separate sizes: 24px, 18px, and 12px, so the icons can scale with the map as a user zooms in and out. To make icons that work well at small sizes, the symbols need to be simplified down to their most iconic form, with no extraneous details, and great care needs to be taken to work with the pixel grid in creative ways or forms will look blurry. Here’s what my grid looks like for the bicycle icon, blown up 900%:

To get the best results, it’s not good enough to just scale icons to the desired size. Manual tweaking needs to take place or else you’ll be left with a blurry mess. Here are the same icons at their actual size:

In addition to making sure the icons stay crisp at the smallest size, I’ve also designed the largest size to elegantly scale up and look good at any size. The particular version of Maki I’m releasing on The Noun Project includes only the largest size. If you’d like to use the original small icons, download the bitmap versions from mapbox.com/maki.

Universality


It is especially important for web maps to have iconography that works across cultures. Openstreetmap data has global coverage and active communities all over the world, and these people should be able to recognize symbols on maps just as well as Americans like me. For each icon, I researched precedents set by the likes of the AIGA and spent a lot of time just google searching things like “school symbol Korea”. I ended up using two running children for the school icon because it’s widely used, from the US to France to India, while other school symbols like a bell, an apple, or a traditional American schoolhouse wouldn’t translate as well:

Legibility


When maps get busy, colorful, and complex, icons need to stay visible while not contributing themselves to excessive busyness of a map. I address this problem in two ways with these icons. First of all, it’s important to design each symbol with a unique silhouette so they are easily distinguishable from each other, but not so different that they are loud or distracting. While I strive to make each icon completely unique, the whole set shares the same grid, and uniform corner radiuses and widths help hold the set together as well. Secondly, it’s best to use a simple 1px semi-transparent border around the icons so they stay visible even against dark backgrounds.

Using These Icons


Even though these icons were designed with mapping in mind, they should work great in all sorts of different situations, from user interfaces to data visualizations. However, if you would like to use them in their native habitat and get your feet wet with map design, I recommend downloading TileMill, a free map design suite. There’s good point-of-interest data available from CloudMade. For inspiration, check out some of the other projects that have used Maki, like this demo I whipped up, or in MapBox Streets to mark airports and rail stops. Expect the Maki collection to continue to grow in the coming months.

Receive Updates!