Чому прототип має жити поруч із кодом
Макет добре показує напрям. Продукт починається там, де можна натиснути кнопку, побачити помилку, змінити дані й пройти сценарій на телефоні.
Ми не відмовляємося від Figma. Вона корисна для швидкого пошуку композиції, типографіки та кількох візуальних напрямів. Проблема виникає, коли статичний макет стає єдиним джерелом правди для системи, що має десятки станів.
Що губиться у статичному handoff
- Дані. Коротке ім'я й три рядки виглядають добре. Реальна адреса, порожній список або довга назва змінюють екран.
- Стани. Loading, error, empty, disabled і permission denied не є декоративними варіантами. Це частина продукту.
- Поведінка. Sticky-елементи, клавіатурна навігація, scroll і повернення назад треба відчути, а не домислити.
- Обмеження. API, ролі, швидкість мережі та мобільна клавіатура впливають на рішення ще до полірування.
Як ми збираємо інтерфейс
1. Фіксуємо один критичний сценарій
Не малюємо весь продукт одразу. Обираємо шлях, який доводить цінність: запис клієнта, побудову звіту, checkout або підпис транзакції.
2. Будуємо тонкий вертикальний зріз
У зрізі є реальна навігація, наближені до реальності дані, ключові стани та адаптивність. Він може бути технічно простим, але має відповідати на головне питання про продукт.
3. Виносимо повторювані правила
Кольори, типографіка, відступи, поля й кнопки стають системою тільки після того, як перший сценарій показав їх у роботі. Тоді правила можна поширювати без хаосу.
4. Даємо перевірний результат
Замість скриншота замовник отримує preview URL і короткий список рішень: що вже працює, що ще є припущенням і що потрібно погодити.
Де це видно у наших продуктах
Velura показує два пов'язані контури: публічний запис і робочу адмінку. Statera перевіряє щільну аналітику, періоди й таблиці. HEWN доводить послідовність від каталогу до checkout. Це не історії про вигаданих клієнтів, а інтерфейси, які можна відкрити.
Що отримує замовник
- менше рішень, які існують тільки на картинці;
- видимі обмеження до того, як вони стануть дорогими;
- одна мова для продукту, дизайну й розробки;
- результат, який можна показати користувачу й перевірити.
Макет формулює гіпотезу. Робочий сценарій показує, чи витримує вона реальність.