What to think about when designing maps: moving beyond generic and into amazing

Without a map, you’re nowhere!

Small Multiples have done a lot of jobs with maps – around 60 projects all up – across a diverse range of datasets. We use maps for all kinds of situations in our lives, private to professional. It’s really easy for maps to become frustrating; and harder to make them really awesome.

The idea of a generic map isn’t so bad – like the ubiquitous Google Map. They do work and there’s nothing wrong with them.

Framework for really amazing maps

Great maps build up through these layers:

  • intuitive interaction
  • useful controls
  • relevant data
  • right context (base maps)
Base maps

Context lets people know where they are and what they are looking at: landmass and water, streets, boundaries and labels. These can all go into a base map, the lowest layer of the design that everything else is layered on top of. In some cases you don’t need much detail on this layer, in others you’ll want full satellite imagery.

Satellite maps are great for physical spaces, understanding things like vegetation and literally what’s there. The problems are that they are limited in detail, they are often quite varied in colour making them hard to design with, and they are heavy for performance.

Street maps are lighter and recognisable, people are used to dealing with them. Light modifications to Google maps can make them much cleaner to use. Google maps let you tweak a lot; and there’s Snazzymaps as well.

Mapbox Studio is a step up from that, Small Multiples use it a lot. It lets you control the typography (which all designers want!), plus you can control zoom level.

Designing with maps: there are Sketch plugins that can inline Google maps and Mapbox; but screenshots still end up working better.

You must always include attribution in the base map.


Map data will generally be composed of points, polygons and markers. You need to consider the accuracy of this data; and how that impacts design.

Reference: Jacques Bertin’s visual variables

Lines can be very specific, or curiously nonspecific – but arcs are used for a variety of reasons, including generating a sense of movement between points.

Polygons – there are lots of tools to work with them these days, which is great. Colouring polys needs to account for the underlying data: category, sequential, diverging. These will all help choose colours.

Tool: Colourbrewer. A note on borders – you normally choose borders that blend in a bit, they need to clearly define the space but not be too intrusive.

Legends – these help people understand all the data you’ve provided. You need them to be as obvious as possible.


Controls let people change the context in some way – zooming and out, changing the location, choose a specific point, or refreshing back to the default state. Controls are usually placed in the corners to avoid distracting from the map.


All our usual design considerations are compressed down into a smaller context, but they don’t really change.


Looking at the map for Design 19… Its primary purpose is to help people get to the venue. The google map is good; but it was clearer when it was pared down to less information, and that was focused on getting there. So public transport was retained. The zoom controls were kept to give people a hint that the map was clickable. A lightly customised place marker was used to be at least a little on brand.

Service NSW branch finder. The original was too busy and really hard to work with. So they clustered the markers to hotspots at higher zoom levels, to make it easier to drill down into the right region. They reduced the amount of duplication and detail on the lowest zoom levels.