Создание дизайн-системы. Как мы сэкономили 2 300 000 рублей Яндексу

Хороший сервис — это не только выполненные в срок задачи и быстрая коммуникация. В статье я, СЕО дизайн-студии ЦЕХ Артем Мальгин, расскажу, как партнерские отношения помогли нам сохранить деньги клиента и увеличить его лояльность.

Мы сотрудничаем с Яндекс HR в формате дизайн-поддержки. Одна из задач — делать wiki-страницы. Так называется внутренняя база с гайдлайнами, правилами, общей информацией о событиях и мероприятиях компании. Например, как Jira или Confluence у других компаний. Для этой задачи нужны программисты, в студии их не было. Однако одна из наших ценностей — это партнерство, поэтому нам важно было закрывать все потребности заказчика. Поэтому HR-команда быстро нашла фронтенд-разработчиков в штат.

Когда все нужные специалисты были найдены, выяснилось, что в гайде множество пробелов и несостыковок. Из-за этого сотрудники интерпретировали инструкции по-разному, и на страницах не было единства. Например, отличался кегль в заголовках и даже шрифты. Помимо отсутствия общих правил для дизайнеров, не было инструкций и для разработчиков. Они могли спокойно загрузить картинку в png вместо svg-формата.

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

Наш дизайнер Максим оптимизировал процесс, создав дизайн-систему, которая состоит из UI-кита и CSS-библиотеки. Теперь выполнение задачи стало занимать в 3 раза меньше времени. Именно таким образом мы и сэкономили Яндексу 2 300 000 рублей.

Для начала Макс проанализировал имеющийся гайд и исправил неточности. Например, заметил, что в некоторых частях гайда правила разнятся: в гайде размер заголовка равен 36 пикселей, а на реальных страницах — от 28 до 42. Тогда он провел мини-исследование, определил самый популярный и часто используемый на практике кегль и создал соответствующий компонент. В итоге получилась система стилей (шрифтов, цветов, сетки, отступов), из которой собрали готовые компоненты. Теперь макет можно собирать, как конструктор.

Самым сложным разделом в дизайн-системе оказались «Цвета». Менеджеры Яндекс HR попросили нас адаптировать страницы под темную тему. По дефолту на wiki-страницах инвертировался только черный цвет. Тогда Макс выбрал универсальные оттенки из палитры, которые хорошо смотрятся на обеих темах: синий, желтый, красный. Их не хватало, поэтому у остальных повысил прозрачность и добавил обводку для контраста.

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

У каждого компонента есть набор данных о нем. Например, отступ, шрифт, цвет. Это называется стилем. Чтобы не вводить каждый раз эти значения, Макс объединил неизменные стили в классы. Например, теперь не нужно писать в код всю информацию о заголовке, можно просто выбрать класс «Заголовок».

После он собрал все классы в одну таблицу стилей — страницу, на которой собраны и прописаны все классы. Любой может найти нужную информацию, нажав Ctrl+F.

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

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

Зато есть несколько red flags, на которые точно стоит обратить внимание. Проанализировал кейсы ЦЕХа, истории партнеров и составил тест. Пройдите его, чтобы проверить вашего дизайн-подрядчика на подозрительность.