Wireframe (каркас)
Wireframe — схематичный каркас экрана без цвета и графики, показывающий расположение блоков, текста и кнопок. Помогает согласовать структуру и приоритеты контента до отрисовки дизайна и написания кода.
Определение wireframe
Wireframe (вайрфрейм, каркас) — это схема страницы, на которой серыми блоками и линиями показано, где будут шапка, меню, заголовок, текст, кнопки и картинки. Графики, цветов и финальных шрифтов нет намеренно: задача wireframe — договориться о структуре и приоритетах, а не о красоте. Это скелет интерфейса, который рисуют до дизайна. Сам термин (буквально «проволочный каркас») пришёл из промышленного проектирования, где так называли чертёж объекта без поверхностей.
Смысл намеренной серости — убрать визуальный шум. Когда заказчик видит цветной макет, он обсуждает оттенок кнопки и шрифт логотипа. Когда видит серый wireframe — думает о том, в правильном ли порядке идут блоки и не теряется ли кнопка заявки. Wireframe фокусирует разговор на логике и иерархии контента, а это решается раньше и дешевле, чем визуал.
Как работает wireframe
Wireframe создают на старте проектирования: после сбора требований, но до дизайна. Из набора wireframe отдельных экранов собирается прототип. Это базовый этап разработки сайта, а в связке с фирменным стилем wireframe задаёт сетку, на которую затем ложатся брендовые цвета и шрифты. На каркасе согласуют, какие блоки нужны и в каком порядке они расположены по важности.
| Что показывает wireframe | Что НЕ показывает |
|---|---|
| Расположение блоков на экране | Цвета и фирменный стиль |
| Иерархию контента по важности | Финальные шрифты и кегль |
| Размеры и пропорции зон | Фотографии и иллюстрации |
| Расположение кнопок и форм | Анимацию и микровзаимодействия |
Контент в wireframe чаще заглушка: вместо текста — серые полосы или текст-рыба, вместо фото — перечёркнутый прямоугольник. Но реальные заголовки и подписи кнопок лучше вписывать настоящие — так раньше видны проблемы с длиной и формулировками.
Виды и детализация wireframe
Каркасы различают по детализации, как и прототипы, — от наброска до подробной схемы.
| Тип | Чем характерен | Когда нужен |
|---|---|---|
| Низкодетальный | Грубые блоки, заглушки, от руки или в Miro | Старт, быстрый перебор вариантов структуры |
| Среднедетальный | Аккуратные блоки в Figma, реальные тексты | Согласование структуры с заказчиком |
| Высокодетальный | Точные отступы, иконки, состояния элементов | Передача в дизайн и разработку |
На практике начинают с низкодетального, чтобы быстро сравнить несколько компоновок, а затем доводят выбранный вариант до среднего уровня для согласования. Высокодетальный wireframe фактически граничит с дизайн-макетом, только без цвета.
Инструменты и пример
Основной инструмент — Figma, реже Balsamiq (специально стилизован под наброски от руки, чтобы никто не принял каркас за дизайн) и Miro для совместного эскизирования. Wireframe строят на сетке, чтобы заложить будущую адаптивность.
Мини-кейс: для главной страницы услуг компания изначально вынесла наверх большой имиджевый баннер, а блок с перечнем услуг и кнопкой заявки спрятала ниже сгиба. На wireframe это сразу стало видно: приоритетный контент уходил под прокрутку. Каркас перекомпоновали — услуги и кнопка поднялись в первый экран, баннер ужали. Переделка серых блоков заняла полчаса. После запуска переработанной страницы доля посетителей, доходящих до блока услуг, выросла с 41% до 86%, потому что он оказался сразу на виду, а не за прокруткой.
Связанные концепции
- Прототип — собирается из wireframe отдельных экранов, добавляя кликабельные связи между ними.
- UX — wireframe основной артефакт UX-проектирования: на нём решают вопросы структуры и удобства.
- UI — после согласования каркаса дизайнер накладывает на него визуальный слой: цвета, шрифты, графику.
- Техническое задание — wireframe часто прикладывают к ТЗ как наглядную схему структуры страниц.
- Адаптивный дизайн — каркас рисуют на сетке и часто в нескольких размерах, закладывая адаптивность с самого начала.
Частые ошибки
- Цвет и графика в wireframe — раскрашенный каркас уводит обсуждение в визуал и ломает саму идею серой схемы.
- Только десктоп — рисуют каркас широкого экрана и забывают мобильный, где компоновка принципиально другая.
- Текст-рыба вместо реальных заголовков — настоящие тексты вскрывают проблемы длины и смысла, заглушки их прячут.
- Перескок через wireframe сразу в дизайн — структурные ошибки всплывают уже на дорогой стадии отрисовки.
- Игнорирование иерархии — все блоки одного веса, непонятно, что главное на экране, и взгляд пользователя теряется.
Частые вопросы
Чем wireframe отличается от прототипа?
Wireframe — это статичный каркас одного экрана: серые блоки, показывающие расположение элементов. Прототип — это связка нескольких экранов с кликабельными переходами, по которой можно пройти сценарий целиком. Грубо: wireframe отвечает на вопрос «что где на этой странице», прототип — «как пользователь движется между страницами». Из набора wireframe собирают прототип, добавляя связи между экранами.
Зачем wireframe серый и без графики?
Это сделано намеренно. Как только в макете появляются цвета и картинки, заказчик и команда начинают обсуждать оттенки и шрифты, а не логику. Серая схема убирает визуальный шум и заставляет думать о главном на этом этапе: правильный ли порядок блоков, видна ли кнопка заявки, не уходит ли важный контент под прокрутку. Дизайн накладывают позже, когда структура уже согласована.
В какой программе делают wireframe?
Чаще всего в Figma — она удобна для каркасов, прототипов и финального дизайна в одном файле. Есть специализированный Balsamiq, намеренно стилизованный под наброски от руки, чтобы каркас не приняли за готовый дизайн. Для быстрого совместного эскизирования на старте используют Miro или даже бумагу. Низкодетальные wireframe часто быстрее набросать от руки, а затем перенести выбранный вариант в Figma.
Нужен ли wireframe для простого лендинга?
Да, хотя бы беглый. Даже для лендинга важно заранее решить порядок блоков и что попадёт в первый экран. Каркас лендинга рисуется за час-два, но избавляет от типовой ошибки, когда оффер и кнопка уходят под прокрутку, а наверху висит декоративный баннер. Для одностраничника достаточно низкодетального wireframe, для многостраничного сайта каркасы делают по ключевым типам страниц.
Нужно ли рисовать wireframe для мобильной версии отдельно?
Да. На смартфоне многоколоночная раскладка превращается в одну колонку, меню сворачивается в бургер, приоритеты блоков меняются. Если рисовать только десктоп, мобильная компоновка получается стихийной. Современный подход — mobile-first: сначала каркас узкого экрана, затем его расширяют до десктопа. Как минимум стоит сделать wireframe для двух разрешений — телефона и десктопа.
Кто рисует wireframe — дизайнер или аналитик?
Зависит от команды. В небольших проектах wireframe рисует UX-дизайнер, который затем доводит его до дизайна. В крупных продуктах каркасы делает UX-проектировщик или системный аналитик на основе требований, а визуальный дизайнер подключается позже. Главное — wireframe должен опираться на собранные требования и сценарии пользователей, а не рисоваться вслепую по наитию.