Представьте, что вы строите дом. Прежде чем выбирать плитку и обои, нужно решить, сколько будет комнат, где окна и как человек пройдёт из прихожей на кухню. С сайтом всё так же. Если сразу рисовать красивый дизайн, не определив структуру страниц, можно потратить недели на оформление блоков, которые потом окажутся лишними или стоят не на тех местах.
Wireframe, или каркас, решает именно эту задачу. Это упрощённая схема страницы, где показаны блоки, их порядок, заголовки, кнопки и основное содержание. Никаких украшений: серые прямоугольники, подписи, условные значки. Зато на таком листе сразу видно, работает логика или нет.
В статье разберём, что именно входит в каркас, чем он отличается от прототипа и дизайн-макета, как его создают в студии и как заказчику читать и согласовывать такие схемы без специальной подготовки.
Что такое wireframe и что он показывает
Каркас — это чертёж интерфейса. Он отвечает на вопросы о структуре и приоритетах, но не о внешнем виде. Как правило, на нём отображается:
- какие блоки есть на странице и в каком порядке они идут;
- какой из блоков главный, а какие вспомогательные (через размер и расположение);
- где находятся меню, поиск, кнопки действия, формы;
- какой текст нужен в заголовках и на кнопках;
- какие данные выводятся в карточках, таблицах и списках;
- как страница ведёт себя на разных размерах экрана.
Чего на каркасе обычно нет: фирменных цветов, шрифтов, реальных фотографий, тонких эффектов и анимации. Это сознательное решение. Когда перед глазами нет красоты, обсуждение сосредоточено на сути: удобно ли, понятно ли, ничего ли не забыто.
Wireframe, прототип и макет: в чём разница
Эти слова часто используют как синонимы, но на практике это разные этапы работы с разной степенью проработки.
| Что | Что показывает | Внешний вид | Интерактив | Для чего нужен |
|---|---|---|---|---|
| Wireframe | Структуру и расположение блоков | Схематичный, серый | Нет или минимальный | Согласовать логику и состав страниц |
| Прототип | Поведение: переходы, состояния, сценарии | От схемы до почти готового | Кликабельный | Проверить путь пользователя и протестировать |
| Дизайн-макет | Финальный внешний вид | Цвета, шрифты, изображения | Обычно статичный | Утвердить визуальный образ и передать в разработку |
Каркас часто становится основой прототипа: схемы связывают переходами, и получается кликабельная модель. Подробнее о следующем шаге мы писали в статье про прототипирование сайта. А затем поверх утверждённой структуры накладывается визуальное оформление, о чём можно прочитать в материале про визуальную иерархию.
Зачем нужен каркас: четыре причины
1. Правки дешевле
Изменить расположение блока в схеме — вопрос минут. Изменить его в готовом дизайне — часы работы дизайнера. Изменить в уже сверстанной странице — работа дизайнера, верстальщика и тестировщика. Чем позже вы замечаете, что блок стоит не там, тем дороже обходится исправление. Каркас переносит самые дорогие обсуждения на самый дешёвый этап.
2. Все говорят об одном и том же
Словесное описание страницы каждый понимает по-своему. «Сверху большой красивый блок с преимуществами» у директора, маркетолога и дизайнера превращается в три разные картины. Схема фиксирует договорённость и снимает недопонимание.
3. Видны пробелы в содержании
Когда на схеме появляется блок «Отзывы клиентов», сразу становится ясно, что отзывов у компании нет, а блок «Команда» требует фотографий, которых никто не делал. Лучше узнать об этом на старте, чем за неделю до запуска.
4. Фокус на пользователе, а не на оформлении
Дизайн отвлекает: хочется обсуждать цвет кнопки, а не то, нужна ли эта кнопка вообще. Серая схема возвращает разговор к вопросу, что нужно посетителю и как он достигнет цели.
Уровни детализации
Единого стандарта нет, и в разных проектах каркас может быть очень разным. Обычно выделяют три уровня.
Эскизы от руки
Наброски на бумаге или доске. Подходят для первых обсуждений, когда нужно быстро проверить несколько идей. Делаются за минуты, выбрасываются без сожаления. Главное — не показывать их как результат работы, это рабочий материал.
Низкая детализация (low-fidelity)
Аккуратная схема из прямоугольников и подписей. Блоки обозначены условно, вместо текста — строки-заглушки или краткие тезисы. Этого достаточно, чтобы согласовать структуру и порядок блоков.
Высокая детализация (high-fidelity)
Схема с реальными заголовками, настоящими формулировками кнопок, примерным объёмом текста, описанием состояний элементов. Всё ещё без цветов и картинок, но уже очень близко к содержанию. Такой каркас особенно полезен для сложных страниц: каталогов, личных кабинетов, калькуляторов.
Выбор зависит от проекта. Для небольшого лендинга хватит схемы средней детализации, для интернет-магазина с десятками шаблонов страниц лучше проработать каждый шаблон подробно.
Как создаётся каркас: пошаговый процесс
- Сбор исходных данных. Изучаем бриф, цели сайта, аудиторию, конкурентов. Без понимания, кто и зачем придёт на сайт, схема будет произвольной. Как подготовить исходные материалы, описано в статье про бриф на дизайн.
- Структура сайта. Определяем список страниц и связи между ними. Результат — карта сайта: какие разделы, как вложены, как пользователь попадает из одного в другой.
- Сценарии. Для каждой ключевой аудитории выписываем путь: откуда пришёл, что хочет узнать, какое действие должен совершить. Эти сценарии станут основой для порядка блоков. Подробности в материале о пользовательских сценариях.
- Контентная модель. Для каждой страницы перечисляем блоки и данные, которые нужны. Здесь же выясняем, кто и когда предоставит тексты и фотографии.
- Схемы страниц. Рисуем каркасы главной, страниц услуг, карточек, контактов, блога и прочих шаблонов, начиная с самых важных.
- Мобильные версии. Отдельно продумываем, как схемы выглядят на узком экране, какие блоки сворачиваются, а какие меняют порядок.
- Внутренний разбор. Проверяем схемы на соответствие целям, ищем лишнее и недостающее.
- Согласование с заказчиком. Показываем схемы с комментариями, собираем обратную связь, вносим правки и фиксируем утверждённую версию.
Эти этапы входят в общий процесс, который мы описали на странице этапов работы: после анализа и проектирования структура утверждается, и только затем начинается визуальный дизайн.
Из каких блоков состоят типичные страницы
Чтобы схема не получилась случайной, полезно опираться на типовые блоки и осознанно решать, какие из них нужны.
Главная страница
- шапка с логотипом, меню и контактом;
- первый экран: заголовок, подзаголовок, главная кнопка;
- краткое описание услуг или направлений;
- преимущества, подкреплённые фактами;
- примеры работ или отзывы;
- этапы сотрудничества;
- призыв к действию в конце и подвал с контактами.
Страница услуги
- заголовок и краткое пояснение, для кого услуга;
- состав работ и результат;
- порядок и сроки;
- цены или ориентиры;
- кейсы и отзывы по теме;
- ответы на частые вопросы;
- форма или кнопка обращения.
Карточка товара
- галерея изображений;
- название, цена, наличие, кнопка покупки;
- основные характеристики;
- варианты и параметры выбора;
- доставка и оплата;
- отзывы и похожие товары.
Примеры того, как каркас карточки и каталога помогает избежать потерь, разобраны в материалах про карточку товара и каталог интернет-магазина.
Как заказчику читать и согласовывать каркас
Многие боятся согласования, потому что не понимают, на что смотреть. Вот короткий набор вопросов, который поможет оценить схему без специальной подготовки.
- Понятно ли с первого взгляда, о чём страница и что здесь предлагается?
- Виден ли главный призыв к действию, и не конкурирует ли с ним что-то ещё?
- Идут ли блоки в том порядке, в котором вопросы возникают у клиента?
- Нет ли на странице лишнего, что можно убрать без потери смысла?
- Есть ли всё, что нужно для решения: цена, сроки, гарантии, контакты?
- Можно ли найти нужную страницу за два-три клика?
- Реально ли вы предоставите контент, который предполагает схема?
Инструменты для создания каркасов
Выбор инструмента не определяет качество результата, но влияет на скорость и удобство командной работы. Используются как специализированные программы для интерфейсного проектирования, так и онлайн-доски, и даже обычные презентации. Важно, чтобы инструмент позволял:
- быстро собирать блоки из готовых элементов;
- оставлять комментарии прямо на схеме;
- делиться ссылкой, а не пересылать файлы;
- поддерживать разные размеры экранов;
- сохранять историю изменений.
Для небольших проектов часто хватает простых средств, а для крупных порталов и интернет-магазинов используются компонентные библиотеки, о которых мы писали в статье про дизайн-систему. Подробнее о стеке студии на странице технологий.
Типичные ошибки при работе с каркасами
- Переход к дизайну без согласования. Это приводит к переделкам на самом дорогом этапе.
- Слишком абстрактные схемы. Подписи «Текст» и «Заголовок» мало что говорят. Лучше писать реальные формулировки, пусть и черновые.
- Копирование структуры конкурентов. Чужая схема не учитывает ваши цели и ваших клиентов. Конкурентов стоит изучать как источник идей, а не как шаблон.
- Перегруженность. Попытка уместить на главной всё сразу превращает страницу в свалку. Если блок не помогает достичь цели, его нужно убрать.
- Игнорирование мобильной версии. Схема только для компьютера оставляет самые важные вопросы без ответа.
- Правки без фиксации. Если нет единой утверждённой версии, на этапе дизайна начинаются споры, что именно согласовывали.
- Вымышленный контент. Идеальные тексты в схеме не совпадают с реальными, и страница ломается, когда приходят настоящие данные. Используйте реалистичный объём и пограничные случаи: очень длинное название, отсутствие изображения, пустой список.
Что получает заказчик на выходе
Результатом этапа проектирования становится комплект материалов, с которым можно спокойно двигаться дальше:
- карта сайта со структурой разделов;
- схемы всех ключевых шаблонов для компьютера и смартфона;
- описание поведения интерактивных элементов: меню, фильтров, форм, раскрывающихся блоков;
- перечень контента, который нужно подготовить, с ответственными;
- согласованный список страниц, на основе которого считаются сроки и стоимость.
Именно после этого можно точно оценить объём работ. Если вы сравниваете предложения разных подрядчиков, обратите внимание на то, что включено в проектирование: в нашем случае это отражено в тарифах, а в процессе сотрудничества структура утверждается до начала дизайна.
Wireframe и контент: порядок действий
Классическая ошибка — проектировать страницу, не зная, что на ней будет написано. Идеальный вариант — работать с контентом параллельно: тексты хотя бы в виде тезисов, список фотографий, перечень документов. Если дожидаться полной готовности материалов, проект затянется, но и совсем без них схему делать нельзя.
Рабочий компромисс: сначала составить для каждой страницы список смысловых блоков и ключевых тезисов, затем подготовить схему, а уже потом дописывать финальные тексты под утверждённую структуру. Так мы работали, например, над сайтом архитектурного бюро «Линия»: порядок показа проектов и подача информации о каждом из них были определены на уровне схем, и только затем визуальная часть получила окончательную форму.
Итог
Wireframe — самый недооценённый документ в процессе создания сайта. Он выглядит скромно, но именно в нём принимаются решения, которые определяют, будет ли сайт понятным и продающим. Каркас помогает договориться о структуре, найти пробелы в контенте, сэкономить на правках и дать дизайнеру твёрдую основу.
Если вы планируете новый сайт или обновление существующего, начните с обсуждения структуры. Свяжитесь с нами через страницу контактов, и мы расскажем, как выстроить проект так, чтобы каждый этап был понятен и проверяем.
