Якщо ви раптом забули або не знали, що таке low-fidelity та high-fidelity прототипи)

Якщо ви раптом забули або не знали, що таке 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 тут
100 Днів з Claude тут
100 Днів з Claude тут