2Gis icons

Direction —Grigoriy Cheretov, 2Gis Design Team

Однажды летом 2023 года со мной связался Григорий Черетов, дизайнер команды 2Гис. Он предложил поработать над новым стилем иконок приложения, так как старые иконки были довольно разношерстные, и к тому же не выражали нужный образ. Моей задачей было разработать новый стиль иконок, а затем развернуть его в полноценную систему.


One day in the summer of 2023, Grigory Cheretov, the designer of the 2Gis team, contacted me. He suggested working on a new icon style for the app, as the old icons were quite diverse and did not express the desired image.My task was to develop a new icon style, and then deploy it into a full-fledged icon system.

Образ Image

Дизайн-команда 2Гис собрали образный мудборд, изучив который, я выделил ключевые образные характеристики — гибкий, удобный, функциональный, современный — которые вылились в главную метафору для всего сета:


The 2Gis design team assembled an imaginative mudboard, after studying which I identified the key imaginative characteristics — flexible, comfortable, functional, modern — which resulted in the main metaphor for the entire set:

многофункциональный инструмент, однако не лишенный эстетики a multifunctional tool, but not devoid of aesthetics
Конструкция Construction

Для конструирования иконок используется набор графических блоков, форма которых выражает конкретные образные характеристики. Например, дуга—это графическое выражение понятия гибкости.


To design icons, a set of graphic blocks is used, the shape of which expresses specific figurative characteristics. For example, an arc is a graphical expression of the concept of flexibility.

Иконки существуют в двух базовых размерах: 24х24 пикселя и 16х16 пикселей. Толщина штриха иконки 24х24 — 1,7 пикселя, что соответствует толщине основного штриха прописной буквы шрифта Sber Sans кегля 20 пунктов.

Толщина штриха иконки 16х16 — 1,4 пикселя, что соответствует толщине основного штриха прописной буквы шрифта Sber Sans кегля 16 пунктов.


Icons available in two sizes: 24x24 pixels and 16x16 pixels. The stroke thickness of the 24x24 icon is 1.7 pixels, which matches to the thickness of the stem of the capital letter of the Sber Sans font size of 20 pt. The stroke thickness of the 16x16 icon is 1.4 pixels, which matches to the thickness of the stem of the capital letter of the Sber Sans font size 16 pt.

Особенности Specialities

Было принято решение не использовать в иконках типографические символы шрифта Sber Sans, а отрисовать некоторые символы в соответствии с выбранным стилем, сделать эти символы более графичными. Например, знаки валют, знак парковки, собака и так далее.


It was decided not to use the typographic symbols of the Sber Sans font in the icons, but to draw some symbols in accordance with the chosen style and make these symbols more graphic. For example, currency signs, parking sign, at symbol etc.

Еще одной особенностью этого набора иконок является то, что внутренние скругления (которые, кстати, за глаза называют ПВХ), в меньших размерах превращаются в угол.


Another feature of this set of icons is that the inner roundings (which, by the way, are called PVC behind their back) turn into a corner in smaller sizes.

На сайте 2Гис есть большой рассказ о причинах редизайна иконок, где звучит главная мысль:


There is a great story on the 2Gis website about the reasons for the redesign of the icons, which highlights the main idea:

Иконографика находится на пересечении функции и образа продукта, является одновременно и инструментом, и графическим языком Iconography is at the intersection of product function and image, and is both a tool and a visual language
previous
Ink Experimental
next
AliExpress
Made on
Tilda