Вайрфрейм: что это такое и как нарисовать схему страницы до дизайна

Зачем рисовать серую схему, если можно сразу делать красиво?

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

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

Бывает, что схема выручает проект, застрявший на согласовании. Руководитель маркетинга финтех-стартапа ASA Financial Becky Swafford написала подробное ТЗ на редизайн, но агентство вернуло сайт, который, по её словам, был просто чужими сайтами. Тогда она нарисовала в Balsamiq вайрфреймы главной, страницы о компании и страницы функций. По рассказу Balsamiq, на это ушло несколько минут, а итог она оценила в два месяца и не менее 5000 долларов экономии.

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

Чем вайрфрейм отличается от прототипа и мокапа?

Три слова постоянно путают, хотя речь о трёх документах. В разборе Surf вайрфрейм описан как статичная схема структуры страницы, прототип как интерактивная модель, имитирующая реальное взаимодействие, а мокап как статичное изображение финального дизайна.

Порядок обычно такой: схема, потом кликабельная модель, потом оформление. Так работала команда Basecamp, когда делала новую функцию. В главе об этом её авторы советуют начинать с набросков на бумаге, потому что они быстрые, грязные и дешёвые, и затем собирать из них HTML-экран без единой строки программного кода. Код пишут последним, когда макет уже посмотрели и поправили.

Тот же подход сложился у дизайнеров британского портала GOV.UK. В рассказе GDS объясняется, зачем они делают прототипы в HTML: такой прототип выглядит как настоящий портал, его легко отправить ссылкой, а участники исследований меньше отвлекаются на оформление. Бумажный эскиз служит там первым шагом, до кода.

На практике границы стираются: в современных редакторах достаточно соединить экраны стрелками, и схема становится кликабельной. Поэтому спорить о терминах не стоит. Если нужно согласовать порядок блоков, хватит серой схемы. Если проверяют, найдёт ли человек кнопку, нужен кликабельный прототип, а в UX/UI-проектировании используют оба.

Из чего состоит схема и сколько деталей ей нужно

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

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

Детализация бывает низкой, средней и высокой. В Nexfield Academy эти уровни называют low, middle и high fidelity и советуют начинать с самого простого, чтобы быстро согласовать концепцию с клиентом или командой. Набросок прямоугольниками подходит для первой встречи, схема с точными полями и реальными заголовками нужна перед макетом.

Почему черновой уровень выгоден, объясняют исследователи Nielsen Norman Group: переделывать код дорого, а выбросить бумажный прототип почти ничего не стоит. Есть и психологический эффект. Дизайнеру легче поменять набросок, чем вылизанный макет, в который вложено много сил, а заказчик видит, что перед ним не готовая страница.

Сколько времени всё это занимает, оценки расходятся. В журнале KursHub называют от 2 до 4 часов на вайрфреймы простого лендинга и обещают, что согласование структуры до визуального дизайна экономит до 40% времени проекта. Цифры ориентировочные, но порядок ясен: схему рисуют быстрее, чем верстают.

Рисуем вайрфрейм по шагам

1. Выпишите задачу страницы и путь человека: откуда он пришёл, что должен сделать, куда попасть дальше.
2. Определите, сколько экранов нужно. Для этого пригодится User Flow.
3. Набросайте схему от руки на бумаге или доске, без выравнивания по пикселям.
4. Перенесите схему в сервис: серые блоки, но реальные заголовки.
5. Нарисуйте мобильную версию рядом с десктопной.
6. Покажите схему трём-пяти людям и соберите замечания.
7. Зафиксируйте решения и передайте схему дизайнеру.

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

С бумаги начинают и профессионалы. Дизайнер интерфейсов Naumen Ирина Бушуева в материале Практикума формулирует это одной фразой.

Начинать рисовать вайрфрейм удобнее от руки.

Ирина Бушуева, дизайнер интерфейсов Naumen, в материале Яндекс Практикума

Она же советует золотую середину в текстах: не заполнять всё рыбным текстом и не прописывать весь контент, иначе при тестировании люди запутаются. Реальные заголовки ставьте сразу, а абзацы показывайте серыми полосами примерно нужной длины.

Так действовал и продакт-оунер единой платформы для сайтов британских министерств Neil Williams. По его записи в блоге GDS, он нарисовал вайрфреймы до готового кода, чтобы вытащить идею из головы и получить отзывы пользователей и заинтересованных сторон как можно раньше, и обсудил их с экспертами внутри и вне правительства. Через три спринта продукт уже отличался от рисунков, но бета должна была реализовать около 80% замысла. Схема служила точкой отсчёта, а не приговором.

Что дают вайрфреймы бизнесу: три истории с цифрами

Другой пример показывает схему как мост между исследованием и интерфейсом. После перестройки продукта у сервиса SparkToro рост остановился, а отток вырос. Основатели провели интервью и обнаружили, что клиенты используют данные для презентаций внутри компаний, и им нужны наглядные графики, а не CSV-выгрузки. Новые экраны сначала рисовали вайрфреймами и показывали пользователям. По материалу Balsamiq о SparkToro, отток сократился вдвое, а число регистраций выросло на 15-20%. Сами авторы оговаривают, что повлияли и интервью, и сильная команда.

Третья компания, платформа интерактивного контента Opinion Stage, сделала вайрфреймы обязательным первым шагом. Глава компании Assaf Parag признаётся в кейсе, что каждый раз, когда схему пропускали, об этом жалели. После переработки виджета с тестами заполнение форм выросло на 30%. Это тоже рассказ вендора инструмента, поэтому цифру стоит считать ориентиром.

Российский пример приводит агентство German Web в кейсе про сайт FENIX. Среди этапов проектирования там названо прототипирование ключевых страниц, а результат агентство описывает так: конверсия в заявки выросла с 1,8% до 5,6%. Это самоотчёт исполнителя, а скорость загрузки при этом упала с 4,2 до 1,3 секунды, так что приписывать рост одному вайрфрейму нельзя. Зато виден порядок: анализ аудитории и конкурентов, затем прототипы, затем дизайн.

Инструменты для вайрфреймов в рунете

В рунете чаще всего называют Figma, Miro, Wireframe.cc, Balsamiq и MockFlow, а ещё есть открытый Penpot. Выбирать стоит по тому, кто будет рисовать и сколько человек участвует:

• Figma: в сообществе есть готовые шаблоны вайрфреймов, но без навыка быстро набросать схему не получится. Подходит, если дизайнер потом сделает макет в ней же;
• Miro: онлайн-доска, где удобно обсуждать схему на созвоне, а шаблоны доступны людям без навыков дизайна;
• Wireframe.cc: минималистичный редактор, где набросать схему за несколько минут получится даже тому, кто далёк от дизайна;
• Balsamiq: облачный сервис с библиотекой компонентов, который намеренно делает схему похожей на черновик, чтобы заказчик не спорил о пикселях;
• Penpot: открытая платформа, которую можно установить на собственный сервер.

Для командной работы удобнее онлайн-доска или редактор, где все видят правки сразу, а для личного наброска хватит бумаги. Для согласования удобно держать одну актуальную версию с комментариями прямо на схеме. Часть зарубежных сервисов работает в России с ограничениями по оплате и доступу, поэтому перед стартом проверьте, что вся команда сможет войти и сохранить файлы. Если риск не устраивает, берите Penpot или начните с листа бумаги.

Нейросети тоже вошли в процесс. Стартап из материала xcom сгенерировал вайрфрейм в Figma AI и уже через два дня увидел, что логика навигации непонятна. Структуру исправили до разработки, и авторы оценивают экономию в 400 часов и 150 тысяч рублей. Компанию снова не называют, поэтому цифры стоит читать как ориентир. Черновик от нейросети нужно проверять так же строго, как нарисованный вручную.

Ошибки, которые портят схему

Цена пропуска схемы бывает вполне конкретной. Интернет-магазин из подборки xcom три месяца делал макеты и ни разу не проверил структуру на схеме. Магазин запустили, и покупатели не нашли кнопку «Купить»: на переработку ушло 120 тысяч рублей. Компанию в материале не называют, поэтому цифру лучше читать как иллюстрацию, но механика знакома каждому, кто запускал каталог.

Первая ошибка: слишком много деталей. По наблюдению Surf, вайрфрейм, который выглядит почти как готовый дизайн, уводит обсуждение от логики к оттенкам. Схема должна выглядеть незаконченной, иначе её не захотят править.

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

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

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

Когда вайрфрейм не нужен и при чём тут продвижение?

Вайрфреймы не нужны, если продукт простой или его структура уже проработана. Типовую страницу-визитку по готовому шаблону проще собрать сразу. Для лендинга с нестандартной логикой, каталога или личного кабинета схема нужна обязательно, потому что ошибка структуры там обходится дороже всего.

Для продвижения вайрфрейм работает как карта страницы. Пока дизайна нет, на схеме удобно продумать заголовок H1, порядок блоков и место формы. Эти решения потом влияют на основы SEO-продвижения, и менять их на схеме проще, чем на готовой странице.

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

Частые вопросы