Створення wireframe-прототипів екранів мобільного додатка
Wireframe — це екран без кольору та фінальної типографіки, але з точним розташуванням всіх елементів, розмірами зон, пріоритетністю контенту. Він відповідає на запитання «що тут є і як це розставлено» до того, як дизайнер потратив час на візуальну обробку. Переділати wireframe — година роботи. Переділати готовий макет — день плюс конфлікт з командою.
Що фіксує wireframe
На хорошому wireframe видно: ієрархію контенту (що головне, що другорядне), розміри інтерактивних зон (тач-таргети мінімум 44×44pt за iOS HIG, 48×48dp за Material Design), поведінку скроллюваних областей, місце для системних елементів — status bar, home indicator, navigation bar.
Часто упускаємий момент — стани. Wireframe потрібен не тільки для «нормального» стану екрана, але й для: пустого стану (немає даних), стану завантаження (skeleton або spinner), помилки (inline validation, toast, full-screen error), максимального наповнення (довге ім'я користувача, 99+ сповіщень).
Інструменти та рівень деталізації
Для wireframes використовуємо Figma — low-fidelity компоненти з бібліотек wireframe kit. Не пишемо реальний текст, використовуємо lorem ipsum тільки для довжини, не для смислу. Кольори — сіра шкала. Іконки — generic placeholder.
Рівень деталізації залежить від завдання: якщо wireframe йде одразу в розробку без проміжного дизайну — робимо mid-fidelity з реальними відступами та розмірами. Якщо це інструмент для узгодження концепції — достатньо low-fidelity.
Типові помилки
Головна помилка — wireframe, який ігнорує Safe Area на iOS (виріз камери, home indicator на iPhone без кнопки Home). Контент, який візуально нормально виглядає на фреймах 390×844, закінчується обрізаним на реальному пристрої. Фреймы в Figma ставимо з реальними device frame розмірами та включеним Safe Area overlay.
Строки
Wireframes для 10–15 екранів з основними станами — 2–3 робочих дні. Включає: файл Figma з фреймами, анотації до ключових елементів, PDF для узгодження.