Как быстро нарисовать пиктограмму, если дедлайн был вчера? Пошаговое руководство для начинающих

Рассказываем, как работать с сеткой, подогнать пиктограмму под разные размеры и проверить линии форматом Outline stroke.

Привет! Меня зовут Ксюша Ершова, я начинающий UX-проектировщик в Selectel. Моя миссия в компании — сделать интерфейс платформы my.selectel удобным и интуитивно понятным для пользователя. А если говорить про локальные задачи, я исследую пользовательский опыт, проектирую интерфейсы, тестирую их и анализирую метрики.

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

Осталось только придумать, какие иконки нужны, и заказать их у дизайнеров. Но жизнь не всегда проста и предсказуема: команда была загружена, а фронтенд находился в минуте от верстки страницы. Ждать было нельзя — сроки поджимали. На фоне горящих дедлайнов я взяла дело в свои руки. И все оказалось не так сложно, как я себе представляла! В этой статье дам новичкам пошаговую схему и расскажу, как создать пиктограмму с нуля и вписать ее в сетку.

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

Я буду делать только одну иконку, но она должна быть «родственницей» тех, что уже используются в интерфейсе. По сетке можно понять, каких форм нужно придерживаться и какое будет охранное поле у пиктограммы. В нашем случае — это 1-2 пикселя (px) в зависимости от формы. Один px равен одному квадрату.

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

Ориентируюсь на сетку и смотрю, какие размеры будут у нашего Тирекса. Все понятно! Рисую иконку, сверяюсь с формой, подгоняю отступы — и готово. Дел на 5 минут.

Мой основной рабочий инструмент — Figma, поэтому рисовать пиктограмму Тирекса я буду в ней. Результат, который у меня получился, ниже. Как мне кажется, лучший вариант — квадратный с закруглением углов: он больше всех похож на другие наши иконки. Беру его в работу.

Наш Тирекс вписывается в квадрат, поэтому нужно сделать охранное поле или отступ по 2px с каждой стороны. Действуем по сетке.

Не оставим Тирекса одного. Создаем стаю динозавров, чтобы иконку можно было использовать для текста разного размера. Снова смотрю на сетку и масштабирую динозавров под пять размеров: 14px, 16px, 20px, 24px, 32px. Соблюдаю различия в толщине линий, как указано на второй картинке.

Размеры соблюдены, толщина линий тоже, но отдавать в прод еще рано. Нужно поработать над линиями и проверить, все ли хорошо.

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

Перевод фигуры в этот формат — обязательный этап работы. Если его пропустить, велика вероятность, что при экспорте иконки в формате svg случится поломка. Такая, которая случилась с нашим Тирексом.

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

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

Осталось объединить тело с глазом и готово! Для этого используем функцию Flatten. Теперь у нас получилась единая фигура.

Мы в финале! Проверяем названия фреймов, собираем Тирексов в компоненты, отдаем архитектору дизайн-системы и ставим задачи на фронтенд, чтобы они добавили новые иконки в дизайн-систему.

Сборка иконок в компоненты нужна для удобства использования. Из множества компонентов формируется библиотека элементов — из них составляются интерфейсы. Этот процесс похож на сборку конструктора. Все детали есть, осталось только соединить наиболее подходящие под конкретную задачу.

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

Selectel — ведущий провайдер IT-инфраструктуры для цифровых проектов любой сложности: от небольших pet-проектов до enterprise-систем. Развивайте свои решения вместе с нами!