Дизайн-систему предлагают всем, а нужна она не всем. Разбираем, чем она отличается от набора элементов и когда действительно экономит деньги.
Коротко
- UI-кит — набор элементов.
- Дизайн-система — ещё и правила.
- Экономия появляется на объёме.
- Для одной страницы избыточно.
Чем они различаются
UI-кит
- Набор готовых элементов
- Кнопки, поля, карточки
- Состояния элементов
- Цвета и шрифты
Дизайн-система
- То же плюс правила
- Когда какой элемент применять
- Как собирать новые блоки
- Принципы и примеры
- Поддерживается со временем
Разница в том, отвечает ли набор на вопрос «а как сделать то, чего здесь нет». UI-кит даёт детали, дизайн-система — ещё и способ собирать из них новое без дизайнера каждый раз. Второе дороже и нужно не всем.
Что это экономит
| Экономия | Где проявляется |
|---|---|
| Новые страницы собираются быстрее | Из готовых блоков |
| Меньше согласований | Решение уже принято |
| Единый вид | Страницы не разъезжаются |
| Проще менять исполнителя | Правила записаны |
| Меньше ошибок в вёрстке | Элементы повторяются |
| Быстрее лендинги под акции | Не с нуля |
Вторая строка даёт самую заметную экономию времени. Когда решено, как выглядит кнопка и поле, обсуждать это на каждой новой странице не нужно: согласование сводится к содержимому, а не к оформлению.
Когда её заводить
| Ситуация | Что достаточно |
|---|---|
| Одна страница или лендинг | Ничего не нужно |
| Небольшой сайт услуг | Короткий UI-кит |
| Регулярно новые страницы | UI-кит с правилами |
| Несколько сайтов или проектов | Дизайн-система |
| Своя команда дизайна и вёрстки | Дизайн-система |
Экономия появляется на объёме, и это ключевое условие. Дизайн-система для сайта из пяти страниц — расход без отдачи: правила писать дольше, чем нарисовать эти пять страниц. Решать стоит по тому, сколько нового вы делаете в год.
Минимальный набор для небольшой компании
Цвета с ролями
Фон, текст, акцент, состояния.
Шрифты и размеры
Заголовки и текст.
Кнопки во всех состояниях
Обычная, наведение, неактивная.
Поля формы и ошибки
Как выглядит неверный ввод.
Карточка товара или услуги
Основной повторяющийся блок.
Отступы
Несколько значений, не произвольные.
Этот набор помещается на одну-две страницы и закрывает большую часть повседневных вопросов. Важнее полноты то, что он записан и доступен: набор в голове дизайнера не работает, когда дизайнер занят или сменился. Про цвета — в статье про цветовую схему сайта.
Как не дать ей устареть
| Практика | Зачем |
|---|---|
| Один ответственный | Иначе никто не обновляет |
| Новое сначала в систему | Потом на страницу |
| Удалять неиспользуемое | Набор не должен расти вечно |
| Хранить в одном месте | Доступно всем причастным |
| Ревизия раз в полгода | Сверить с реальным сайтом |
Последняя строка отличает работающую систему от документа, который врёт. Дизайн-система, расходящаяся с сайтом, хуже её отсутствия: по ней делают новое, и оно не совпадает с существующим. Сверять нужно регулярно, а не однажды при сдаче.
Чего опасаться
| Ловушка | Чем заканчивается |
|---|---|
| Система вместо сайта | Месяцы на правила, страниц нет |
| Слишком много вариантов элемента | Выбирать дольше, чем рисовать |
| Правила без примеров | Никто не применяет |
| Система в чужом аккаунте | Исчезает с подрядчиком |
| Копирование чужой системы | Правила не про ваш сайт |
Четвёртая строка — тот же риск, что с макетами и лицензиями. Файлы дизайн-системы должны лежать там, куда у вас есть доступ независимо от исполнителя; иначе при расставании вы теряете не только макеты, но и правила, по которым всё сделано.
Частые вопросы
Чем UI-кит отличается от дизайн-системы?
UI-кит — это набор готовых элементов. Дизайн-система — ещё и правила: когда какой элемент применять и как собирать новые блоки без дизайнера каждый раз.
Когда её заводить?
Когда регулярно появляются новые страницы или проектов несколько. Для сайта из пяти страниц это расход без отдачи: правила писать дольше, чем нарисовать эти страницы.
Какой минимум нужен небольшой компании?
Цвета с ролями, шрифты и размеры, кнопки во всех состояниях, поля формы с ошибками, основная карточка и несколько значений отступов — одна-две страницы.
Почему систему нужно сверять с сайтом?
Потому что расходящаяся с сайтом система хуже её отсутствия: по ней делают новое, и оно не совпадает с существующим.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
