Первый экран сайта: что на нём должно быть

Первый экран — всё, что человек видит, пока ещё ничего не прокрутил. За первые секунды он решает, туда ли попал, поэтому экран должен сразу сказать, что здесь предлагают, кому и что делать дальше. Для этого нужны заголовок-предложение, короткий подзаголовок, одна главная кнопка, изображение самого продукта и пара признаков доверия — и всё это должно быстро открываться на телефоне.

Зачем первому экрану столько внимания

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

Поэтому задача экрана — не продать всё сразу, а подтвердить, что человек по адресу, и дать причину листать дальше или действовать. Подробности — цены, сроки, примеры — живут ниже, в остальных блоках.

Размер первого экрана зависит от устройства: на ноутбуке он один, на телефоне заметно меньше, а при повороте экрана меняется снова. Поэтому его проектируют минимум в двух вариантах — для широкого экрана и для телефона.

Как написать заголовок первого экрана

Заголовок — главный текст экрана, и он должен работать без всего остального. Рабочая формула: что вы делаете, для кого и чем отличаетесь. Если всё не помещается, отличие переезжает в подзаголовок, но первые две части остаются.

Вместо	Лучше
«Качество, проверенное временем»	«Ремонт стиральных машин на дому: мастер приедет в день заявки»
«Ваш надёжный партнёр»	«Бухгалтерия для ИП и небольших ООО: учёт, зарплата и отчётность»
«Создаём уют в вашем доме»	«Шторы на заказ: замер, пошив и монтаж карнизов»
«Инновационные решения для бизнеса»	«Видеонаблюдение для складов и магазинов: проект, монтаж, обслуживание»

Ещё три правила:

• Повторяйте обещание рекламы. Если объявление говорило о мастере в день заявки, заголовок говорит то же: человек проверяет, что попал куда обещали.
• Пишите словами клиента. Не «клининговые услуги», а «уборка квартир», если так ищут ваши клиенты.
• Только правда. Срок, цену и условия выносят в заголовок, только если бизнес их действительно выполняет.

Заголовок первого экрана обычно размечают как H1 — главный заголовок страницы. Поисковые системы учитывают, что в нём написано, так что слова, по которым вас ищут, здесь к месту — пока предложение не превращается в набор запросов.

Подзаголовок и одна главная кнопка

Подзаголовок раскрывает предложение в одной-двух строках: как это работает, главное условие, что снимает основной страх. Под заголовком про бухгалтерию это может быть «Работаем удалённо, отчёты присылаем в мессенджер, стоимость фиксируем в договоре». Пересказывать заголовок другими словами или писать абзац не нужно.

Кнопка — одна главная. Когда рядом стоят «Заказать», «Подробнее» и «Каталог» одинакового веса, человек тратит время на выбор и нередко не выбирает ничего. Второстепенные пути — телефон, мессенджер, каталог — оформляют скромнее: ссылкой или иконкой.

Что важно в кнопке:

• надпись называет результат: «Вызвать мастера», «Получить расчёт», «Выбрать время» — а не «Отправить»;
• цвет кнопки выделяется на экране и не повторяется в декоративных элементах вокруг;
• текст на кнопке читается: по WCAG контраст обычного текста с фоном — не ниже 4,5 : 1;
• рядом можно снять последний барьер — «без предоплаты», «расчёт ни к чему не обязывает», — если это правда.

Какое изображение поставить на первый экран

Картинка должна подтверждать заголовок, а не украшать его. Заголовок про шторы — на фото комната с этими шторами, а не девушка с чашкой кофе у окна. Лучше всего работают:

• сам продукт — крупно, в деле или в интерьере;
• результат услуги — готовый объект, починенная техника;
• люди, которые делают работу, и место, куда клиент придёт;
• для услуг, которые не сфотографируешь, вроде бухгалтерии, — интерфейс, пример отчёта, схема работы.

Стоковые рукопожатия и улыбающиеся операторы в гарнитурах ничего не говорят о вашем бизнесе — такие картинки пролистывают не глядя.

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

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

Признаки доверия: коротко и проверяемо

Отзывам и документам на первом экране места нет, но два-три коротких факта рядом с кнопкой или под подзаголовком поместятся:

• рейтинг в Яндекс Картах или 2ГИС с числом отзывов и ссылкой на них;
• сколько лет вы работаете — если это действительно долго;
• гарантия, которая записана в договоре;
• лицензия или аккредитация — там, где они нужны;
• логотипы известных клиентов — с их разрешения.

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

Первый экран на телефоне

На телефоне место на первом экране делят предложение, шапка, плашка о cookie и кнопка чата. Без прокрутки обычно помещаются логотип с кнопкой меню, заголовок, строка подзаголовка и кнопка — в таком порядке их и проектируют.

• Заголовок короче. Длинная формулировка на узком экране растягивается на шесть-семь строк и выталкивает кнопку вниз. Иногда для телефона пишут сокращённую версию.
• Свой кадр. Горизонтальное фото на вертикальном экране превращается в полоску или обрезается не там. Для телефона готовят отдельный вариант, где главное — в центре.
• Осторожно с высотой. Если задать блоку высоту ровно в окно (100vh), на телефоне кнопка внизу может спрятаться под панелью браузера: эта единица считает высоту так, будто панели скрыты. Выручают единицы svh и dvh — или отказ от привязки к высоте окна.
• Тонкая шапка. Меню прячут под кнопку, в шапке оставляют логотип и телефон или мессенджер. Окна и чат, которые открываются сами, закрывают как раз то, ради чего человек пришёл.

Размеры кнопок, шрифты и формы на узком экране разобраны в статье про адаптивный дизайн.

Как первый экран влияет на скорость загрузки

Одна из метрик, по которым Google оценивает скорость страницы, смотрит именно на первый экран. LCP из Core Web Vitals показывает, когда отрисовался самый крупный элемент видимой области; хорошим считается результат не дольше 2,5 секунды. Видимая область при загрузке — это и есть первый экран, так что элементом LCP становится что-то из него:

• большая фотография или фоновая картинка;
• видео — для него засчитывается момент, когда появилась заставка или первый кадр, смотря что раньше;
• если изображений нет — блок текста, чаще всего заголовок, и тогда на результат влияет загрузка шрифта.

Отсюда практические выводы. Главную картинку сжимают и готовят в нескольких размерах, чтобы телефон не скачивал версию для широкого монитора. Отложенную загрузку для неё не включают, а наоборот, просят браузер загрузить её в первую очередь — атрибутом fetchpriority="high". У видео должна быть лёгкая заставка, а на телефоне его нередко заменяют этой же картинкой. Заголовок не прячут за анимацией появления: пока он «выезжает», человек смотрит на пустое место. А чтобы при загрузке ничего не прыгало, картинкам заранее задают размеры: сдвиги вёрстки измеряет метрика CLS, и её норма — не больше 0,1.

Как найти элемент LCP в отчёте PageSpeed Insights и что ещё тормозит страницу, — в статье о скорости загрузки сайта.

Частые ошибки

• Слайдер с пятью сообщениями. Каждый слайд — своё предложение, человек видит одно и не обязательно главное. Слайды переключаются посреди чтения, а скрипт карусели задерживает первый кадр.
• Тяжёлое видео на фоне. Мегабайты на мобильном интернете, пустой экран вместо картинки и текст, который не читается поверх движения.
• «Добро пожаловать» вместо предложения. Сюда же — название компании крупным шрифтом и слоган, который подойдёт кому угодно.
• Меню на пол-экрана. Шапка в три этажа: два телефона, адрес, соцсети, восемь пунктов меню — на телефоне она съедает всё место до заголовка.
• Несколько кнопок одинакового веса — и ни одной главной.
• Всплывающее окно в первые секунды — с подпиской, скидкой или чатом поверх заголовка.
• Текст на пёстрой фотографии без затемнения.

Если первый экран вашего сайта не объясняет, что вы предлагаете, или сайт только в планах, расскажите о задаче: разберём, кто приходит на страницу, и предложим, с чего её начать. Что ставить после первого экрана, разобрано в статье о структуре лендинга, а что происходит после нажатия на главную кнопку — в материале про форму заявки на сайте.