Создание 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 для согласования.