Что такое вайрфреймы: собираем схему проекта

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

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

● Навигация — хедер, футер, хлебные крошки, навигация по каталогу;
● Заголовки и области текста — иногда их заменяют рыбным текстом или серыми прямоугольниками;
● Кнопки — прямоугольники серого или белого цвета;
● Карточки — блоки серого цвета, которые содержат в себе более мелкие элементы, например прямоугольники текста и кнопок;
● Иллюстрации и фотографии — вместо них ставят заглушки, например, перечёркнутые прямоугольники без заливки;
● Иконки — в виде схемы или серых квадратов.

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

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

Так вайрфрейм веб-сайта может выглядеть в кейсе проекта. Источник: behance

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

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

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

● Ставить структуру на первое место
Способ подачи информации и структура будущего продукта выступают на первый план: детали на этом этапе вторичны. Глядя на вайфреймы, можно понять, соответствует ли функциональность целям продукта, и если нет — легко поменять структуру, чтобы верно расставить акценты.

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

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

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

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

Слева фрагмент вайрфрейма, справа — созданный на его основе прототип лендинга. Источник: behance

Этот шаблон вайрфрейма в Figma учитывает необходимость адаптировать схему под разные устройства: дизайнеру не придётся отрисовывать их самому. Источник: figma.community

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

Пример вайрфрейма мобильного приложения. Источник: miro

В сервисе есть шаблон сайта и мобильного приложения. Источник: wireframe.cc

Забавные подсказки вдохновляют попробовать сервис. Источник: balsamiq

Нужные элементы легко добавить из списка слева. Источник: mockflow

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

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