Как мы проектируем первый экран

Три вопроса, которые опережают макет

Мы получили бриф на сайт для компании, продающей элитную загородную недвижимость (kf.expert). Первым делом не открыли Figma, не стали собирать референсы. Задали три вопроса.

1. Какое обещание посетитель принёс с собой?

Человек, который ищет загородный дом премиум-класса, держит в голове формулировку: «Я хочу найти дом, идеально подходящий моим критериям, без траты времени на неподходящие объекты». Это не лозунг компании, а прямой запрос, с которым он открыл сайт.

1. Что он должен почувствовать в первые 5 секунд?

«Я попал к профессионалам, которые понимают мои желания и готовы предложить конкретный дом прямо сейчас». Ощущение экспертизы и немедленной полезности — без анимаций и абстрактных образов.

1. Какое одно действие мы хотим, чтобы он совершил?

Запросить персональный подбор, а не блуждать по каталогу. Значит, весь первый экран стягивается к одной кнопке.

Ответы определили каждое решение. Заголовок на kf.expert стал «Персональный подбор загородного дома» — не «Эксперты рынка элитной недвижимости». Фоновое изображение получило реальное фото экстерьера, а не 3D-визуализацию. В шапке не осталось ничего, кроме обещания и кнопки «Подобрать дом». Посетитель мгновенно видит, что сайт отвечает именно на его задачу. Метрика подтвердила ход: конверсия выросла на 133%, данные кейса NF GROUP / knight-frank.

Как обещание превращается в текст

Ответ на первый вопрос — не упражнение в копирайтинге. Мы не придумываем обещание, а извлекаем его из данных. Для kf.expert проанализировали: поисковые запросы, с которых приходят клиенты («купить дом в посёлке премиум-класса», «элитная загородная недвижимость подбор»), содержание входящих звонков менеджерам и типовые письма с первичным запросом. Во всех точках контакта звучала потребность не в каталоге, а в персональном отборе объектов под критерии покупателя.

Варианты заголовков, которые мы отбросили:

• «Элитная загородная недвижимость» — говорит о категории бизнеса, но не о действии. Посетитель пришёл не изучать рынок, а решить свою задачу.
• «Ваш идеальный дом ждёт» — эмоциональный слоган без конкретики. Не отвечает на запрос «что я получу».
• «Эксперты рынка с 20-летним опытом» — сообщает о компании, а не о ценности для клиента в ближайшие минуты.

Итоговая формулировка «Персональный подбор загородного дома» в точности повторяет обещание, с которым посетитель открыл сайт. Ни одной лишней буквы, ни одного слова о компании. Психологический эффект — совпадение ожидания и реальности. Когда человек видит на экране то, что держал в голове секунду назад, он остаётся.

Та же логика сработала для проекта ЛИИС — системы «умный дом». Обещание посетителя: «Умный дом, который работает без моего участия и не ломается». Ощущение: «Я вижу надёжное готовое решение, не нужно разбираться самому». Действие: заявка на расчёт. Hero-блок сохранил только заголовок «Умный дом без забот», скриншот интерфейса системы и кнопку «Рассчитать». Конверсия прыгнула на 293%, стоимость лида упала в 7 раз.

Что убрать — не менее важно, чем что добавить

Решение начать с вопросов, а не с визуала, автоматически убирает главный источник шума — желание заполнить экран «красиво». Каждый лишний элемент конкурирует за внимание и обнуляет действия соседей.

Показательный пример извне: BluTV. В 2019 году команда сервиса провела A/B-тест мобильной версии сайта с 89 290 посетителями. Гипотеза: убрать всю навигацию из шапки, оставить только ценностное предложение и цену, усилить hero анимацией скролла. Психологический эффект — ясность и снятие тревоги о скрытых тарифах. Бизнес-результат: +42% подписок на триал. Это не эстетический редизайн: убирали не «некрасивое», а всё, что не отвечало на один из трёх вопросов.

Мы поступаем так же. На kf.expert hero-зона не содержит ни меню, ни слайдеров, ни вспомогательных кнопок. Только один фокус. Посетитель не отвлекается на структуру — он сразу видит ответ на своё обещание.

Та же механика в цифрах наблюдается на уровне рынка. Анализ 151 hero-секции от Web Anatomy выявил: лучшие конверсионные страницы вдвое чаще показывают социальное доказательство до скролла (81% против 41%) и на 50% чаще размещают снижатель риска рядом с CTA (65% против 42%). Это не украшательство, а прямое следствие ответа на вопрос «Что посетитель должен почувствовать?» — доверие и безопасность.

Отдельный экран для мобильной версии

Ошибка, которую мы регулярно видим: мобильный hero — уменьшенная копия десктопного. Это ломает иерархию внимания. На большом экране фоновое изображение особняка работает как атмосфера и доказательство статуса. На экране шириной 375 пикселей то же фото съедает всё пространство. Текст становится нечитаемым, кнопка теряется, посетитель уходит.

Для kf.expert мы спроектировали мобильную версию hero отдельно: фото уходит под затемнённую подложку, а текстовый блок с заголовком и кнопкой занимает весь видимый экран. Никакой прокрутки, чтобы добраться до сути. Посетитель с телефона получает ту же ясность за те же 5 секунд, что и пользователь десктопа. Это не адаптация макета — это отдельное решение под иной контекст внимания: палец вместо курсора, прерывистое внимание между уведомлениями, вертикальный скролл вместо горизонтального обзора.

Скорость как часть первого впечатления

Проектирование hero не заканчивается на визуале и тексте. Скорость загрузки — такой же элемент первого экрана, как заголовок. Если hero-изображение весит 3 мегабайта и грузится 5 секунд, посетитель видит белый прямоугольник вместо обещания. По данным Google, 53% мобильных посетителей покидают страницу, если загрузка длится дольше 3 секунд. LCP (Largest Contentful Paint) — метрика, которая измеряет время отрисовки самого крупного элемента в видимой области, и для hero это почти всегда фоновое изображение.

Мы закладываем ограничение на этапе проектирования: изображение в hero не может превышать 200 КБ в формате WebP с приоритетной загрузкой. Целевой LCP — 2,5 секунды. Для kf.expert выбрали фото экстерьера с естественным освещением, которое сохраняет читаемость даже при агрессивном сжатии. Текст и кнопка загружаются системными шрифтами без ожидания веб-шрифтов — посетитель читает обещание мгновенно, даже если соединение нестабильное. Психологический эффект: сайт, который открылся моментально, воспринимается как профессиональный и надёжный, ещё до того, как посетитель осознал содержание.

Таблица решений: от психологии к бизнесу

Почему процесс, а не макет

Проектирование первого экрана — это не поиск удачного референса. Это перевод языка владельца бизнеса на язык посетителя. Соседняя статья разбирает проклятие знания: владелец так глубоко знает продукт, что hero-текст говорит о компании, а не о клиенте. Мы убираем это искажение не на этапе аудита, а в самом начале — тремя вопросами.

Почему посетители уходят с первого экрана — диагностика в материале /posetiteli-uhodyat-s-sajta. А здесь показано, как мы предотвращаем уход ещё до появления макета: выясняем обещание, фиксируем желаемое ощущение и стягиваем всё к одному действию.

Когда мы предлагаем клиенту убрать навигацию из шапки или вынести цену в hero, часто звучит сопротивление: «Но посетитель захочет посмотреть другие страницы» или «Цена отпугнёт». В ответ мы показываем не эстетические аргументы, а данные: BluTV получил +42% подписок, когда убрал всё лишнее; ЛИИС снизил стоимость лида в 7 раз. Три вопроса и метрики снимают любое сопротивление быстрее, чем любой спор о вкусе.

Такой подход позволяет не гадать, а знать, что должно быть в hero. Неважно, B2B-услуга это или продукт. Главная brezatech.ru/attention построена по тому же принципу: одно обещание («сайт, который держит внимание»), одна кнопка («Показать на примере») и минимум элементов. Посетитель сразу видит, зачем он здесь, и может сделать шаг.