Wireframe

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

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

Различают low-fidelity и high-fidelity вайрфреймы. Low-fi — те самые серые блоки и реальный, но черновой текст: рисуют от руки или в Figma за полчаса, чтобы прогнать структуру с командой. High-fi уже несёт точные отступы, размеры шрифтов и состояния элементов, и фактически смыкается с прототипом. Частая ошибка — сразу лезть в high-fi: тратишь день на пиксели блока, который на обсуждении вообще выкинут.

Для SEO каркас закладывает то, что потом тяжело переделать: один H1 на странице, логичную иерархию H2-H3, место под текст у товара, видимые ссылки в зоне первого экрана. Если на вайрфрейме контент задвинут под три экрана баннеров, поисковик увидит пустую верхушку, а пользователь уйдёт — и это правят не на этапе UI-дизайна, а здесь, пока перестановка блоков стоит десять минут. Закладывайте структуру под намерение запроса сразу, иначе UX и ранжирование чинятся уже дорого.