Wireframe

вайрфрейм, каркас интерфейса

Wireframe — это схема расположения блоков страницы без цвета и графики, скелет интерфейса, который собирают перед дизайном.

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

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

Что это
каркас

Серые блоки и подписи без графики.

Про что
структура

Что и где стоит на странице.

Когда
первый этап

Раньше прототипа и дизайна.

Из wireframe вырастает прототип страницы.
Пример

На вайрфрейме лендинга заголовок, оффер и кнопку расставили серыми блоками за час — и только утвердив структуру, передали макет в UI-дизайн.