Через пів року після запуску більшість сайтів спіткає одна доля: нові сторінки робили поспіхом, кожна наступна трохи «не така», і бренд поступово розповзається. Дизайн-система — це щеплення від цього сценарію.
Що таке дизайн-система насправді
Це не файл у Figma і не бібліотека іконок. Це набір правил і готових компонентів, з яких збирається будь-яка сторінка сайту: типографіка, кольори, відступи, кнопки, картки, форми, секції. Плюс — головне — логіка, коли і що використовувати.
Симптоми її відсутності
- На сайті п’ять відтінків фірмового кольору і три стилі кнопок.
- Кожна нова посадкова сторінка — окремий проєкт із нуля.
- Редактор боїться чіпати сторінки, бо «щось поїде».
- Дизайнер і розробник щоразу заново домовляються про відступи.
Як система економить гроші
Перша сторінка з дизайн-системою коштує стільки ж, скільки без неї. Економія починається з другої: нові сторінки збираються з готових секцій за години, а не тижні. Для бізнесу, який регулярно запускає кампанії, система окуповується за два-три місяці.
Дизайн-система перетворює сайт із набору сторінок на конструктор, яким команда користується без розробників.
Мінімальний склад системи
- Токени: кольори, шрифтова шкала, відступи, радіуси — одним джерелом правди.
- Компоненти: кнопки, поля, картки, навігація — з усіма станами.
- Секції: готові патерни сторінок — hero, переваги, відгуки, CTA.
- Правила контенту: довжини заголовків, тон, формати зображень.
Дизайн-система у WordPress
Найкраща реалізація — коли компоненти системи стають секціями в адмінці: редактор збирає сторінку з перевірених блоків, а дизайн лишається цілісним незалежно від того, хто і коли її створив. Саме так ми будуємо сайти в ITYA — і саме тому вони виглядають однаково добре і в день запуску, і через два роки.