Первый экран сайта должен за 3-5 секунд ответить на вопрос «это то, что мне нужно?», и для этого в нём нужно 6 элементов: оффер, подзаголовок с деталями, доказательство, визуал по теме, одна главная кнопка и быстрый контакт. Всё остальное - слайдеры, слоганы, приветствия - обычно мешает и отодвигает ответ ниже, где его уже не увидят.
I. Зачем первому экрану отдельное внимание
Первый экран - единственная часть сайта, которую видят все посетители. До второго блока доскролливает заметно меньше людей, до цен и кейсов - ещё меньше. Поэтому первый экран решает не «продать», а «удержать»: человек должен понять, что попал по адресу, и захотеть посмотреть дальше.
У посетителя из поиска или рекламы в голове конкретный запрос. Если первый экран говорит его словами, он остаётся. Если там абстрактная картинка и фраза «Мы создаём будущее», он возвращается в выдачу и кликает следующий сайт. Поисковики видят такие быстрые возвраты, и это не помогает сайту в ранжировании.
II. 6 элементов первого экрана
| Элемент | Задача | Пример формулировки |
|---|---|---|
| 1. Оффер (заголовок) | Назвать услугу и выгоду | «Натяжные потолки в Одинцово за 1 день» |
| 2. Подзаголовок | Уточнить для кого и как | «Замер бесплатно, смета фиксируется в договоре» |
| 3. Доказательство | Снять первое сомнение | Годы работы, число объектов, рейтинг на картах |
| 4. Визуал | Показать результат или процесс | Фото или видео реальных работ |
| 5. Главная кнопка | Дать следующий шаг | «Рассчитать стоимость», «Записаться» |
| 6. Быстрый контакт | Для тех, кто готов сразу | Телефон и мессенджер в шапке |
Кнопка на первом экране должна быть одна главная. Если рядом стоят «Заказать», «Узнать больше», «Скачать каталог» и «Позвонить» одинакового веса, человек не выбирает ничего. Второе действие можно оставить, но визуально тише: текстовой ссылкой или контурной кнопкой.
III. Как написать оффер
Оффер - самая важная строка сайта. Рабочая формула: что вы делаете, для кого или где, и чем отличаетесь. Отличие должно быть проверяемым: срок, формат, гарантия процесса, специализация. «Качество» и «надёжность» отличием не являются, их пишут все.
- Словами клиента. Как человек формулирует запрос в поиске, так и пишите.
- Коротко. Заголовок до 8-10 слов, детали уходят в подзаголовок.
- Конкретно. Цифра, срок или география сильнее прилагательных.
- Без приветствий. «Добро пожаловать на сайт компании» съедает самое ценное место.
- Под источник трафика. Для разных рекламных кампаний можно показывать разные заголовки.
Тест на оффер: закройте логотип и спросите человека не из вашей отрасли, чем занимается компания и чем она отличается. Если он не может ответить за 5 секунд, заголовок нужно переписывать.
IV. Визуал, видео и анимация
Визуал на первом экране показывает то, что словами объяснять долго: результат работы, товар, атмосферу. Реальные фото и видео почти всегда сильнее стоковых, потому что человек узнаёт в них живую компанию. Видео в фоне уместно, когда продаётся впечатление или процесс: мероприятия, красота, интерьеры, одежда.
В проектах студии это видно хорошо. На проекте для event-агентства НАВСЕГДА первый экран сразу погружает в атмосферу корпоративных мероприятий и ведёт к услугам и расчёту стоимости. В проекте для магазина кроссовок Monkey Market премиальная витрина с видео и анимацией передаёт стиль магазина, а заказ уходит в Telegram, так что путь от первого экрана до покупки короткий.
Тяжёлое видео или сложная анимация без оптимизации замедляют загрузку. Если первый экран на телефоне появляется дольше 3-4 секунд, часть посетителей уйдёт раньше, чем увидит оффер. Видео сжимают, дают постер-картинку на время загрузки и не ставят автозапуск со звуком.
Анимация на первом экране работает, когда она подчёркивает смысл: плавно проявляет оффер, показывает товар с разных сторон, даёт ощущение живого бренда. Когда же элементы вылетают со всех сторон и заголовок появляется через 2 секунды, человек успевает заскучать. Хорошее правило - оффер и кнопка видны сразу, а движение добавляется вокруг них, не задерживая чтение.
Отдельный вопрос - фото людей. Лица команды или клиентов в кадре повышают доверие, если это реальные люди компании. Стоковая улыбающаяся девушка с гарнитурой, наоборот, сигнализирует о шаблонном сайте. Если своих фото пока нет, лучше показать результат работы крупным планом: интерьер, объект, товар, мероприятие. Для производств и строительных компаний хорошо работает фото объекта в процессе: оно доказывает, что работа реально ведётся, и сразу отвечает на вопрос о масштабе.
Помните и про контраст. Белый текст на светлом видео или фото читается плохо, особенно на солнце с телефона. Затемнение фона на 30-50% или плашка под заголовком решают проблему без потери атмосферы. Проверьте первый экран на самом дешёвом телефоне в офисе и на улице при дневном свете - это честнее любого макета на большом мониторе.
V. Первый экран на телефоне
На многих сайтах услуг большая часть посетителей приходит с телефонов, а экран там в 2-3 раза меньше по площади. Всё, что на компьютере стоит в ряд, на телефоне выстраивается в столбик, и кнопка часто оказывается ниже видимой области. Первый экран для телефона проектируют отдельно, а не просто сжимают.
- Оффер и кнопка должны быть видны без прокрутки на экране шириной 360-390 пикселей.
- Шрифт заголовка крупный, но строка не длиннее 3-4 строк.
- Кнопка шириной почти во весь экран, высотой не меньше 44-48 пикселей.
- Телефон и мессенджер - иконками в шапке, по тапу сразу открывают звонок или чат.
- Фоновое видео на телефоне можно заменить лёгкой картинкой.
VI. Ошибки и как проверить экран
- Слайдер из 4-5 сменяющихся баннеров - второй и третий почти никто не видит.
- Логотип и меню занимают половину экрана.
- Всплывающее окно с подпиской или скидкой в первую секунду.
- Текст поверх пёстрого фото без затемнения - не читается.
- Одинаковый первый экран для всех рекламных кампаний с разными запросами.
Проверять первый экран лучше данными, а не вкусом. В Метрике смотрите показатель отказов и глубину просмотра по страницам входа, в Вебвизоре - доходят ли люди до второго блока. Если после смены оффера отказов стало меньше, а кликов по кнопке больше, изменение сработало. Сравнивать варианты стоит на периоде хотя бы 2-4 недели, чтобы не принять случайность за результат.
VII. Сроки, цена и итог
Переделать один первый экран можно за несколько дней, но часто выясняется, что проблема глубже: оффер не подкреплён ценами, кейсами и формой ниже. Тогда выгоднее пересобрать сайт целиком. В N3MIROFF разработка сайтов и SEO - это самописный сайт на React с живым дизайном от 80 000 ₽, срок 1-2 недели от получения материалов, заявки приходят в Telegram или CRM. Перенос с конструктора - от 80 000 ₽.
Итог простой: 6 элементов, одна главная кнопка, реальный визуал, быстрая загрузка на телефоне. Первый экран не гарантирует заявок сам по себе, но без него до цен и формы доходит слишком мало людей. Если трафика пока мало, параллельно можно подключить генерацию целевых клиентов.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Услуги студии по теме: разработка сайтов под ключ и SEO-продвижение статьями.
Посетители уходят с первого экрана?
Посмотрим ваш сайт глазами клиента и соберём первый экран, который за 5 секунд объясняет, почему стоит остаться.
Частые вопросы
Что обязательно должно быть на первом экране сайта?
6 элементов: оффер с названием услуги, подзаголовок с деталями, доказательство, визуал по теме, одна главная кнопка и быстрый контакт.
Нужен ли слайдер на первом экране?
Обычно нет. Второй и последующие слайды видит мало людей, а смена баннеров отвлекает от оффера. Один сильный экран работает лучше.
Можно ли ставить видео на первый экран?
Можно, если видео показывает реальный результат или атмосферу и оптимизировано. Первый экран на телефоне должен появляться быстрее 3 секунд, иначе видео лучше заменить картинкой.
Какой длины должен быть заголовок на первом экране?
Обычно до 8-10 слов. Детали, условия и география уходят в подзаголовок в 1-2 строки.
Сколько стоит переделать первый экран или сайт в N3MIROFF?
Сайт на React целиком - от 80 000 ₽ за 1-2 недели от материалов. Отдельную доработку первого экрана оцениваем после разбора текущего сайта.
Разберём первый экран вашего сайта
Оставьте заявку - покажем, каких из 6 элементов не хватает, и предложим оффер под ваш источник трафика.
Получить целевые заявки → Telegram