After many experiments and trials to make Yandex.Maps design clear I can say the one of the significant steps of the big work is done.
We redesigned the map of Moscow at Yandex. The following targets has been set:
- Ensure maximum “readability” of a map image;
- Keep recognizable color palette of a map image (the colors of map design currently used, warm colors, are widely associated with Yandex.Maps brand);
- Provide greater visibility and readability for various types of overlay layers;
- Ensure that information, important for visual navigation, such as contours of widely know geographic places, or text labels, will be readable and usable according to common usage scenarios;
- When printing black and white map images, a resulting print should not lose the details important for visual navigation;
- A design of map image should employ a concept, based on two common scenarios from the web maps: a displaying of standalone map image and a displaying of map image as a background for some information (traffic jams, POI, special overlays).
We have done the important stage of the project. We talked to designers, engineers and other smart guys during all time of the project. We achieved a lot of experience of mapping design.
For example, at the the begining of the project we collaborated with Stamen. These cool guys helped us pick main issue definitions, refine ideas, get important recommendations what to improve. We implemented it into final design.
So, let take a look to the Before and After comparisons:
The number of various roads styles was reduced to three styles at the one zoom level (in most cases). The “rule of 3″ makes the roads design clear and better understanding. Also the difference between living and was removed at these zooms.
At this zoom level we improved the district names labeling and major railway stations has been received clear icons:
At this zoom we labeled the subway stations.
The color of the line of the subway station is important information for our users. It`s a part of the strong mental model of Moscow map. Colored transparent subway lines layer was added.
Next zoom the subway icons were continued the proper colors of lines.
The drivers will be surprised to use the one-way roads arrows.
And finally, we improved the junctions rendering:
Overall, we kept recognizable color palette of a map image, improved the legibility of the objects and made the map image clear.
