Как сделать вайрфрейм сайта или приложения

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

Какими бывают вайрфреймы

Создание вайрфрейма — первый этап проектирования, на котором формируют структуру будущего продукта.

Вайрфреймы бывают разной степени детализации: 

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

Среднедетализированные. Эскизы с отображением основных элементов интерфейса: навигация, кнопки, заголовки, «рыба» текстов.

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

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

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

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

Figma. Онлайн-платформа, популярная среди продуктовых и UX/UI-дизайнеров. Можно легко создавать вайрфреймы с нуля и выставлять их в нужную последовательность для проработки пользовательских сценариев. Также в Figma Community есть много готовых бесплатных шаблонов с разной степенью детализации, их можно скопировать в свою рабочую область и настраивать под конкретный проект.

Sketch. Инструмент профессионального уровня для macOS. Позволяет создавать и тестировать как простые вайрфреймы, так и полнофункциональные прототипы.

Balsamiq. Онлайн-инструмент для создания вайрфреймов невысокой детализации. Работает на десктопе и в облаке. Бесплатный пробный период — 30 дней. Дальше — от $12 в месяц.

MockFlow. Блочный конструктор для сборки вайрфреймов. Работает через браузер и подходит для совместной работы.

Как работать с вайрфреймом

Прежде чем приступить к созданию вайрфрейма, следует:

• Изучить вводную информацию. Цели заказчика, пожелания по проекту, целевая аудитория, конкуренты.
• Нарисовать ментальную карту. На ней будут пользовательские сценарии и базовые элементы навигации по типу «Профиль» — «Настройки» — «Включить синхронизацию».

Далее можно переходить к построению схемы.

Правила создания хорошего вайрфрейма:

• Структура в приоритете. Она должна быть функциональной и отвечать целям проекта. Например, для продающего лендинга нужны заметные кнопки с призывами и простая форма заявки.
• Единообразие и последовательность. Важно придерживаться одного стиля на разных страницах и экранах: одинаковые система навигации, расположение блоков.
• Адаптивность. Если продукт будут использовать на экранах с разным разрешением, нужно сделать несколько версий схем. Например, для ПК и для мобильных устройств. 
• Тестирование и обратная связь. Важно получить фидбэк по вайрфрейму от всех заинтересованных коллег и от клиента, чтобы внести корректировки на ранней стадии проекта.

Проработка вайрфрейма снизит количество ошибок на следующих этапах и ускорит работу.

Как создать вайрфрейм

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

Сначала продумываем основные элементы приложения. Концепция следующая:

Опрос на старте. Спрашиваем «Куда хотите поехать?» и показываем несколько вариантов с картинками. Можно предложить разные страны или типы отдыха (пляж, горы, спортивный туризм).

Домашняя страница. На ней размещаем кнопку с призывом к действию. Делаем что-то наподобие меню для навигации: например, «Категории». Добавляем блок с идеями для вдохновения, чтобы упростить пользователям выбор. И создаем раздел с бесплатными направлениями — для тех, что хочет сэкономить.

Страница с интересными находками. Делаем отдельную страницу с местами для отдыха. Прикладываем фото, указываем локацию и цену. Понравившиеся варианты пользователь может добавлять в избранное.

Теперь показываем, как сделать схемы в Figma и MockFlow.

Figma. Можно взять готовый шаблон от сообщества платформа:

Или создать блоки самому:

Так будут выглядеть схемы для наших экранов:

MockFlow. Для примера возьмем шаблон страницы входящих сообщений.

Можно менять размер, местоположение, стиль, шрифт — любую настройку готового элемента.

Из примечательного — возможность собрать вайрфрейм из блоков. Находим нужные элементы в меню и перетаскиваем в рабочее пространство:

Примеры вайрфреймов

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

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

Посмотрим, какими разными могут быть вайрфреймы. Четких законов и правил тут нет, каждая команда делает так, как им удобнее.

Ниже дашборд с разными типами графиков и диаграмм:

Скетч со структурой онлайн-медиа:

Сайт мебельного магазина:

Страница с тарифами:

Инфографика для мобильных приложений:

Сервис для видеосозвонов:

Вайрфреймы для мобильного приложения без детализации: