Якщо ви раптом забули або не знали, що таке **_low-fidelity_** та **_high-fidelity прототипи)_**

**Fidelity** («точність») показує, наскільки макет схожий на готовий продукт. Це різні інструменти для різних етапів. 

Зазвичай виділяють** три рівні:**
🍓 **Low-fi**
Сірі блоки, прямокутники, реальні тексти
_Що на екрані і як іде флоу?_
2️⃣**Mid-fi** (за потреби)
Чітка сітка, справжні компоненти, але без бренду
_Чи зручно цим користуватися?_
3️⃣ **Hi-fi**
Кольори, шрифти, іконки, стани, анімації
_Як це виглядає і відчувається?_

**🪫**** Low-fi (вайрфрейм)**

**_Що є:_** структура екрана: де заголовок, список, фільтри, кнопка; ієрархія: що головне, а що другорядне; флоу: з якого екрана куди переходимо; реальні тексти (обов'язково, а не lorem ipsum).
**_Чого навмисно немає:_** кольорів, шрифтів бренду, фото, іконок, тіней, анімацій.
_**Навіщо так «бідно»:** _коли немає візуалу, люди говорять про суть. На low-fi ніхто не скаже «мені не подобається відтінок», зате скажуть «а навіщо тут фільтр за поверхом, якщо всі кімнати на одному».
**_Коли використовувати:_**
discovery і перші гіпотези; узгодження скоупу MVP з командою; швидкий тест флоу на 3–5 користувачах; пошук прогалин: «а що, якщо кімнат немає?».
_**Вартість помилки:** _майже нульова. Переробити екран займає хвилини, тож можна зробити 3 варіанти і вибрати.

🖖**Mid-fi (проміжний рівень)**
Про нього часто забувають, але PM-у він дуже корисний.

**_Що є:_** реальні компоненти (інпути, дропдауни, таби), точніші розміри й відступи, базова сітка. Кольори нейтральні, максимум один акцент для головної дії.
**_Коли використовувати:_** юзабіліті-тести, де важливо, чи люди _розуміють_, куди натиснути; обговорення з розробкою: що з компонентів у нас уже є, а що нове; уточнення складних станів: помилки, валідація, довгі списки.

Я його не використовую, чесно кажучи))

⚡️**Hi-fi (макет)**

**_Що є:_** кольори, типографіка, іконки з дизайн-системи; усі стани: hover, disabled, loading, error, empty; адаптив: десктоп і мобілка; іноді інтерактивний прототип з переходами.
_**Коли використовувати:** _демо стейкхолдерам і клієнту; передача в розробку (handoff); маркетинг: скріни для лендінгу, презентації, постів; фінальний юзабіліті-тест перед релізом.
_**Вартість помилки:** _висока. Hi-fi виглядає «готовим», тому зміна флоу на цьому етапі означає переробку багатьох деталей. А стейкхолдери, побачивши hi-fi, часто вважають, що «вже майже все зроблено».

🍄**Типові пастки для PMів**

_**Одразу в hi-fi.** _Команда тиждень полірує екран (ну або Клод мучиться кілька годин)), а на рев'ю з'ясовується, що флоу неправильний.
_**Low-fi клієнту без пояснень.** _Клієнт вирішить, що це «так і буде виглядати», і засмутиться. Завжди підписуйте: _«Wireframe: обговорюємо структуру, не візуал»_.
_**Hi-fi як доказ, що фіча потрібна.** _Гарний макет не валідує гіпотезу. Він її тільки красиво упаковує.
_**Одна точність для всіх.** _Розробнику потрібні стани й відступи, CEO потрібна загальна картина, користувачу на тесті потрібен зрозумілий флоу.

Якщо шо, я не роблю проєкт по переговоркам, це з уроку по **100 Днів з Claude**) бо частина по Claude design теж є🥳

[100 Днів з Claude тут](/leaving?url=aHR0cHM6Ly93b3ctcG0taHViLmNvbS9jbGF1ZGUtMTAw)
[100 Днів з Claude тут](/leaving?url=aHR0cHM6Ly93b3ctcG0taHViLmNvbS9jbGF1ZGUtMTAw)
[100 Днів з Claude тут](/leaving?url=aHR0cHM6Ly93b3ctcG0taHViLmNvbS9jbGF1ZGUtMTAw)