Что такое вайрфрейм (wireframe)?
Вайрфрейм — схематичный чертёж экрана без цвета, шрифтов и картинок: серые прямоугольники на месте блоков и подписи, что там будет. Он показывает структуру и приоритеты, а не внешний вид.
Смысл в скорости и в фокусе обсуждения. Пока экран выглядит как набросок, разговор идёт о правильном порядке блоков и составе информации. Как только появляются реальные цвета и фотографии, обсуждение неизбежно уходит в оттенки кнопки.
Обычно последовательность такая: вайрфрейм → прототип с кликабельными переходами → финальный макет в цвете. Ошибку в логике на первом шаге исправить стоит минуты, на последнем — дни.
Где применяется
Вайрфреймы рисуют в самом начале работы над экраном — когда решают, что вообще на нём будет и в каком порядке. Их показывают заказчику и команде, чтобы договориться о структуре до того, как потрачено время на цвет, иллюстрации и анимацию.
В агентствах и продуктовых командах это ещё и инструмент согласования: по вайрфрейму видно объём работы, можно оценить сроки и обсудить состав блоков лендинга с маркетологом. Рисуют их в Figma, а иногда просто от руки на бумаге — для обсуждения этого достаточно.
Пример
Главный экран магазина на вайрфрейме — это пять серых прямоугольников с подписями: шапка, баннер, категории, хиты продаж, подвал. Обсуждение сразу идёт о том, нужны ли категории выше баннера, а не о том, какой оттенок у кнопки.
Частые вопросы
Чем вайрфрейм отличается от прототипа и макета?
Вайрфрейм — это структура без оформления. Прототип добавляет к нему кликабельные переходы, чтобы сценарий можно было пройти. Макет — финальный вид с цветом, шрифтами и картинками, по которому уже делают вёрстку. Обычно проходят все три стадии по очереди.
Можно ли пропустить этап вайрфрейма?
На простой задаче из одного экрана — да. Но чем сложнее сценарий, тем дороже обходится пропуск: ошибку в структуре на вайрфрейме исправляют за минуты, в готовом макете — за часы, а в свёрстанном продукте — за дни работы разработчика.
В чём делают вайрфреймы?
Чаще всего в Figma, потому что дальше в ней же вырастает макет. Подойдут и простые инструменты вроде Balsamiq, и обычная бумага с карандашом. Инструмент здесь вторичен: ценность даёт скорость, с которой можно перебрать несколько вариантов структуры.