Содержание
Макет в Figma готов, структура определена, модули спланированы. Прежде чем переходить к коду, стоит уделить отдельное внимание первому экрану. Это то, что зритель видит в момент загрузки страницы, ещё до первого скролла или клика. От того, как выглядит и работает этот экран, зависит, останется ли зритель дальше или закроет вкладку.
Входное окно
В отличие от печатного плаката, который зритель схватывает целиком за одно мгновение, веб-плакат раскрывается постепенно. Первый экран — это единственная часть, которую гарантированно увидит каждый. Всё, что ниже линии скролла, зритель увидит только в том случае, если первый экран его заинтересовал.
Ярослав Субботин подчёркивает, что плакат, который просто висит на стене, работает по другим правилам композиции. Здесь мы должны понимать, что плакат скроллится, и на каждом экране есть пятно, которое держит композицию.
Детектор ровного пацана
Первый экран — это пятно номер один, и оно должно работать сильнее всех остальных.
Что должен делать первый экран? Он должен за несколько секунд дать зрителю понять три вещи: о чём этот плакат (тема), каким языком он говорит (стиль), и что здесь можно делать (тип взаимодействия). Если на первом экране уже есть движение — зритель понимает, что страница живая. Если есть hover эффект, то понимает, что можно взаимодействовать. Если есть визуальная подсказка о скролле, то понимает, что внизу есть продолжение.
Проверка первого экрана
Первый приём, который помогает оценить, насколько хорошо читается ваш первый экран. Откройте макет в Figma, создайте поверх него прямоугольник размером с экран и примените к нему background blur со значением около 10–15 пикселей. Результат покажет вам, как выглядит ваша композиция в расфокусе.
Если даже через размытие вы различаете крупные пятна, направления движения и общий ритм — композиция работает. Если всё сливается в однородную кашу — вероятно, не хватает контраста между элементами, или все они примерно одного размера и веса. Этот тест занимает десять секунд, но сразу показывает проблемы с иерархией.
Второй полезный приём — уменьшить масштаб макета до 25–30%. На таком масштабе мелкие детали пропадают, и вы видите только крупную структуру. Если она считывается — всё в порядке. Если превращается в серое пятно — стоит поработать над контрастом масштабов.
Попробуйте показать первый экран кому-нибудь на три секунды, а потом спросить: «О чём это?» и «Что тут можно делать?». Если человек затрудняется ответить, экран требует доработки. Три секунды — примерно столько, сколько зритель тратит на решение скроллить дальше или закрыть
Одноэкранный формат
Если ваш плакат работает в одноэкранном формате, то есть без скролла, всё сказанное выше становится ещё критичнее. У вас нет второго экрана, который мог бы компенсировать слабый первый. Всё, что вы хотите сказать и показать, должно уместиться в одном видимом окне браузера.
NOX
Одноэкранные плакаты обычно работают через модальности — всплывающие окна, переключаемые состояния, слои, которые появляются поверх основного экрана. Работа NOX устроена именно так: три мини-игры открываются поверх основного экрана, а по завершении каждой зритель возвращается на то же место, где накапливаются результаты.
Здесь важно сказать про распространённую ошибку. Когда модальных окон становится слишком много и каждое из них перекрывает предыдущее, зритель теряет ощущение единого пространства. Формально вы остаётесь на одной HTMLстранице, но по ощущению это уже больше похоже на сайт с навигацией. Как отмечают преподаватели Школы дизайна, когда поверхность одной страницы открывает много нового контента и зритель проваливается из одного пространства в другое, плакат перестаёт быть плакатом.
Хорошее правило для одноэкранного плаката: основной экран всегда остаётся точкой возврата. Модальности расширяют его, а не заменяют. Зритель может уйти в игру, в раскрывающийся блок, в полноэкранную анимацию, но всегда возвращается на тот же экран, с которого начал. Это сохраняет целостность пространства.
Чеклист проверки
- Считывается ли тема за три секунды? Если нет, возможно, стоит усилить заголовок или убрать отвлекающие элементы.
- Есть ли визуальная иерархия? Проверьте через блюр-тест или уменьшение масштаба.
- Понятно ли, что страница интерактивна? Если на первом экране есть движение, hover-реакция или текстовая подсказка — зритель поймёт, что здесь можно что-то делать.
- Понятно ли, что внизу есть продолжение? Для скроллируемых плакатов это критически важно. Обрезанный элемент, стрелочка вниз или просто незавершённая композиция — любая подсказка, что за границей экрана что-то есть.
- Если это одноэкранный плакат, то не перегружен ли экран модальностями? Убедитесь, что основной экран остаётся якорем, а не промежуточным слоем.
