Статья
Первый экран сайта: 8 элементов, которые удержат клиента
Первый экран сайта — это то, что человек видит до первой прокрутки. У него одна задача: за несколько секунд ответить, туда ли он попал. Если ответа нет, дальше он не пойдёт, и остальные экраны — с преимуществами, отзывами и формой — просто не будут прочитаны.
Отсюда нехитрая арифметика: сколько бы блоков ни было на странице, работать они начинают только после того, как сработал первый. Ниже разберём восемь элементов, из которых он собирается, посмотрим на четыре реальных первых экрана из наших проектов и разберём ошибки, из-за которых экран выглядит красиво, но не удерживает.
Что такое первый экран и почему он решает
Первый экран, или hero-блок, — верхняя часть страницы, видимая без прокрутки. На десктопе это примерно половина экрана монитора, на телефоне — заметно меньше, и это важное различие: то, что на широком экране помещается свободно, на мобильном приходится сокращать до сути.
Дизайн первого экрана — не про красивую картинку. Это про иерархию: что человек прочитает первым, что вторым и куда нажмёт. Всё остальное — шрифты, цвет, фотография — работает на эту иерархию или мешает ей.
8 элементов первого экрана
- Смысловой заголовок.
Чем вы занимаетесь и для кого. Не слоган и не название компании, а фраза, после которой человек понимает, туда ли попал. «Тренируйся с системой» работает, «Добро пожаловать на наш сайт» — нет. - Подзаголовок с ценностью.
Одно-два предложения, раскрывающих пользу: что клиент получит и чем это отличается от соседнего предложения. Здесь же снимается первый вопрос — для кого это. - Целевое действие.
Одна главная кнопка, а не пять равнозначных. «Обсудить проект», «Записаться», «Смотреть каталог» — глагол и понятный результат. Вторая кнопка допустима, но визуально слабее первой. - Визуальная концепция.
Фотография, мокап или графика, которые поддерживают смысл, а не занимают место. Стоковое изображение с улыбающимися людьми не сообщает ничего и узнаётся мгновенно. - Доказательство.
Цифры, логотипы клиентов, награды или короткая строка вроде «работаем с 2018 года». Один-два элемента, не больше: первый экран не место для полного списка регалий. - Ориентиры навигации.
Меню и логотип, по которым понятно, что это за компания и куда можно уйти. На телефоне меню сворачивается, но контакт остаётся доступным. - Способ связи.
Телефон, мессенджер или кнопка звонка — для тех, кто готов написать сразу и не хочет искать контакты внизу страницы. - Структура и воздух.
Порядок элементов, равные отступы, читаемый размер шрифта. Это не украшение: именно иерархия задаёт, что прочитают первым.
Восьми элементов не должно быть буквально на каждом экране. На лендинге под рекламу их обычно меньше — там всё подчинено одному действию. На корпоративном сайте больше, потому что аудитория разная и ей нужны разные входы.
Разбор: четыре первых экрана из наших проектов
Теория проверяется примерами. Ниже — проекты из портфолио и то, что решалось на первом экране каждого.
NextLevel Academy — онлайн-школа
На первом экране лендинга онлайн-школы вынесены три цифры школы: 5000+ прошедших обучение студентов, 20+ курсов и 92% доходящих до результата. Это работа элемента «доказательство» в чистом виде — человек видит масштаб раньше, чем начинает читать программу. В образовании, где выбирают между десятком похожих предложений, это снимает главное сомнение: доучиваются ли здесь вообще.
Alpha-Safety — промышленная платформа
У корпоративной платформы инжиниринговой компании задача была обратная: не впечатлить, а сориентировать. За первым экраном стоит каталог на 250+ страниц, и главное — сразу показать, что компания делает и куда идти дальше. Здесь первый экран работает как вход в структуру, а не как рекламный плакат: посетитель — снабженец или инженер, и ему нужен не образ, а маршрут.
ЖК AXIS — недвижимость
У сайта жилого комплекса первый экран задаёт уровень: человек выбирает квартиру и сравнивает проекты по ощущению не меньше, чем по цене. Поэтому визуальная концепция здесь несёт основную нагрузку, а целевое действие ведёт в каталог квартир — к тому, ради чего человек пришёл, а не к абстрактной форме обратной связи.
FitForm Inside — фитнес-сервис
У сайта и личного кабинета фитнес-сервиса первый экран строится вокруг короткой формулы «Тренируйся с системой». Это пример смыслового заголовка, который одновременно объясняет продукт и отстраивает его от конкурентов: не просто тренировки, а система с трекингом. Слоган работает не потому, что красивый, а потому, что содержит обещание.
Частые ошибки первого экрана
- Заголовок ни о чём.
«Мы создаём решения для вашего бизнеса» подходит любой компании, а значит, не сообщает ничего. - Пять кнопок одного веса.
Когда всё главное, главного нет. Человек не выбирает — он уходит. - Огромная фоновая фотография.
Красиво на мониторе дизайнера, медленно на мобильном интернете и нечитаемо, если текст лежит поверх пёстрого снимка. - Экран не помещается в экран.
Заголовок, подзаголовок, три абзаца и кнопка — на телефоне кнопка оказывается ниже сгиба, и её не видят. - Слайдер вместо экрана.
Карусель из пяти предложений: пока человек читает первое, оно уезжает. Обычно до второго слайда не долистывает почти никто. - Текст поверх цветного фона без контраста.
Про то, как цвет влияет на восприятие и читаемость, есть отдельный разбор —
психология цвета в веб-дизайне
.
Как проверить свой первый экран
- Откройте сайт на телефоне и не прокручивайте.
Всё главное должно быть видно: заголовок, суть, кнопка. - Покажите экран человеку не из вашей сферы на несколько секунд, потом закройте.
Спросите, чем занимается компания. Если он не ответил — заголовок не работает. - Найдите глазами одно действие.
Если взгляд мечется между кнопками, их слишком много. - Проверьте, узнаётся ли картинка.
Если такое же изображение может стоять у конкурента, оно не ваше. - Замерьте, когда экран становится видимым.
Тяжёлая фоновая картинка отодвигает этот момент на секунды — а до неё человек смотрит на пустоту.
Ошибки на трёх пунктах из пяти обычно означают, что дело не в отдельных правках: экран собирали из красивых блоков, а не из иерархии. Минимализм здесь помогает больше, чем декор, — почему именно так, разобрано отдельно: минимализм в веб-дизайне.
Посмотрите свой первый экран до начала работы
Разбирать чужие примеры полезно, но свой экран нагляднее. Мы делаем макет первого экрана бесплатно и до начала проекта: вы видите, как может выглядеть ваш сайт, ещё ничего не оплатив. В работе над макетом мы разбираемся в задаче и целях сайта, смотрим, как клиент должен воспринимать бренд, выстраиваем логику подачи и визуальную иерархию и закладываем структуру, которая ведёт пользователя дальше.
Как это устроено и что нужно с вашей стороны — на странице бесплатного макета первого экрана. Макет входит в работу над проектом в ID Agency по любому из тарифов, от лендинга до расширенного сайта.
Итог
Первый экран сайта — не обложка и не украшение, а фильтр: он решает, прочитают ли всё остальное. Собирается он из восьми элементов, но держится на одном — понятном заголовке, после которого ясно, туда ли человек попал.
Если сомневаетесь в своём первом экране, начните с проверки по пяти пунктам выше. А если хотите увидеть, как он может выглядеть, — закажите бесплатный макет в ID Agency: покажем вариант до начала работы и без обязательств.
Частые вопросы
Какой высоты должен быть первый экран?
Ровно такой, чтобы поместилось главное и осталось видно, что ниже есть продолжение. Экран в полную высоту окна — частая ошибка: на ноутбуке он выглядит пустым, а на телефоне выталкивает кнопку за край. Мы ориентируемся на содержимое, а не на высоту окна.
Чем первый экран лендинга отличается от корпоративного сайта?
Задачей. У лендинга один призыв, и первый экран ведёт к нему прямо. У корпоративного сайта человек может прийти за услугами, командой или контактами, поэтому первый экран объясняет, чем занимается компания, и открывает дорогу в разделы.
Сколько времени есть у первого экрана?
Несколько секунд. За это время человек решает не «купить», а «остаться». Поэтому на первом экране должно быть понятно, что это за компания, что она делает и что сделать дальше.
Нужна ли на первом экране форма?
Не обязательно. Форма уместна, когда человек уже пришёл с готовым намерением — с рекламы по конкретному запросу. В остальных случаях сильнее работает кнопка: она не требует ничего вводить и не пугает объёмом.
Что поставить на первый экран, если нет хороших фотографий?
Типографику и воздух. Крупный понятный заголовок на чистом фоне выглядит лучше, чем стоковая картинка из поиска: она сразу читается как шаблон и снимает доверие быстрее, чем его успевает создать текст.