UI/UX дизайн

Что такое вайрфрейм (wireframe)?

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

Главное — скорость и фокус обсуждения. Пока экран выглядит как набросок, говорят о правильном порядке блоков и составе информации. Как только появляются настоящие цвета и фото, обсуждение неизбежно переходит на оттенок кнопки.

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

Где применяется

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

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

Пример

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

Частые вопросы

Чем вайрфрейм отличается от прототипа и макета?

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

Можно ли пропустить этап вайрфрейма?

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

В чём делают вайрфреймы?

Чаще всего в Figma, потому что там же потом создают макет. Подойдут и простые инструменты вроде Balsamiq, и обычная бумага с карандашом. Инструмент здесь не главное: ценность в скорости, с которой можно перебрать несколько вариантов структуры.

Обучение UI/UX-дизайну в OWU

Освойте профессию UI/UX-дизайнера на практических курсах с менторами и реальными проектами.

Выбрать курс