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