Короткий ответ
Единственного лучшего варианта нет, но публичные примеры показывают два рабочих подхода. GOV.UK ставит вперёд поиск и самые частые задачи; шаблон US Web Design System открывается героем, слоганом, коротким списком доказательств и одним призывом. Выберите подход по тому, что посетитель делает первым, и следите за скоростью на телефоне.
Что должен сделать первый экран главной страницы
Главную страницу читают секунды, поэтому первый экран решает, останется ли посетитель. Он должен сказать, для чего сайт, для кого он и что делать дальше. US Web Design System описывает героя именно так: он задаёт тон сайта и объясняет, о чём бренд, а состоит из заголовка, короткого пояснения и кнопки с призывом к действию.
Проверка проста. Покажите первый экран человеку на пять секунд и спросите, чем занимается компания и на что он нажмёт. Если ответ расплывчатый, украшения ниже его не исправят. Хорошие примеры дизайна главной страницы различаются стилем, но все отвечают на эти два вопроса без прокрутки.
GOV.UK: главная страница вокруг поиска и частых задач
Главная страница GOV.UK — удобный пример, потому что аудитория огромна и разнообразна. Она открывается простым заголовком «Лучшее место, чтобы найти государственные услуги и информацию» и строкой поиска сразу под ним. Дальше идёт список «Популярное на GOV.UK» со ссылками вроде входа в личные кабинеты и проверки прогноза государственной пенсии, поэтому самые частые дела находятся в одном клике.
Ниже всё сгруппировано в разделе «Услуги и информация»: пособия, бизнес и самозанятые, вождение и транспорт и ещё десяток тем. У каждой группы есть строка о том, что в неё входит, например налог на транспорт, техосмотр и водительские права у вождения. Урок для бизнеса — строка под каждой ссылкой. Голое «Услуги» заставляет гадать, а ссылка с пояснением помогает выбрать верно.
Меню устроено так же. В навигационной панели две группы — «Услуги и информация» и «Деятельность правительства», и вторая снова даёт каждому пункту строку, например у раздела «Исследования и статистика» — отчёты, анализ и официальная статистика. Две понятные группы с подсказкой лучше длинного списка названий, понятных только тем, кто их придумал.
Посадочный шаблон US Web Design System по блокам
US Web Design System публикует шаблон посадочной страницы, и он хорошо показывает подход, где ведёт сообщение. По порядку: шапка с местом под логотип, герой, раздел со слоганом, графический список из четырёх медиаблоков, вступительный раздел с крупной кнопкой призыва к действию и подвал с навигацией, ссылками на соцсети, телефоном и почтой ведомства. Последний элемент, идентификатор, показывает домен, головное ведомство и обязательные ссылки, такие как «О нас», «Поддержка доступности» и политика конфиденциальности.
Рекомендации к шаблону полезны не меньше макета. Сначала нужно провести исследование, чтобы решить, что говорить и что нужно пользователям, не добавлять формы и боковую навигацию и убирать любой ненужный компонент. Там же сказано, что шаблон может служить образцом для главной страницы, а шапку стоит рассмотреть на удаление, если страница должна вести к одному призыву.
Блоки, которые повторяются: ценность, доказательства, пути и контакты
Сложите два примера рядом, и одни и те же блоки окажутся под разными именами. Ценностная фраза — заголовок GOV.UK или герой со слоганом в USWDS. Доказательства — графический список, который, по словам шаблона, может подчёркивать ценности, направления работы или результаты. Пути — сгруппированные ссылки GOV.UK и медиаблоки шаблона. Контакты живут в подвале, где шаблон ставит телефон и почту.
Для небольшой компании это превращается в короткий список. Одна фраза с предложением. Несколько фактов или готовых работ в его поддержку. Пути к трём-четырём главным страницам: услуги, цены, кейсы. Заметный способ связаться. Всё остальное, от ленты новостей до ряда значков, должно доказать, что стоит рядом с этими четырьмя.
Поиск или сообщение: какой макет подходит вашему посетителю
Два примера — два ответа на один вопрос: что посетитель делает первым? На GOV.UK люди приходят с задачей и часто со словами в голове, поэтому вперёд выходят поиск и список задач. На посадочном шаблоне люди приходят, чтобы узнать и получить приглашение, поэтому вперёд выходят сообщение и кнопка.
Компании с несколькими услугами обычно подходит вариант с сообщением: объяснить, чем вы занимаетесь, и отправить на нужную страницу услуги. Компании с каталогом, множеством статей или разными клиентами раньше нужны пути и поиск. Какой бы вариант вы ни выбрали, одно главное действие должно оставаться на виду, а остальная страница — помогать ему, а не конкурировать.
Скорость и телефон: цифры web.dev
Главная, которая красиво выглядит, но медленно грузится, теряет посетителя раньше, чем он увидит дизайн. web.dev называет три показателя Core Web Vitals и их хорошие значения: Largest Contentful Paint — 2,5 секунды или меньше, Interaction to Next Paint — 200 миллисекунд или меньше, Cumulative Layout Shift — 0,1 или меньше. Их оценивают по 75-му процентилю загрузок страницы, отдельно для телефонов и компьютеров.
Largest Contentful Paint на главной странице часто определяет герой. По определению web.dev, он фиксирует время отрисовки самого крупного изображения, текстового блока или видео в видимой области, а значения выше 4,0 секунды считаются плохими. На практике первым делом стоит проверить тяжёлое фото героя. Тестируйте на настоящем телефоне при обычном соединении, а не только на офисном компьютере.
Два других показателя на главной важны тоже. Отклик на нажатие за 200 миллисекунд или быстрее оставляет меню и кнопку связи живыми. Сдвиг макета 0,1 или меньше означает, что кнопка не убегает при загрузке картинки, из-за чего люди и нажимают не туда.
Как измерять главную страницу после запуска
Мнения о главной дёшевы, цифры надёжнее. Справка Google Search Console определяет метрики отчёта об эффективности: показы — как часто кто-то видел ссылку на ваш сайт в Google; клики — как часто по ней переходили; CTR — клики, делённые на показы; средняя позиция, где 1 — самая верхняя. Данные можно разделить по устройствам, чтобы увидеть, ведут ли себя телефоны иначе.
Сопоставьте их с вашим собственным показателем важного действия, например отправленных заявок или начатых звонков, и меняйте что-то одно. Добавьте Core Web Vitals для той же страницы. Если первый экран переписан, клики из поиска остались прежними, а заявок стало больше, переписывание сработало на посетителей; если заявок меньше, проверьте скорость и первый экран, прежде чем винить трафик.
Что подготовить, прежде чем заказывать дизайн корпоративного сайта
Главную можно сделать самому, если предложение умещается в одну фразу и есть несколько настоящих фактов. Заказывать имеет смысл, когда сайт должен вмещать много услуг и страниц, хорошо работать на компьютере и телефоне и держать единую визуальную систему во всех шаблонах. Подготовьте предложение простыми словами, список нужных страниц, доказательства, логотип и цвета, а также примеры понравившихся главных страниц и объяснение почему.
Дизайн корпоративного сайта в VITON13 Studio, на странице услуги, — это карта сайта до 20 страниц и 6 шаблонов для компьютера и телефона с адаптивным UI-китом. Цена — от $113 с помощью ИИ или от $173 при работе человека, срок — 7–12 рабочих дней. Пришлите предложение и список страниц, и объём с ценой будут подтверждены письменно до начала работы.
Практический чеклист
- Напишите одну фразу о том, что предлагает сайт и кому, и поставьте её на первый экран.
- Выберите одно главное действие и держите его на виду без прокрутки.
- Составьте три-четыре пути, которые нужны посетителям, и добавьте строку под каждой ссылкой.
- Проверьте страницу на телефоне и сравните с LCP 2,5 с, INP 200 мс и CLS 0,1.
- Откройте Search Console, отфильтруйте по устройству и запишите клики, показы и CTR.
Вопросы и ответы
Какой пример дизайна главной страницы лучший?
Единого для всех нет. GOV.UK — хороший образец, когда посетители приходят с задачей, а посадочный шаблон US Web Design System — когда нужно объяснить предложение и пригласить к одному действию.
Какие бывают удачные макеты главной страницы?
Два публичных: макет с поиском, списком задач и сгруппированными ссылками, как на GOV.UK, и макет с сообщением, героем, слоганом, коротким списком доказательств и кнопкой, как в шаблоне USWDS.
Как должна выглядеть главная страница на телефоне?
Она должна без прокрутки называть предложение и главное действие, быстро грузиться и не прыгать. web.dev оценивает Core Web Vitals отдельно для телефонов и компьютеров, поэтому проверяйте телефонную версию саму по себе.
Нужна ли форма обратной связи на главной странице?
Не обязательно. Шаблон USWDS советует не усложнять и не добавлять формы и боковую навигацию. Многие компании ставят ссылку на страницу контактов, а телефон и почту размещают в подвале.
Как понять, что новая главная страница работает?
Следите за нужным действием, например заявками, и смотрите в Search Console клики, показы, CTR и позицию с фильтром по устройству. Сравнивайте цифры до и после каждого отдельного изменения.