До нас прийшла команда мобільного застосунку з типовою проблемою: у продукті було чотири різні кнопки «зберегти», шість відтінків синього й жодного опису, коли яку використовувати. Нові екрани робили довго, а старі виглядали по-різному. За шість тижнів ми зібрали систему, якою команда користується досі.
Тиждень 1: інвентаризація
Ми зняли скріншоти всіх екранів і розклали елементи за типами: кнопки, поля, картки, заголовки. Вийшло 11 варіантів кнопок і 9 розмірів тексту. Це було переконливіше за будь-які слова про «потрібну систему».
Тиждень 2: основа
- Колірна палітра: основний, нейтральні, стани (успіх, попередження, помилка).
- Типографіка: п’ять розмірів із чіткою ієрархією.
- Відступи: сітка кратна чотирьом пікселям.
Тижні 3–4: компоненти
Спочатку найчастіші: кнопки, поля вводу, перемикачі, картки. Кожен компонент отримав стани (звичайний, наведений, натиснутий, вимкнений, помилка) та опис «коли застосовувати, а коли ні».
Тиждень 5: перенесення живого екрана
Обрали один реальний екран і зібрали його заново з компонентів. Це виявило прогалини: не вистачало рядка зі списком і порожнього стану. Їх додали одразу.
Тиждень 6: передача команді
Провели два воркшопи для дизайнерів і розробників, залишили одну сторінку правил: «Ось як додати новий компонент» і хто відповідає за зміни.
Результат
- Час на макет нового екрана скоротився приблизно вдвічі.
- Кількість варіантів кнопок — з 11 до 3.
- Розробники більше не питають «який тут має бути відступ».
Головний урок: дизайн-система — це не бібліотека в Figma, а домовленість команди та людина, яка її підтримує.
Коментарі
Поки без коментарів.