40%

до

сократилась разработка дизайна, после внедрения дизайн-системы.

Rokodil — российский бренд потребительских товаров в мире ремонтно-строительных, слесарных и автомобильных инструментов.

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

Мы поняли: нужно остановиться, разобраться и сделать систему, которая всё исправит. Так появилась дизайн-система.

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

Команда:
Арт-директор: Коля Г.
Дизайн-система: Александр П.
Дизайнеры: Илья С., Анна М., Александра К. и Илья М.
Ретушь: Анастасия Н.
Продакт-менеджер Rokodil: Илья С.
Брендинг: Fabula

Дизайн-система

Rokodil

Первым делом сделали логотип вариативным, добавили охранное поле.

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

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

Чтобы никто не терял времени, добавили функцию замены шрифта с сохранением настроек.

Упорядочили цвета.

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

Раньше создание одной иконки занимало до 16 часов. Теперь — от 15 минут до 3 часов.

Иконки перерисовали в едином стиле.

Часто используемые элементы — фактоиды с текстом разного размера, иконками, фоном или без. Мы сделали их удобными.

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

Подготовили гайд для ретуши: цвет, стиль, нанесение.

Упаковки разделили на направления и собрали рекомендации по размещению элементов.

Для построения сеток создали модулор в гугл таблице на основе числа Фибоначчи. Он стал ядром всей системы: автоматически считает марджинсы, гаттеры и кегли шрифта по двум параметрам макета: высота и ширина.

Часто используемые сетки добавлены в стили библиотеки.

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

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

Ранее инструкции верстались 3−5 дней, теперь это занимает 3−8 часов.

Подготовили шаблоны форматов от А8 до А5 в инДизайне со всеми стилями. Дизайнер выбирает размер, загружает контент — всё остальное уже настроено.

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

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

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