Принципы отрисовки новых иконок в шрифтовую пару на Авито

Привет, меня зовут Максим Аксёнов, я дизайнер интерфейсов в Авито. В этой статье я расскажу про новые иконки Авито. Расскажу про основы отрисовки иконок, сформированные принципы, правила, которые выработал в процессе и о самом процессе.

С командой дизайн-системы мы договорились созваниваться раз в неделю и обсуждать получаемый мною результат. Создать подобные иконки было их инициативой, а обратились ко мне, так как я ранее уже работал над сетом иконок только другого типа.

Для начала необходимо было понять, как часто в системе иконки находятся рядом со шрифтом? В каких местах, какие элементы рядом, в каком контексте. С поиском всех необходимых состояний помогла команда Дизайн-системы.

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

Затем с командой Дизайн-системы разделили отрисовку по приоритету, в зависимости от важности/популярности места, в котором они располагались. И я начал первый подход.

У продукта есть есть устоявшийся шрифт, с которым необходимо подружить иконку, следовательно для нас иконка будет символом, который может хорошо стоять в паре при любых условиях, а именно в кнопке, в тексте, перед текстом и после, строчно и подряд.

Есть часто используемые размеры шрифта — 14 и 16, в дизайн-системе обозначены как S и M, такие же название дал и иконкам, чтобы понятен был принцип пары.

После нескольких проб и ошибок, стал создавать закономерности. Все найденные инсайты собрал в список принципов, ими и делюсь в статье.

Иконка идет в паре со шрифтом, а у шрифта есть посадочная/базовая линия, на которую можно посадить и наши символы. Так они будут гармоничным началом или продолжением.

У шрифта есть толщина начертания, с этим тоже можно работать. Отталкиваемся от параметров шрифта, чтобы подобрать толщину линий иконки и верно задать визуальный вес символу, не потеряв его в тексте и не сильно выделяя при этом.

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

Для этого я сделал сетку, которая мне в этом поможет.

Важно, чтобы сетка помогала, но не ограничивала, если визуально элемент иначе не отобразить.

Наши иконки небольшого размера и могут размещаться в растровом формате, то есть высокая вероятность, что силуэт иконок размоет до неузнаваемости. При отрисовки иконок стоит учесть базу (придерживаться пиксельной сетки).

В тех случаях, когда линия толще и не заполняет целый пиксель, все равно стоит придерживаться данного правила, чтобы основная линия знака оставалась плотной.

Таким образом даже в растре мы получаем желаемый эффект — плотность и четкий силуэт.

Также не стоит забывать про диагональные линии и проверять их отображение в растре.

Для квадратных и прямоугольных форм иконок, всегда нецельные пиксели горизонтальной линии свешиваем вниз (возможны исключения, чтобы не грязнить). А вертикальные линии размещаем преимущественно внутрь. Для того, чтобы не увеличить визуально символ относительно шрифта.

У меня много практики в отрисовке иконок и по опыту могу с уверенностью сказать, что стиль иконки сохраняет консистентность системы, брендового стиля, а не только сообщает дополнительную информацию или является якорем для пользователя. При отрисовке символов в пару к шрифтовому стилю, шрифт так же вносит свои принципы.

С учетом начертаний шрифта, скругления используются как вспомогательная выразительность символа / подчеркнуть форму, либо поддержать стилистику, но не нарушает узнаваемость символа.

Некоторые символы могут оставаться угловатыми, если это типично для формы или стилистического решения.

У иконок должна быть плоская фронтальная форма без перспективы, чтобы не терять узнаваемость знака. А также схожий уровень детализации, чтобы не терять визуальный вес символа. Это позволит иконкам из набора без конфликтов находиться рядом друг с другом, и упростит для пользователя считывание знака.

Скругления у окончаний линий отсутствуют, простые формы угловатые — это для повторения шрифтового начертания, чтобы символ и шрифт имели общие рифмы.

Нагромождение линий / множество пересечений / образование грязи / излишняя плотность — все решается графическим упрощением символа / примитив или заливкой формы.

Когда планируется совершаться прямое действие, лучше использовать символ конкретного действия, без сложных метафор. Если визуальные решения не помогают читать символы, то усложнение ни к чему.

Нужно учесть, что это рекомендация субъективна, а чистый и простой символ приятен глазу.

Последнее, что я прорабатывал для публикации нового сета, был контейнер для символа. К этому решению пришел исходя из того, что у шрифтовых стилей Авито есть определенная высота.

Создавая символ, который хорошо должен встраиваться в шрифт, стоит учесть кто и как будет его применять. Поэтому для шрифта S — иконки S, для M — соответственно. Это позволит проще дизайнерам и разработчикам управлять компонентами.

Контейнер имеет схожую со шрифтом высоту, но так же свою ширину с заложенным отступами внутри, где будет учитываться оптимальное расстояние от текста до символа.

Таким образом избегаем смещений иконок относительно шрифта, устраняем риски поставить рядом с текстом иконки сильно больше или меньше размеру.

После работы по созданию сета иконок сочетающихся с текстом, получилось сформировать два сета — S и M для соответствующих шрифтовых стилей. В каждом по 170 иконок. Каждая иконка отрисована вручную и подгонялась под шифт и другие иконки. Много внимания было уделено деталям, в некоторых случаях для знака был подбор из трех и более метафор, чтобы найти простой и понятный символ отображающий нужный раздел или действие.

По окончанию работ новый набор иконок презентовал дизайнерам команды Дизайн-система, и после одобрения иконки были вшиты в компоненты. Также был сформирован гайд для дизайнеров, по которому они сами могут создать необходимую иконку или проконсультироваться со мной.

И спасибы

Благодарю Инну Летину и Дениса Сбитний из команды Дизайн-системы за поддержку на протяжении всего процесса, вместе мы находили решения, которые подходили лучшим образом. Наши встречи проходили легко и продуктивно, уходил с приятным впечатлением.

Благодарю Анну Дианову, на какой-то период она была моим стажером, за тестирование гайда для дизайнеров и помощь в отрисовке иконок.

Благодарю Виктора Лушина за помощь в разработке начальной концепции и дальнейшей поддержке.

Благодарю команду дизайна Авито за приятный фидбек и интерес к сету иконок.