Вайрфрейм

Отсутствие визуального оформления в вайрфрейме — не экономия, а инструмент. Серые прямоугольники и текст-рыба намеренно лишают обсуждение поводов уйти в «мне не нравится этот оттенок» и заставляют говорить о том, что решается на этом этапе: какие блоки нужны, в каком порядке пользователь их читает, что происходит по нажатию, что показывается, когда данных нет, а что — когда их слишком много. Ошибка структуры, найденная на вайрфрейме, стоит часа; та же ошибка, найденная на свёрстанном экране, стоит нескольких дней.

Различают уровни детализации. Низкодетальный вайрфрейм — набросок блоков, годится для обсуждения концепции. Среднедетальный содержит реальные подписи, реальные названия полей и правила валидации: именно он ложится в основу технического задания и оценки. Кликабельный прототип связывает экраны переходами и позволяет пройти сценарий целиком — на нём уже можно проводить юзабилити-тестирование и показывать заказчику не картинку, а поведение. Для коммерческого проекта обычно достаточно среднего уровня плюс кликабельность для двух-трёх ключевых сценариев.

Практический эффект для сметы недооценивают. Вайрфреймы превращают расплывчатое «нужен личный кабинет» в перечень экранов и состояний, а перечень экранов — это уже основание для оценки в часах. Ловушка — воспринимать вайрфрейм как формальность и пропускать его ради скорости: тогда все структурные споры переезжают на этап дизайна, где каждая итерация стоит в разы дороже, а часть из них — на этап разработки, где переделка задевает ещё и код.

Смежные термины

• Юзабилити-тестированиеЮзабилити-тестирование — проверка интерфейса на живых людях: представители целевой аудитории выполняют реальные задачи и проговаривают свои действия вслух, а команда фиксирует, где они останавливаются, ошибаются и не находят нужное.
• Дизайн-системаДизайн-система — связка токенов, компонентов и правил их применения, существующая одновременно в макетах и в коде: она задаёт цвета, типографику, отступы и состояния элементов так, чтобы новый экран собирался из готового, а не изобретался заново.
• DiscoveryDiscovery — предпроектное исследование на 1–3 недели, в котором формулируют задачу, изучают пользователей и конкурентов, описывают сценарии и ограничения, а на выходе получают прототип, техническое задание и оценку с обоснованной вилкой вместо цифры из воздуха.
• Техническое заданиеТехническое задание — документ, фиксирующий, что именно должно быть сделано и по каким признакам работа считается принятой: цели, роли, сценарии, требования по экранам, интеграции, нефункциональные требования и отдельный раздел о том, что в проект не входит.
• Адаптивный дизайнАдаптивный дизайн — подход, при котором одна вёрстка перестраивается под ширину экрана: сетка, типографика и порядок блоков меняются на заданных брейкпоинтах, вместо того чтобы открывать отдельную мобильную версию на поддомене.

Услуги по теме

• UX/UI дизайн сайтов и приложенийПроектируем интерфейсы, которые доходят до продакшена: от исследования и структуры до UI-кита и передачи в разработку. Всё живёт в Figma как компоненты с реальными состояниями и брейкпоинтами, а не как папка со статичными картинками. Один и тот же процесс работает для лендинга, корпоративного сайта, интернет-магазина, веб-приложения и мобильного продукта.
• Разработка сайтов под ключДелаем сайты, которые не разваливаются через полгода: от одностраничника на CMS до магазина и веб-приложения на React и Next.js. Один подрядчик на дизайн, код, интеграции и запуск.

Почитать подробнее

• UX-исследования без бюджета лаборатории: что реально даёт результатБольшинству команд не нужен отдел исследований — им нужно перестать угадывать. Разбираем методы по стоимости и отдаче, объясняем правило пяти пользователей и его важную оговорку, показываем, как превратить находки в решения без отчёта на 60 страниц.
• Техническое задание на сайт: структура, шаблон и разбор ошибокТЗ — это не бюрократия, а рычаг: всё, что не соответствует заданию, подрядчик исправляет бесплатно. Разбираем структуру по разделам, показываем заполненный пример для корпоративного сайта и объясняем, как писать критерии приёмки, которые можно проверить.