Вайрфрейм сайта: что это, какие бывают и как сделать в Figma

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

Ниже разберём не абстрактный «wireframing», а практическую работу с сайтом: какие бывают вайрфреймы, чем они отличаются от макета и прототипа и как собрать рабочий каркас в Figma. Общий обзор редактора не повторяем — он уже есть в материале «Что такое Figma и зачем она нужна дизайнерам».

Короткий ответ

Вайрфрейм, или каркас сайта, — это упрощённая схема страницы без полноценного визуального дизайна. Она показывает структуру, информационную иерархию, расположение контента, навигацию и основные действия. В Figma вайрфрейм удобно собирать из фреймов, простых фигур и текста, а затем проверять на desktop и mobile до перехода к UI-дизайну.

Что такое вайрфрейм сайта

Вайрфрейм (wireframe) — это схематичный каркас страницы или экрана. Он показывает не «как сайт будет выглядеть», а как он будет устроен: где находится навигация, какой контент идёт первым, где пользователь увидит CTA, как связаны блоки и какие элементы повторяются.

В русскоязычной практике используют слова «вайрфрейм», «каркас сайта», «каркас страницы». В поиске встречается и вариант «варфрейм», но в профессиональной речи чаще используют транслитерацию wireframe → вайрфрейм.

Figma определяет wireframe как базовый blueprint, который помогает команде согласовать требования и обсуждать UX на уровне структуры, а не декоративных деталей. См. What is Wireframing? — Figma.

Каркас сайта и sitemap — не одно и то же

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

Зачем нужен вайрфрейм

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

• Согласовать структуру. Команда обсуждает порядок и назначение блоков, не отвлекаясь на «нравится ли зелёная кнопка».
• Проверить информационную иерархию. Видно, что пользователь встретит первым, какие аргументы идут дальше и где находится главное действие.
• Связать контент и UX. Каркас помогает понять, хватает ли данных для страницы и не пытается ли один экран решить слишком много задач.
• Продумать пользовательский путь. Для сервиса или магазина можно проверить переходы, возвраты, фильтры, формы и состояния до визуальной полировки.
• Раньше заметить проблемы адаптива. Desktop-структура может быть логичной, но на мобильной ширине порядок и приоритеты часто приходится менять.
• Обсудить реализацию. Разработчику проще заранее заметить спорные блоки, сложные состояния или недостающие сценарии.

NN/g отмечает, что wireframes могут визуализировать пользовательский путь, структуру страницы, информационную иерархию и взаимодействия, а их детализация зависит от цели. Подробнее: How to Draw a Wireframe — Nielsen Norman Group.

Когда можно упростить этап

Для небольшого одноэкранного промо, давно устоявшегося шаблона или точечной правки отдельный подробный wireframe иногда не нужен. Но даже в таком проекте полезно быстро проверить композицию в low-fi виде, если меняются смысловая структура, навигация или пользовательский сценарий.

Какие бывают вайрфреймы: low-fi, mid-fi и high-fi

У wireframe нет единственного «правильного» уровня детализации. Чем раньше стадия и выше неопределённость, тем грубее может быть каркас. По мере согласования структуры можно добавлять реальные тексты, точнее задавать размеры и показывать состояния.

NN/g описывает fidelity шире — через реалистичность визуала, контента и интерактивности. Поэтому «high-fi wireframe» не обязательно превращать в красивый макет: детализация может вырасти, а визуальный стиль всё ещё оставаться нейтральным. См. UX Prototypes: Low Fidelity vs. High Fidelity.

Что должно быть на вайрфрейме сайта

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

Для лендинга сначала определите смысловую последовательность, а уже затем рисуйте блоки. Базовые сценарии и примеры порядка секций разобраны отдельно в статье «Структура продающего лендинга» — здесь не будем дублировать этот интент.

Вайрфрейм, схема сайта, мокап и прототип: в чём разница

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

Если нужно проверить кликабельный сценарий, после каркаса переходите к прототипированию. Переходы, overlays, Smart Animate и состояния подробно разобраны в гайде по интерактивному прототипу в Figma.

Что подготовить до того, как открывать Figma

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

1. Цель страницы. Что пользователь должен понять и какое действие совершить?
2. Контекст пользователя. Откуда он приходит, что уже знает и какой вопрос пытается решить?
3. Содержание. Какие тексты, цифры, доказательства, карточки и данные реально есть, а какие ещё нужно получить?
4. User flow. Что происходит до страницы и куда человек должен попасть после ключевого действия?
5. Ограничения. Платформа, обязательные блоки, CMS, форма, платежи, личный кабинет, юридические требования.
6. Ключевые ширины. Какие desktop и mobile состояния нужно проверить уже на уровне каркаса.

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

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

Шаг 1. Создайте фрейм нужной ширины

Создайте top-level Frame под desktop. Figma описывает frame как контейнер для слоёв, который поддерживает layout guides, auto layout, constraints и прототипирование. Официальная справка: Frames in Figma Design.

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

Шаг 2. Добавьте Layout Guides

Колонки помогают держать общий ритм: выравнивать текст, карточки, изображения и формы. В Figma эта функция сейчас называется Layout Guides; прежнее название Layout Grid было изменено в мае 2025 года. В официальной справке доступны три типа направляющих: uniform grid, columns и rows. См. Create layout guides — Figma.

Для вайрфрейма сайта чаще полезны колонки: они не диктуют дизайн, а дают опорную геометрию, чтобы секции не «плавали» относительно друг друга.

Шаг 3. Разложите страницу на смысловые секции

Начните с крупных контейнеров: header, hero, основной контент, социальное доказательство, CTA, footer. На этом этапе не надо рисовать каждую иконку. Вопрос проще: какой смысл должен появиться здесь и почему именно сейчас?

Шаг 4. Добавьте базовые элементы

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

Для rough wireframe Auto Layout не обязателен. Но когда карточки повторяются, текст меняется, а mobile-версия требует перестройки, он начинает экономить время. Настройки Gap, Padding, Hug, Fill и вложенность уже разобраны в отдельном гайде по Auto Layout в Figma.

Шаг 5. Подставьте реалистичный объём контента

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

Шаг 6. Соберите mobile-версию, а не уменьшенную копию

Перенесите ключевые блоки в отдельный мобильный фрейм и заново проверьте порядок. На узком экране вторичная навигация может скрыться, карточки перейти в колонку, таблица — в другой формат, а CTA — подняться выше. Сохраняйте смысловую логику, а не геометрию desktop.

Шаг 7. Свяжите только нужные экраны

Если для проверки достаточно понять порядок блоков, wireframe может оставаться статичным. Если важно проверить навигацию, форму, меню или checkout, добавьте минимальный prototype flow. Не превращайте первый каркас в симуляцию всего продукта.

Практический пример: wireframe лендинга онлайн-курса

Представим страницу курса. Целевое действие — оставить заявку или перейти к оплате. Вместо того чтобы сразу собирать визуальный hero, сначала зададим смысловую последовательность:

1. Header: логотип, направления, вход, CTA.
2. Hero: профессия/результат, кому подходит, формат, ближайший CTA.
3. Доказательство: работы студентов или измеримый результат.
4. Программа: что человек изучит и какие проекты соберёт.
5. Формат обучения: уроки, практика, обратная связь, доступ.
6. Преподаватели и кейсы: кто учит и что уже получилось у студентов.
7. Цена и условия: стоимость, рассрочка, что входит.
8. FAQ: снять оставшиеся риски.
9. Финальный CTA и footer.

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

Как проверить вайрфрейм перед переходом к UI

Быстрый тест

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

В каких программах делать вайрфреймы

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

Частые ошибки при создании wireframe

• Слишком много деталей. Если правка структуры стала психологически дорогой, wireframe уже чрезмерно отполирован.
• Одинаковый вес всех блоков. Каркас превращается в бесконечную ленту прямоугольников без иерархии.
• Текст-рыба неправильного объёма. Финальный контент ломает карточки, таблицы и первый экран.
• Нет пользовательского сценария. Страница выглядит цельно, но непонятно, что происходит после кнопки, фильтра, ошибки или возврата назад.
• Mobile оставлен «на потом». На UI-этапе выясняется, что порядок блоков и навигацию надо проектировать заново.
• Wireframe используют как дизайн-презентацию. Каркас нужен прежде всего для проверки решений, а не для вау-эффекта на защите.

Нужны ли вайрфреймы в 2026 году, если есть AI и готовые UI-киты

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

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

Поэтому в простом проекте wireframe может занять один быстрый проход, а в сложном сервисе — несколько итераций с user flow, состояниями и тестированием. Критерий один: переходить к UI стоит тогда, когда изменение структуры уже не является главным источником неопределённости.

FAQ

Авторитетные источники и полезные материалы

• Figma — What is Wireframing?
• Figma Help — Frames in Figma Design
• Figma Help — Create layout guides
• Figma Help — Guide to auto layout
• Nielsen Norman Group — How to Draw a Wireframe
• Nielsen Norman Group — UX Prototypes: Low Fidelity vs. High Fidelity