Создание wireframe-прототипов страниц сайта
Wireframe — это чёрно-белая структурная схема страницы без визуального дизайна: только блоки, их расположение, типографическая иерархия и основные интерактивные элементы. Термин «прототип» в контексте wireframe означает кликабельную связку таких схем, а не отдельный статичный макет.
Wireframe — это инструмент коммуникации и проверки логики, а не художественный артефакт. Его задача — зафиксировать решения по структуре до того, как дизайнер потратит время на цвет, шрифты и иллюстрации.
Уровни детализации
Принято различать три уровня:
Low-fidelity (lo-fi) — грубые наброски, прямоугольники с подписями, иногда от руки. Делаются за часы, меняются без сожаления. Подходят для первичного согласования структуры с заказчиком и командой.
Mid-fidelity — структурированные схемы в Figma или Balsamiq. Правильные пропорции блоков, реальные метки кнопок и заголовков, типографические уровни обозначены размером. Золотой стандарт для большинства проектов.
High-fidelity wireframe — детализированная схема с реальным контентом, точными размерами, иногда с условной цветовой схемой (оттенки серого). Размывает границу с UI-дизайном, поэтому используется реже — когда клиент не может «читать» lo-fi или для сложных интерфейсов типа дашбордов.
Что детально прорабатывается в wireframe
Wireframe закрывает решения, которые потом очень дорого менять в дизайне или коде:
Контентная иерархия — что идёт первым, что второстепенное, что спрятано за аккордеоном или табом. Пример: блок социальных доказательств — отзывы или логотипы клиентов — на первом экране или после описания услуги? Это решается в wireframe, а не в дизайне.
Компоновка форм — сколько полей, в какой последовательности, что в одну строку, что разбивается на шаги (wizard/stepper). Для длинных форм (регистрация, оформление заказа) wireframe показывает всю последовательность шагов.
Пустые состояния и крайние случаи — что показывается, если данных нет (новый пользователь, пустая корзина, нет результатов поиска). Это часто забывают и потом делают на ходу.
Адаптация — wireframe для desktop и wireframe для mobile могут сильно отличаться. Не «уменьшить и перенести», а пересобрать приоритеты контента.
Кликабельный wireframe-прототип
Когда wireframe-схемы связываются переходами, получается прототип — его можно кликать и проверять сценарии пользователя. В Figma это делается через Prototype-режим: соединяем кнопки со страницами, добавляем оверлеи для модальных окон, задаём анимации переходов (опционально).
На этом этапе удобно проводить быстрое пользовательское тестирование: дать 5–7 реальным пользователям конкретную задачу и посмотреть, справляются ли они без подсказок. Ошибки в навигации и непонятные метки обнаруживаются сразу — до того, как дизайнер потратил 40 часов на полноценный UI.
Пример: для маркетплейса фриланса обнаружили на wireframe-прототипе, что 4 из 6 тестировщиков не могли найти кнопку «Откликнуться на проект» — она была спрятана за вкладкой «Детали». Переместили на первый экран задания, до вкладок. В финальном дизайне эта точка уже не переделывалась.
Инструменты
- Figma — стандарт рынка, удобен для командной работы и передачи разработчикам
- Balsamiq — специализированный инструмент для lo-fi, имитирует «нарисованный» стиль
- Axure RP — для сложных интерактивных прототипов с условной логикой (показать/скрыть, переменные)
Сроки
Wireframe типовой корпоративной страницы (главная, услуги, контакты) — 2–4 рабочих дня. Полный wireframe-прототип сайта из 10–15 страниц — 7–14 рабочих дней. Сложные продуктовые интерфейсы (дашборды, кабинеты) — 3–5 недель.