Вайрфрейм и прототип: от идеи к структуре

Вайрфрейм — это чертёж до отделки. Дешевле двадцать раз передвинуть прямоугольник на эскизе, чем один раз переверстать готовый экран.

«Прототип стоит тысячи совещаний».

Соблазн велик — сразу открыть Figma и рисовать красивое. Но красота скрывает проблемы структуры. Вайрфрейм — намеренно серый, без шрифтов и картинок — заставляет думать о главном: что за чем идёт, что важнее, как пользователь движется к цели.

Уровни детализации

  ВАЙРФРЕЙМ ЛЕНДИНГА (lo-fi)
  --------------------------
  +------------------------------------+
  | [лого]            меню      [CTA]   |
  +------------------------------------+
  |   Заголовок-обещание               |
  |   Подзаголовок в одну строку       |
  |   [ Главная кнопка ]               |
  +------------------------------------+
  | [icon]   [icon]   [icon]           |
  | выгода   выгода   выгода           |
  +------------------------------------+
  |   Отзывы / соцдоказательство       |
  +------------------------------------+
  |   Повтор CTA      [ Кнопка ]       |
  +------------------------------------+
  | футер: ссылки, контакты            |
  +------------------------------------+

Прототип отличается от макета интерактивностью: по нему можно кликать и проходить сценарий. Так находят тупики («а как отсюда вернуться?») до того, как написана хоть строка кода.

Разбор глубже: дешёвые ошибки против дорогих

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

Намеренная «уродливость» lo-fi — это фича, а не баг. Когда вайрфрейм серый и без шрифтов, и заказчик, и команда вынуждены обсуждать структуру: правильный ли порядок секций, понятен ли путь, не перегружен ли экран. Стоит показать красивый макет с финальными цветами — и обсуждение мгновенно скатывается в «давайте кнопку сделаем зеленее» и «шрифт другой бы». Эти разговоры важны, но не на этапе, когда ещё не решено, в каком порядке вообще идут блоки. Серость защищает структурное обсуждение от преждевременного спора об отделке.

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

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

Как делают ПЛОХО

Сразу рисуют hi-fi с финальными цветами и стоковыми фото. Заказчик обсуждает оттенок кнопки вместо структуры. Когда выясняется, что блоки не в том порядке — всё переделывают с нуля, потому что «жалко красивое».

Как делают ХОРОШО

Сначала серый lo-fi: проверяют порядок блоков и логику пути. Согласовали структуру — наводят красоту. Прототип прокликивают на реальном сценарии и ловят тупики заранее. Дёшево менять, пока это прямоугольники.

Чек-лист

• Структуру проверяют на lo-fi до отрисовки визуала.
• Вайрфрейм намеренно серый — обсуждаем структуру, не цвет.
• Есть кликабельный прототип ключевого сценария.
• Тупики и «как вернуться» найдены до кода.

Итог. Вайрфрейм и прототип ловят проблемы структуры на дешёвом этапе. Сначала «что и в каком порядке», потом — «как это выглядит».