Как сделать вайрфрейм: пошаговая инструкция

Коротко о главном

Вайрфрейм — это серый каркас экрана: какие блоки есть, в каком порядке и какого они размера относительно друг друга. Цвета и шрифты здесь не важны. Процесс состоит из пяти шагов: цель → инвентаризация контента → low-fidelity макет → аннотации → ревью. Если пропустить первые два, вайрфрейм превращается в красивую, но бесполезную картинку.

Шаг 1. Сформулируйте цель страницы

Напишите одно предложение: кто приходит на страницу и что он должен сделать дальше. Для главной страницы студии: «Владелец бизнеса понимает, что мы делаем, и оставляет заявку».

Затем составьте список ключевых действий по приоритету:

• главное: отправить заявку;
• второстепенное: посмотреть кейсы, открыть страницу услуги;
• третьестепенное: почитать блог, сменить язык.

Этот список потом определит, каким блокам отдать больше места.

Шаг 2. Соберите инвентаризацию контента

Выпишите всё, что должно быть на странице, и по возможности используйте реальные тексты, а не lorem ipsum. Настоящий заголовок сразу показывает, сколько строк займёт блок.

Если какого-то контента пока нет, отметьте это как пробел, а не придумывайте его.

Шаг 3. Нарисуйте low-fidelity макет

Начните с бумаги или доски: это быстро, и никто не привязывается к результату. Нарисуйте два-три разных варианта, а лучший перенесите в инструмент.

Правила низкой детализации:

• только оттенки серого и один нейтральный шрифт;
• прямоугольник с крестом вместо картинки, линии вместо текста;
• реальные заголовки и подписи кнопок;
• простая сетка: 12 колонок для десктопа, 4 для мобильного;
• мобильная версия с самого начала.

Пример главной страницы сверху вниз:

1. Шапка: логотип, навигация, переключатель языка, кнопка «Связаться».
2. Первый экран: крупный заголовок, одно поясняющее предложение, основная кнопка.
3. Услуги: сетка из 4–6 карточек с названием и одной строкой описания.
4. Кейсы: 2–3 крупные карточки с названием проекта и задачей.
5. Процесс: 4 шага в ряд, на мобильном — вертикальный список.
6. Форма заявки: имя, контакт, краткое описание задачи.
7. Футер.

Шаг 4. Добавьте аннотации

Без пояснений дизайнеру и разработчику придётся угадывать. Добавьте короткие заметки рядом с блоками:

• поведение: «карточки листаются горизонтально на мобильном», «шапка прилипает после скролла»;
• данные: «кейсы приходят из CMS, показываем последние 3»;
• состояния: пустое, загрузка, ошибка, успех для формы;
• ограничения: «заголовок не длиннее 60 символов».

Нумеруйте аннотации и выносите их за пределы макета, чтобы он оставался читаемым.

Шаг 5. Проведите ревью

Покажите вайрфрейм тем, кто отвечает за цель и контент: заказчику, разработчику, менеджеру по продажам. Задавайте конкретные вопросы:

• Понятно ли главное действие за несколько секунд?
• Ничего ли не упущено из списка контента?
• Можно ли это сделать в рамках текущих технологий и бюджета?

Соберите замечания, обновите схему и только потом переходите к кликабельному прототипу или визуальному дизайну.

Инструменты

В Figma заранее подготовленный набор серых компонентов (кнопка, поле ввода, карточка, заглушка изображения) заметно ускоряет работу.

Частые ошибки

• Начинать с визуала. Цвета и фото уводят обсуждение от структуры.
• Lorem ipsum везде. Реальный текст меняет размеры блоков.
• Только десктоп. На мобильном порядок блоков часто другой.
• Нет аннотаций. Поведение решает тот, кто первым начал верстать.
• Слишком подробно слишком рано. Идеальный по пикселям вайрфрейм сложно менять.