Дизайн-система для малого бізнесу: як перестати щоразу винаходити сайт заново
Сценарій знайомий майже кожній компанії, яка розвиває сайт довше за рік. Потрібна нова посадкова сторінка. Дизайнер малює її з нуля, бо старі макети «не зовсім підходять». Верстальник збирає нові стилі, бо в наявних не вистачає потрібного варіанта кнопки. Через півроку на сайті чотири різні кнопки, три відтінки синього і п’ять способів оформити заголовок.
Дизайн-система – це спосіб зупинити цей цикл. І всупереч поширеній думці, вона потрібна не тільки великим компаніям із командою з двадцяти дизайнерів.
Що це насправді таке
Дизайн-система для малого бізнесу – це не бібліотека на п’ятсот компонентів і не документ на сто сторінок. Це набір домовленостей про те, з чого збираються сторінки, зафіксований у двох місцях одночасно: у макетах і в коді.
Ключове слово – «одночасно». Бібліотека в Figma, якій не відповідає жоден рядок CSS, працює рівно до першої верстки. Реальна економія починається тоді, коли компонент існує в обох середовищах і змінюється в обох.
Мінімальний набір
| Рівень | Що входить | Що ламається без нього |
|---|---|---|
| Токени | Кольори, розміри шрифтів, відступи, радіуси | Три відтінки одного кольору на сайті |
| Типографіка | Стилі h1-h4, основний текст, підписи | Кожна сторінка виглядає по-своєму |
| Базові елементи | Кнопки, поля, посилання, іконки | Дублювання коду при кожній правці |
| Блоки | Картка, форма, банер, список переваг | Нова сторінка = новий дизайн із нуля |
| Правила | Сітка, брейкпоїнти, поведінка на мобільному | Верстка розповзається на нестандартних екранах |
Для компанії з сайтом на двадцять-тридцять сторінок цього достатньо. Усе інше нарощується за потреби, а не «про запас».
Токени: найдешевший крок із найбільшим ефектом
Токен – це змінна замість конкретного значення. Замість #3362FF у тридцяти місцях коду використовується --color-primary, оголошений один раз.
Практична вигода видна одразу: зміна фірмового кольору перестає бути проєктом на тиждень і стає правкою одного рядка. Те саме з відступами: набір із шести значень замість довільних чисел прибирає ситуацію, коли між блоками то 40 пікселів, то 43.
Розумний мінімум: вісім кольорів, шість розмірів шрифту, шість відступів, три радіуси. Більше на старті не потрібно, менше вже незручно.
Які компоненти окупаються першими
Порядок за співвідношенням користі до витрат:
- Кнопка. Найчастіший елемент і найчастіше джерело різнобою. Три варіанти: основна, другорядна, текстова. Плюс стани наведення й натискання.
- Поле форми. Разом зі станами помилки й підказки. Форми є скрізь і скрізь виглядають по-різному.
- Картка. Універсальний контейнер: під послугу, кейс, статтю. Один компонент закриває три завдання.
- Заголовок секції. Ця пара з заголовка й підзаголовка повторюється на кожній сторінці.
- Форма зворотного зв’язку. Складається з уже готових полів і кнопки, тому робиться швидко.
Як це рахується в грошах
Оцінка проста. Візьміть, скільки годин зараз займає створення нової посадкової сторінки. Зазвичай це від двадцяти до сорока годин: дизайн, верстка, підключення.
З дизайн-системою та сама сторінка збирається з готових блоків за шість-десять годин. Різниця множиться на кількість сторінок, які ви робите за рік. Для компанії, яка запускає одну сторінку на місяць, система окупається приблизно за три-чотири запуски.
Друга частина економії менш очевидна, але більша: зникають правки, викликані різнобоєм. Ніхто не витрачає час на питання «а чому тут кнопка інша».
Помилки, через які системи вмирають
- Роблять занадто докладно на старті. Півроку на опис усіх можливих станів, і жодної сторінки, зібраної за цей час.
- Система живе тільки в макетах. Дизайнер оновив компонент, у коді нічого не змінилося. Через три місяці розбіжність настільки велика, що системою перестають користуватися.
- Немає власника. Якщо ніхто не відповідає за те, щоб нові елементи потрапляли в систему, вона застигає на першій версії.
- Заборона на винятки. Іноді сторінці справді потрібен нестандартний блок. Правильна реакція – додати його в систему, а не забороняти.
- Копіювання чужої системи. Готові набори від великих компаній розраховані на їхні завдання і несуть чужу візуальну мову.
З чого почати за тиждень
Не з нового проєкту. З інвентаризації того, що вже є:
- День 1. Зберіть скріншоти всіх кнопок, полів і карток, які є на сайті. Зазвичай виявляється в два-три рази більше варіантів, ніж очікували.
- День 2. Виберіть по одному правильному варіанту з кожної групи. Решту позначте до заміни.
- День 3. Зафіксуйте токени: кольори, шрифти, відступи. Винесіть у змінні в коді.
- День 4-5. Приведіть до єдиного вигляду кнопки й поля по всьому сайту.
Далі система нарощується природним шляхом: кожен новий блок, який робиться вдруге, стає компонентом.
Дизайн-система не про красу і не про моду. Вона про те, щоб через рік сайт залишався цілісним, а нова сторінка коштувала дешевше за попередню, а не дорожче.
