Wireframe
Синонимы: вайрфрейм, каркас сайта, structural wireframe, схема страницы, blueprint
NAME
Wireframe — дизайн и ux
DESCRIPTION
Wireframe (вайрфрейм, каркас) — упрощённая чёрно-белая схема страницы, показывающая расположение элементов без дизайна, цветов и изображений. Это «архитектурный чертёж» сайта: видно, где будет заголовок, где кнопка, где текст, но не видно, какого они цвета. Задача wireframe — продумать структуру и иерархию информации.
Wireframe vs Мок-ап vs Прототип:
| Параметр | Wireframe | Мок-ап | Прототип |
|---|---|---|---|
| Детализация | Низкая (блоки, линии) | Высокая (цвета, шрифты) | Высокая + интерактив |
| Цель | Структура и логика | Визуальный вид | Поведение и сценарии |
| Время создания | 1-2 часа на экран | 4-8 часов на экран | 2-5 дней на сценарий |
| Стоимость правок | Копейки | Средне | Дорого |
| Когда использовать | Начало проекта | После утверждения структуры | Перед разработкой |
Элементы wireframe:
- Прямоугольники — блоки контента, изображения, видео
- Линии — разделители, текст-заполнитель (lorem ipsum)
- Крестики в квадрате — плейсхолдеры изображений
- Кнопки — прямоугольники с текстом внутри
- Стрелки — направления переходов (в прототипе)
Правила хорошего wireframe:
- Только оттенки серого — никаких цветов (отвлекают)
- Один шрифт — без красивых гарнитур (фокус на структуре)
- Реалистичный объём текста — не 3 слова, а реальный абзац
- Сетка — выравнивание по колонкам (12-колоночная сетка)
- Мобильная + десктоп версия — сразу оба варианта
Процесс создания (30 минут на экран):
- Определить цель страницы (что должен сделать пользователь?)
- Составить список необходимых блоков
- Расставить по приоритету (сверху — самое важное)
- Добавить CTA (призыв к действию)
- Проверить на соответствие CJM
Инструменты:
- Figma — FigJam или обычные фреймы с graybox-библиотекой
- Balsamiq — имитация набросков от руки
- Whimsical — быстрые схемы и flow
- Бумага + карандаш — самый быстрый способ (Low-fi)
- Excalidraw — бесплатная доска для схем
Кейс WEBVISUAL: Клиент — B2B-производитель промышленного оборудования. Задача: редизайн каталога из 2 400 товаров. Было: сложная структура, 7 уровней вложенности, пользователи не находили нужное. Создали wireframe для 5 ключевых экранов (каталог, категория, карточка товара, сравнение, запрос КП). Утвердили с клиентом за 2 дня.
- Убрали 3 уровня вложенности
- Добавили фильтры с превью количества товаров
- Сделали sticky-панель сравнения
Только после утверждения wireframe перешли к дизайну. Результат: время поиска товара сократилось с 4.2 мин до 1.1 мин. Конверсия в запрос КП выросла с 0.8% до 3.4%. Бюджет wireframing: 45 000 ₽ (3 дня работы UX-дизайнера).