Главная  /  Все о создании, разработке и раскрутки сайтов  /  
Что должно быть в верхней части сайта: разбираем стартовую зону страницы

Что должно быть в верхней части сайта: разбираем стартовую зону страницы

UX/UI Design
Programming
SEO & SMM
Development
Верх страницы — это не «красивая шапка». Это кусок экрана до прокрутки: за три секунды должно быть ясно, кто вы, что предлагаете и куда нажать.
Первый кадр и объявление должны совпадать

До скролла человек уже решает, остаться или нет

С телефона стартовая зона ещё короче, чем в макете 1440. Логотип, меню, оффер, кнопка и телефон делят один экран. Если герой занят атмосферным фото без фразы и без действия, дальше даже сильные кейсы часто не дочитывают. На прототипе GO‑UP как раз рисуют главные экраны до остальной вёрстки: уникальный первый кадр, путь к заявке, адаптив. Реклама и поиск приводят на конкретный URL — верх обязан повторять обещание объявления, а не общий слоган «решения для бизнеса».
Оффер читается без догадок: услуга, для кого, чем отличаетесь
Одно главное действие — заявка, звонок или каталог
Доказательство рядом: цифра, срок, кейс, рейтинг — не набор иконок «качество»
Контакт не спрятан в бургере на мобайле
подробнее о нашем кейсе
Без скролла должны быть видны предложение и кнопка: иначе клик с рекламы сгорает на первом экране.
Шапка, герой, первый CTA

Из чего складывается верх, если он продаёт

Меню ведёт в разделы, но не подменяет оффер. Видеофон и слайдер из пяти баннеров на первом экране обычно крадут и скорость, и внимание: один сильный кадр плюс действие сильнее карусели.
01. Шапка: логотип, 3–6 пунктов меню, телефон, кнопка заявки
02. Заголовок и подзаголовок — смысл страницы, не девиз бренда
03. Кнопка с результатом («получить расчёт»), не «подробнее»
04. Короткий якорь доверия и визуал, который не душит текст
Шапка и герой — две разные задачи

Навигация не должна спорить с оффером

мощный старт с гарантией качества

Шапка: узнать компанию и дозвониться

Логотип ведёт на главную. Пункты — услуги, кейсы, цены или каталог, контакты. Телефон кликабелен. Заявка в шапке дублирует смысл героя, не открывает другую историю. На узком экране бургер нормален, если телефон и CTA остаются снаружи.

мощный старт с гарантией качества

Герой: зачем эта страница и что сделать сейчас

H1 совпадает с интентом URL: услуга, категория, город — не «добро пожаловать». Под ним — одно уточнение: срок, география, формат работы. Картинка или короткое видео подтверждают оффер (объект, продукт, команда), а не сток «рукопожатие». Форма в герое уместна, если полей мало; иначе кнопка ведёт к форме чуть ниже, но в зоне первого экрана на десктопе она всё равно видна.

Поля, формулировки, обрыв после клика

Почему форму не заполняют

01.
Слайдер из четырёх офферов
Каждый баннер — своя цель. Человек не выбирает, уходит.
02.
H1 про «инновации», услуга — в третьем абзаце
Поиск и реклама ждали конкретный запрос. Верх его не закрыл.
03.
Кнопка «узнать больше»
Скроллит в никуда. Нет заявки, нет звонка, нет каталога.
04.
Шапка на весь экран
Мегаменю и акция съели героя. Оффера не видно без скролла.
05.
Тяжёлая картинка, пустой текст
Секунды загрузки на 4G. Отказ до прочтения.
06.
Разный смысл в объявлении и в герое
Клик был про «вентиляцию для цеха», верх — про холдинг. Деньги сгорели на первом экране.
Пошаговый процесс

Как собрать форму, которую дожимают

Шаг №1
01.

Записать обещание страницы

Один запрос, одно действие. Сверить с title и с текстом объявления, если это посадка под трафик.
Шаг №2
02.

Собрать шапку

Короткое меню, телефон, CTA. На мобайле — что остаётся видимым вне бургера.
Шаг №3
03.

Сжать героя

H1, одна фраза, одна кнопка, одно доказательство. Визуал не перекрывает текст.
Шаг №4
04.

Проверить сгиб экрана

Десктоп и телефон: оффер и действие видны без прокрутки. Скорость — картинка сжата.
Шаг №5
05.

Замерить

Клик по CTA и отказ с первого экрана в Метрике. Если кликают в меню, а не в заявку — верх не дожимает.

Часто задаваемые вопросы

01.Нужен ли видеофон в герое?

Редко. Короткий ролик без звука может усилить продукт. Автостарт тяжёлого видео на мобайле чаще режет скорость и заявки.

02.Форма в первом экране или только кнопка?

На лендинге с одним оффером — короткая форма имеет смысл. На многостраничнике чаще кнопка и телефон: форма чуть ниже не должна выпадать из первого экрана на десктопе.

03.Сколько пунктов в меню?

Пока названия умещаются без мелкого кегля. Шесть сильных лучше двенадцати «ещё». Лишнее — в подменю или в подвал.

04.Главная и внутренняя — один и тот же верх?

Шапка общая. Герой — свой: на услуге другой H1 и другое доказательство, не копия главной.

05.Обязателен ли телефон в шапке?

Для услуг и локального бизнеса — да. Магазин может держать акцент на каталоге и корзине, но контакт всё равно ищут.

Остались вопросы?
Отвечаем на заявки за 15 минут