Вайрфрейм: схема страницы до дизайна и чем она отличается от макета

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

Что такое вайрфрейм простыми словами

Вайрфрейм (от английского wireframe — каркас) — это чертёж страницы. На нём видно, какие блоки есть на странице, в каком порядке они идут и сколько места занимают. Nielsen Norman Group называет вайрфреймы распространённым способом показать идеи раскладки страницы.

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

Вайрфрейм рисуют на бумаге, на доске или в редакторах вроде Figma. Инструмент не важен: схема на листе бумаги решает ту же задачу, что и аккуратный файл, если на ней видна структура.

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

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

Три слова часто путают, хотя это разные стадии работы. Различаются они по тому, что показывают и что можно обсуждать.

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

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

Какие бывают вайрфреймы по детализации?

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

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

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

Факт. Nielsen Norman Group определяет детализацию прототипа как степень его сходства с итоговой системой.

Зачем рисовать схему страницы до дизайна

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

Вторая причина — честная обратная связь. NN/g отмечает, что по черновой схеме заинтересованные лица понимают: работа не закончена, и правки ожидаемы. Отполированный макет, наоборот, провоцирует «давайте запускать», хотя структуру никто не проверял.

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

Мнение. Если сайт больше пары страниц или у страницы есть целевое действие — заявка, покупка, запись, — не пропускайте вайрфрейм. Час на схему экономит дни на переделке макета и вёрстки.

Что показать на вайрфрейме страницы?

Вайрфрейм отвечает на вопрос «что и в каком порядке», поэтому на нём должны быть все смысловые блоки страницы.

• Шапка и навигация — логотип, меню, контакты, кнопка главного действия.
• Первый экран — заголовок, подзаголовок, главное предложение и целевое действие.
• Смысловые блоки — услуги, преимущества, цены, примеры работ, отзывы, ответы на вопросы.
• Целевое действие — где стоит форма или кнопка и сколько раз она повторяется.
• Иерархия — что крупнее и важнее, что вторично.
• Подвал — контакты, реквизиты, ссылки на документы.
• Мобильная версия — порядок блоков на узком экране.

Для страниц с большим объёмом текста на схему лучше ставить реальный контент вместо заглушек «lorem ipsum». Заголовок «Ремонт под ключ за фиксированную цену» и полоса-заглушка дают разное понимание того, поместится ли смысл в блок.

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

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

Как проверить вайрфрейм на людях

Проверка схемы — быстрый тест: дайте вайрфрейм человеку, который не знает проект, и попросите выполнить задачу. «Где здесь узнать цену?», «Как оставить заявку?», «Чем занимается компания?». Если человек отвечает без подсказок, структура работает.

Черновая схема для такого теста подходит лучше макета. NN/g отмечает, что черновой прототип меньше давит на участников: человек понимает, что проверяют дизайн, а не его, и охотнее говорит о проблемах. По отполированному макету люди чаще хвалят картинку и молчат о структуре.

Схему можно проверить и без кликабельного прототипа. Распечатайте экраны и меняйте листы, когда человек «нажимает» на элемент, — это старый, но рабочий метод бумажного прототипирования. Если важно проверить переходы между экранами, соберите в Figma простой прототип из тех же вайрфреймов.

Какие ещё методы показывают проблемы интерфейса, разобрано в статье юзабилити-аудит сайта: пошаговая методология.

Когда вайрфрейма мало или он не нужен

Вайрфрейм лучше всего работает для сайтов из отдельных, в основном статичных страниц. Если страница меняется на лету — фильтры каталога, личный кабинет, многошаговая форма, — одной схемы мало. NN/g предлагает для таких случаев вайрфлоу: сочетание вайрфреймов и блок-схемы, где стрелки показывают, что происходит после каждого действия.

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

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

Что делать дальше

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

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

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

Источники

• Wireflows: A UX Deliverable for Workflows and Apps — Nielsen Norman Group
• UX Prototypes: Low Fidelity vs. High Fidelity — Nielsen Norman Group
• Paper Prototyping: Getting User Data Before You Code — Nielsen Norman Group