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

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

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

Дисклеймер: мы будем рисовать пиктограмму Тирекса потому, что мне нравится Тирекс :) Эта иконка не пойдет в продакшн в Selectel, я создаю ее специально для материала в качестве наглядного примера.