Что такое дизайн-система и зачем она малым командам
Почему дизайн-система экономит малой команде больше времени, чем крупной, и с каких переиспользуемых элементов стоит начать.
Команда rabbitclipПубликация: 5 мин чтения
Коротко
Дизайн-система это единый источник, который собирает повторяющиеся элементы бренда, цвет, типографику, кнопки, формы, карточки, чтобы новая страница или функция строилась из этих готовых элементов, а не проектировалась заново с нуля. Для малой команды это означает больше никогда не задавать себе вопрос «а как эта кнопка должна была выглядеть».
Дизайн-система звучит как роскошь для крупных компаний, но верно скорее обратное: именно малая команда с ограниченными ресурсами меньше всего может позволить себе тратить время на исправление несогласованности.
Эта статья объясняет, что такое дизайн-система на самом деле и что конкретно она даёт малой команде. Какой бы скромной ни была её область охвата, польза работает в том же направлении.
Что такое дизайн-система на самом деле
Дизайн-система документирует визуальный язык бренда, цветовую палитру, типографику, правила отступов, вместе с переиспользуемыми компонентами, построенными на основе этого языка: кнопками, полями формы, карточками, уведомлениями, всё в одном месте.
Это может быть документ, библиотека кода или то и другое вместе. Важно, чтобы дизайнер или разработчик, строя новую страницу, брал уже готовый компонент, а не спрашивал каждый раз, какого цвета должна быть эта кнопка.
Если кнопка записи на приём в сети спа-салонов появляется на каждой странице в чуть другом оттенке зелёного, это конкретный признак отсутствия дизайн-системы.
Дизайнеру не нужно выстраивать эту систему в одиночку; договорившись заранее с разработчиком, как называть каждый компонент в коде, можно заметно снизить путаницу в дальнейшем.
Почему это особенно важно для малой команды
В крупной команде несогласованность это проблема недосмотра; в малой это проблема времени. Если команда из двух-трёх человек заново обсуждает цвет, отступы и размер шрифта на каждой новой странице, это время уходит не на настоящую работу, не на контент или новую функцию.
Когда на сайт производителя спецодежды добавляется новая категория товаров, существующая дизайн-система решает эту задачу за часы; без неё уходят дни. Разница в том, проектируется ли каждый элемент с чистого листа.
Экономия времени видна не только в дизайне, но и в разработке; при готовой библиотеке компонентов разработчик берёт существующий элемент, а не кодирует новую форму с нуля, что также снижает риск ошибок.
Что происходит без дизайн-системы
Со временем на сайте накапливаются десятки стилей кнопок, полей формы и размеров заголовков, которые уже не совсем сочетаются друг с другом. Для посетителя это превращается в запутанный опыт, а для команды в нагрузку, проверять при каждом изменении, так ли это выглядит на других страницах.
Частый пример, десятилетний сайт производителя, где страницы, добавленные в разные периоды, визуально совершенно не похожи друг на друга; каждая страница несёт вкус того, кто проектировал её в тот момент.
С чего начинает малая команда
Строить полноценную корпоративную дизайн-систему не требуется; достаточно начать с горстки базовых элементов: основной цветовой палитры, двух-трёх размеров шрифта, единых стилей для кнопок и полей формы.
Если эти базовые элементы живут в библиотеке кода, например в общем файле компонентов, новая страница собирается их вызовом; изменение цвета или размера делается в одном месте и отражается на всём сайте.
Практичная отправная точка, проверить три самые посещаемые страницы существующего сайта и составить список повторяющихся на них элементов; такой список даёт более быстрый старт, чем проектирование системы с нуля.
- Основная палитра и второстепенные цвета определяются в одном месте
- Фиксируются два-три размера шрифта (заголовок, основной текст, мелкий текст)
- Компоненты кнопки, поля формы и карточки становятся переиспользуемыми в коде
- Новая страница строится из этих компонентов, а не проектируется с нуля
Что даёт дизайн-система по мере роста бизнеса
По мере роста бизнеса добавление новой страницы филиала, новой категории товаров или новой страницы акции на сайте с дизайн-системой занимает дни; без неё, недели.
Кроме того, дизайн-система даёт новому дизайнеру или разработчику, присоединившемуся к команде, единую точку отсчёта; визуальный язык бренда изучается из одного источника, а не собирается по крупицам со страницы на страницу.
На ком лежит ответственность за поддержку дизайн-системы
Дизайн-система не остаётся актуальной сама по себе после того, как её построили; кто-то должен следить за изменениями цвета, компонентов или правил. В малой команде эта ответственность обычно ложится на дизайнера или самого опытного разработчика, отдельную роль под это создавать не нужно.
Если ответственность не закреплена явно, со временем несогласованность накапливается снова: кто-то добавляет новый стиль кнопки, никто не проверяет, соответствует ли он существующей системе, и система разрушается сама собой. Поэтому проверку существующей системы перед добавлением нового компонента стоит превратить в простую привычку.
Если маркетинговая команда производителя заказывает новую страницу акции у агентства, не знакомого с существующей дизайн-системой, эта страница визуально отрывается от остального сайта; это показывает, что дизайн-система требует не только построения, но и поддержки.
Эта ответственность звучит как тяжёлая нагрузка, но на практике она невелика; часа проверки в месяц достаточно для большинства малых команд.
Дизайн-система это не роскошь крупной компании, а способ, которым малая команда защищает собственное время. На вводном звонке с rabbitclip совместно находят точки несогласованности существующего сайта и проясняют, с чего должна начаться базовая дизайн-система. Даже небольшое начало всегда лучше, чем никакого. Мелкие несогласованности, накопившиеся со временем, в итоге обходятся дороже одной крупной ошибки.
Частые вопросы
Дизайн-система нужна только крупным компаниям?
Нет, наоборот, именно малая команда больше всего защищает своё время такой системой; область охвата может оставаться пропорционально небольшой. Она растёт вместе с бизнесом.
Сколько времени занимает построение дизайн-системы?
Базовую, цвет, типографику, несколько компонентов, можно построить за несколько дней; более полная зависит от размера проекта.
Можно ли добавить дизайн-систему к уже существующему сайту?
Да, существующие страницы проверяются на повторяющиеся элементы, которые затем превращаются в систему.
Дизайн-система это только визуальный вопрос?
Нет, она охватывает и переиспользование компонентов в коде; поэтому касается и дизайнера, и разработчика.
Должна ли дизайн-система жить в одном инструменте проектирования?
Нет, она должна существовать и в файле дизайна, и в коде; если они расходятся, система со временем теряет согласованность. Это может быть так просто, как открыть один общий файл компонентов в коде.
