Graphics and typography of the new 2GIS

Not so long ago, we presented a new 2GIS - perhaps you watched the broadcast from the press conference or read our post here. Much has been told about the new features, but almost nothing about the changed design. It is time to close this gap.

2GIS consists of two equivalent parts. The first is three-dimensional maps of cities. The second - directories of companies, places, transport, rapidly acquiring data.

While working on the new 2GIS, we were looking for not only convenient and ergonomic interface solutions, but also a unique graphical language of the map and reference book: memorable, comfortable and seamless. We want to tell you about the key elements of the graphics of the new version.
')
For a year and a half, the 2GIS map design has come a long way - new colors, three-dimensional buildings and 3D models of sights have appeared. In the new version we needed to pay attention to the data shown on the map. And especially on organization markers are important identifiers in map services. Each of them has its own, memorable marker, which is a kind of business card.



There is a nuance here - it is quite difficult to find unique graphics in a set that is densely occupied with interesting solutions.



In addition, we have another requirement for the shape of the marker. We were important continuity of the form in the card that opens when you click on this marker. Experiments continued.



Experimenting with a variety of forms, we found a solution that further helped us in choosing the plastic of the key design elements of the new 2GIS.



The next step was to find the temperament of the directory.

Directory is a large amount of text. Therefore, the font of the directory is one of the main identifiers that work on the recognition and character of the directory.



We started collecting requirements, understanding that the font should correspond to the high rhythm of using 2GIS products. Therefore, you need to focus on good recognizability of characters, fast reading and saving screen space, because the font will work in long names of directory objects, in a panel of the screen width.



The requirement for the capacity of the string in long names quickly led us to narrowed, condensed fonts .

On the user side, there is a delay when opening a page on sites and services with custom fonts. We wanted to control it and achieve quick response from users. Therefore, the number of fonts on the page needed to be dosed. This means that the selected font will be accompanied by fonts from the standard system set, which are accurately shown quickly. We chose Helvetica and Arial as system ones. Such a choice imposed a restriction on the design of signs of our candidate. It must be a closed grotesque. Thus was formed the final set of fonts - closed condensed grotesques:



Since 2GIS is mainly a Russian-language service, we looked at the Cyrillic fonts.

The choice was not rich. We paid attention to two candidates. Substituting them in different directories we looked at:

• The width of the stroke. The title of the card should not be a black spot and should not be too light.
• Tracking. Without changing the author's tracking, we must have a comfortable rhythm of the characters in the string.
• Hinting The font should look clear throughout the park of browsers and mobile devices.
• License. The cost of the license must be reasonable, because in the long run the font will have to be replicated to more than 20,000,000 2GIS users.

On the one hand, almost all problems can be solved with the authors of fonts and slots, specializing in development and mastering. On the other hand, each change significantly changed the final cost. Both candidates did not fit us and we rolled back a step. It was decided to look for the font in Latin and make the Cyrillic alphabet separately.

All this time we have been working in parallel on refreshing the 2GIS brand and noticed in the font market a studio developing a font with forms similar to us.


Swiss Typefaces - the Swiss foundry, led by Jan Pati, worked on the Suisse font family. The graphics of this font was close to us. Despite the fact that in their publications at the time did not appear condensed font, we contacted the studio. The Universe overheard us, it turned out that Jan was working on a condensation for his Suisse BP Int'l and was interested in replenishing the font family with Cyrillic. We agreed to cooperate.

The studio, together with Alexey Vanyashin , developed the Cyrillic alphabet and prepared a custom style with the width of the stroke we need.



The result of cooperation was a wonderful pair of Suisse BP Int'l Condensed and Condensed Bold.



In this font, the authors succeeded in making compliments to the traditional Helvetica and refreshing its plasticity with graceful moves.



In Suisse, lowercase and lowercase letters have less rounding, which helps to set the rhythm of the headlines and slightly tighten the tracking without the appearance of black spots in the words. In lower case characters, the entrances of the shoulders and the semi-ovals to the vertical strokes are more contrasted, which also affects the rhythm of reading and the distinctiveness of signs. The width of the stroke was customized individually for use in the directory.

2GIS is a universal reference, but we try to make the user of any city feel familiar. For example, maps for some cities are configured individually. We went further and decided to develop a system of graphic identifiers of cities. It would seem that it could be easier - redrawn all the coats of arms and inserted into the interface. Oh, no: the lack of universal rules and clean solutions in the heraldry of cities made it very difficult for us. Therefore, the identifiers were based on the most intelligible images of urban heraldries or key architectural, cultural, industrial objects.



These and many other moves allowed us to create a graphical language that you can already see on beta.2gis.ru and see 2GIS in future products.