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

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

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

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

Связанные термины

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

UI (User Interface) — это визуальная часть продукта, через которую человек с ним взаимодействует: экраны, кнопки, поля, иконки, шрифты, цвета и отступы. UI-дизайнер отвечает за то, как продукт выглядит и как выглядят его состояния.

Figma

Figma — онлайн-редактор для дизайна интерфейсов. В нём рисуют макеты сайтов и приложений, собирают кликабельные прототипы и передают работу разработчикам, а несколько человек могут править один файл одновременно прямо в браузере.

Design System

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