Как сделать прототип за 3 часа - гайд по быстрому вайрфреймингу

В 2019 году команда финтех-стартапа из Казани потеряла контракт на 12 миллионов рублей. Причина — заказчик не понял, как работает продукт, пока не увидел кликабельный макет. Три месяца разработки и 2000 человеко-часов ушли в корзину. Прототип, собранный за один вечер, спас бы сделку. Этот кейс объясняет, почему умение быстро вайрфреймить — не побочный навык дизайнера, а страховка от дорогих ошибок.

Почему 3 часа — реалистичный срок для прототипа

Вайрфрейм — это не дизайн-макет с тенями, шрифтами и цветами. Это схема интерфейса, которая показывает структуру экрана и логику переходов. В Figma на создание 5–7 экранов с базовыми элементами уходит 40–60 минут. Ещё час требуется на связывание экранов в кликабельный прототип. Оставшийся час — на проверку сценариев и исправление грубых ошибок. Итого: 3 часа при условии, что вы знаете, что именно проектируете, и не отвлекаетесь на подбор иконок.

Главный враг быстрого вайрфрейминга — перфекционизм. Новички тратят 20 минут на выравнивание кнопки по сетке, хотя на этапе прототипа это не имеет значения. Заказчику или команде важнее увидеть, что происходит после нажатия «Оплатить», а не идеальный радиус скругления углов. Поэтому правило первое: работайте в оттенках серого, используйте стандартные блоки и не редактируйте мелочи до тех пор, пока не соберёте весь пользовательский путь.

Практика показывает: если вы не уложились в 3 часа, проблема не в сложности задачи, а в отсутствии подготовки. Перед открытием редактора нужно зафиксировать цель экрана, список элементов и последовательность действий пользователя. Без этого плана вы будете переделывать экраны по три раза, и срок растянется до двух дней. Как сделать прототип за 3 часа: гайд по быстрому вайрфреймингу начинается не с инструмента, а с листа бумаги и трёх вопросов: кто пользователь, какая задача, какой результат.

Подготовка: 30 минут, которые экономят 3 часа

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

Второй шаг — набросайте каркас на бумаге. Обычный лист А4 и ручка работают быстрее любого цифрового инструмента. Нарисуйте прямоугольники для блоков, стрелки для переходов. Задача — не красота, а проверка логики: все ли элементы на месте, нет ли тупиковых экранов, понятен ли путь назад. На этот этап достаточно 10–15 минут. Если на бумаге схема не складывается, в Figma она тем более не сложится.

Третий шаг — соберите референсы. Откройте 2–3 приложения из той же ниши и посмотрите, как они решают похожие задачи. Не копируйте, а фиксируйте паттерны: где расположена кнопка подтверждения, как выглядит состояние ошибки, что происходит после завершения операции. Это снимает 80% вопросов на этапе отрисовки. Референсы нужны не для вдохновения, а для того, чтобы не изобретать велосипед там, где индустрия уже нашла рабочее решение.

Сборка прототипа в Figma: пошаговый процесс

Создайте фреймы под каждый экран сценария. Для мобильного приложения используйте размер 375×812, для десктопа — 1440×900. Не тратьте время на поиск идеального размера: стандартные пресеты Figma покрывают 95% задач. На каждом фрейме разместите только те элементы, которые участвуют в сценарии. Если на экране подтверждения не нужен поиск по контактам — не добавляйте его. Лишние элементы создают визуальный шум и отвлекают от проверки логики.

Работайте серыми прямоугольниками. Кнопка — прямоугольник 160×48 с текстом по центру. Поле ввода — прямоугольник 100% ширины с плейсхолдером. Картинка — прямоугольник с крестиком. Иконка — маленький квадрат. Не подбирайте цвета, не загружайте шрифты, не рисуйте логотипы. Всё это — работа следующего этапа. Задача вайрфрейма — проверить структуру, а не произвести впечатление на стейкхолдеров.

Свяжите экраны через режим Prototype. Выделите кнопку, нажмите на плюс у элемента, протяните стрелку к целевому фрейму. Настройте триггер: On tap для обычных нажатий, After delay для автоматических переходов. Добавьте переходы для всех интерактивных элементов: кнопок, ссылок, пунктов меню. Проверьте, что с каждого экрана есть путь назад — пользователь не должен застревать в тупике. На связывание 5–7 экранов уходит 20–30 минут.

Последний шаг сборки — добавьте состояния. Пустое поле, заполненное поле, ошибка валидации, загрузка, успех. Для каждого экрана сделайте 2–3 варианта. Это удваивает количество фреймов, но именно состояния показывают, как интерфейс ведёт себя в реальных условиях. Заказчик, который видит только идеальный путь, не задаёт вопросов о крайних случаях. А именно крайние случаи ломают продукт на проде.

Проверка и передача: финальные 30 минут

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

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

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

Трёхчасовой прототип — это не финальный дизайн и не техническое задание. Это инструмент коммуникации, который экономит недели разработки. Команда из Казани, потерявшая контракт, после внедрения быстрого вайрфрейминга сократила цикл согласования с заказчиком с трёх недель до двух дней. Не потому что стали рисовать быстрее, а потому что перестали обсуждать словами то, что можно показать за один вечер.