Вайрфрейм отвечает на вопрос «что и где стоит на странице»: тут шапка, тут заголовок, ниже блок с ценой, справа кнопка. Никаких цветов, фотографий и красивых шрифтов — только серые прямоугольники и подписи. Так внимание не уходит на оформление, и команда спорит про структуру вместо оттенка кнопки.
Это самый ранний и дешёвый этап. Вайрфрейм идёт перед прототипом и дизайном: сначала договариваются про скелет, потом оживляют его в кликабельную модель, и только затем рисуют картинку. Менять каркас на этой стадии почти бесплатно, поэтому именно тут удобно перебирать варианты расстановки блоков.
Серые блоки и подписи без графики.
Что и где стоит на странице.
Раньше прототипа и дизайна.
На вайрфрейме лендинга заголовок, оффер и кнопку расставили серыми блоками за час — и только утвердив структуру, передали макет в UI-дизайн.
Различают low-fidelity и high-fidelity вайрфреймы. Low-fi — те самые серые блоки и реальный, но черновой текст: рисуют от руки или в Figma за полчаса, чтобы прогнать структуру с командой. High-fi уже несёт точные отступы, размеры шрифтов и состояния элементов, и фактически смыкается с прототипом. Частая ошибка — сразу лезть в high-fi: тратишь день на пиксели блока, который на обсуждении вообще выкинут.
Для SEO каркас закладывает то, что потом тяжело переделать: один H1 на странице, логичную иерархию H2-H3, место под текст у товара, видимые ссылки в зоне первого экрана. Если на вайрфрейме контент задвинут под три экрана баннеров, поисковик увидит пустую верхушку, а пользователь уйдёт — и это правят не на этапе UI-дизайна, а здесь, пока перестановка блоков стоит десять минут. Закладывайте структуру под намерение запроса сразу, иначе UX и ранжирование чинятся уже дорого.
Карточку товара в интернет-магазине сначала собрали low-fi: блок «фото — название — цена — в корзину» в первом экране, ниже характеристики и SEO-текст на 800 знаков под H2. На обсуждении заметили, что отзывы стояли под футером — подняли их выше, переставив один прямоугольник; в дизайн ушёл уже согласованный каркас вместо пяти итераций готовых макетов.
Каркас экономит деньги на переделках: перестановка блоков на схеме занимает минуты, та же правка в готовом макете или в вёрстке стоит часов работы. Поэтому на каркасе обсуждают порядок блоков, объём текста и приоритет действий, а обсуждение цветов и шрифтов откладывают до макета.
Полезный приём — заполнять каркас реальным текстом вместо условной рыбы. Настоящие заголовки и цены сразу показывают, влезает ли обещание в отведённое место и хватает ли аргументов до кнопки. Каркасы делают в любом редакторе схем, а для сложных сценариев собирают кликабельный прототип и проверяют его на нескольких людях.
Частые вопросы
Чем каркас отличается от прототипа и макета?
Каркас показывает расположение блоков без оформления. Прототип добавляет переходы между экранами и позволяет пройти сценарий. Макет задаёт окончательный вид: цвета, шрифты, изображения. Порядок работы обычно именно такой.
Нужен ли каркас для простого лендинга?
Даже для одной страницы он экономит время: порядок блоков и объём текста обсуждаются до того, как дизайнер начал работу. Для страницы из трёх экранов хватает схемы на листе бумаги.
Использовать настоящий текст или условный?
Настоящий. Условная рыба скрывает проблемы: длинный заголовок не влезает, аргументов до кнопки не хватает, названия пунктов меню не помещаются в строку. На реальном тексте это видно сразу.
Кто делает каркасы?
Чаще дизайнер интерфейсов вместе с тем, кто отвечает за содержание. Для небольших проектов их рисует маркетолог или владелец продукта, а дизайнер подключается на этапе макета.