Как сделать правильную главную страницу сайта

Алексей Андрусенко
Алексей Андрусенко 
Май 7, 2018 | 17 мин. чтения

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

Основная цель главной страницы сайта

Главная страница сайта — своеобразная визитная карточка интернет-ресурса, на которой должна быть изложена важная информация для клиента: сведения о компании, контактные данные, предложения и преимущества. Таким образом, к основным целям главной страницы относятся: презентация компании, привлечение аудитории и представление возможных услуг и/или товаров.

Виды главных страниц

Наполнение главной страницы непосредственно зависит от направленности сайта (продажа товаров, предоставление услуг, раскрутка бренда, блог, изложение информации и т. д.). Соответственно, существует множество видов главных страниц. Рассмотрим основные виды.

Главная страница интернет-магазина

Сайт-магазин, как правило, имеет более десятка страниц и сложную структуру. Правильная главная страница такого ресурса должна иметь следующие блоки информации:

  • каталог товаров (в котором товар разветвляется за счет фильтров: «цена», «бренд», «материал», «сезон» и т. д.)
  • сами товары (чаще всего представляются Топ-товары или Топ-объявления, по несколько представителей из каждой рубрики)
  • акционные предложения (скидки, уцененный товар, несколько вещей по цене одной и т. д.)
  • контакты для заказа и покупки (ссылка на бланк заказа, номера телефонов)
  • адрес (чаще всего указывается адрес главного офиса)

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

Пример главной страницы интернет-магазина

Главная страница сайта услуг

Второй по популярности вид Интернет-ресурсов — сайт услуг. Он рассчитан на презентацию списка услуг и всевозможных преимуществ компании-исполнителя. Здесь главная страница должна содержать такие блоки:

  • каталог услуг с перелинковкой на страницы, где они более детально представлены (если услуга одна, она максимально описывается на главной странице)
  • прайс (лучшие цены и предложения выносятся на главную, а полный список цен на услуги можно подать на другой странице, куда и ведет посетителя кнопка «Прайс»)
  • портфолио (фотографии выполненных компанией работ внушают доверие аудитории)
  • достоинства (необходимо убедить клиента, что лучше компанию он не найдет: здесь можно сроки выполнения работ, высококачественное редкое оборудование или указать стаж специалистов, их фотографии, образование и т. п.)
  • адрес (важно указать, где расположен главный офис, так как компания без офиса может смутить)

Кроме этого, множество сайтов выделяет на главной странице «Используемые инструменты», или «Для работы мы используем такие инструменты». Например, для услуги резки металла можно указать марку станков, их мощность, скорость работы и т. п.

Пример главной страницы сайта услуг

Главная страница сайта продукта

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

  • детальное описание продукта
  • сведения о компании (если сайт продукта это отдельный проект полноценного интернет-магазина, стоит также предоставить ссылку на главный ресурс)
  • прайс основного интернет-ресурса
  • контактные данные
  • четко выделенный призыв к действию «Купить» или «Заказать»
  • несколько фотографий продукта
  • видео-обзор продукта
  • отзывы о товаре
  • акционные предложения

Пример главной страницы сайта продукта

Что должно быть на любой главной?

Сделать главную страницу сайта правильной, можно только учитывая обязательные составляющие:

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

Пример того, что должно быть на любой главной

Заголовок и текст

Создавая текст для главной страницы, важно учитывать такие факторы:

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

Хороший текст поможет с продвижением сайта в поисковиках (например, содержать актуальные для продвижения услуги ключевые слова), а также поможет убедиться пользователю о правильности выбора.

Информация должна обновляться как можно чаще. Устаревшая информация не только не даст должного результата, но может и разочаровать многих посетителей.
Большое внимание стоит уделить заголовку. Он должен занимать не более одного короткого предложения и отображать суть бизнеса. Есть несколько типов заголовков, которые можно использовать:

  • заголовок-вопрос
  • заголовок-лозунг
  • заголовок-заявление
  • информационный заголовок
  • креативный заголовок
  • заголовок-цитата

В погоне за ответом на вопрос «Как должна выглядеть главная страница?» многие забывают о необходимости качественно прописать мета-теги Title и Description, задача которых отобразить суть сайта в сниппете поисковой выдачи. Поэтому рекомендуем прочитать статью о правильном составлении Title.

Контактные данные, формы обратной связи

Предоставить возможность клиенту быстро и бесплатно связаться с представителем компании — одна из основных задач любой компании. Контакты лучше разместить в шапке страницы, номера могут быть легкими (с повторяющимися цифрами) и запоминающимися.
Форма связи часто представляется в виде всплывающего окна с предложением «Закажите звонок, и наш менеджер свяжется с вами», «Задайте вопрос», и т. д. Но лучше представить такую функцию в форме вертикальной полосы, расположенной справа от основного текста (чтобы не закрывала контент сайта). Некоторые сайты оформляют для этого отдельную страницу.

Призыв к действию и возможность легкого выполнения действия

Любой сайт должен иметь ярко выделенную кнопку и короткое описание определенного действия: «просмотреть текст», «купить часы», «открыть вкладку». Такой призыв к действию должен быть убедительным и подталкивающим, например «чтобы ознакомиться с инструкцией, перейдите по ссылке».
Главная задача здесь — вызвать желание у клиента осуществить целевое действие. Текст на кнопке должен быть коротким и максимально информативным (желательно ограничится несколькими словами).

Пример призыва к действию

Удобный и понятный дизайн, хорошее юзабилити

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

Главное правило хорошего дизайна — «Дизайн не должен отвлекать клиента». Главной его задачей является оптимизация материала и функций сайта. Чтобы определится, какой дизайн лучше, важно четко определить целевую аудиторию.

Логотип

Именно логотип первым должен отвечать на вопрос гостя: «Что это за сайт?». Кроме того, его используют в качестве навигационной основы, с помощью которой юзер в любой момент может вернуться на главную страницу. Он размещается в верхнем углу страницы, реже по центру.

Примеры логотипов

Советы по главной странице бывают разные, но в ситуации с логотипом большинство мнений совпадает: он должен быть простым и запоминающимся (его должны узнавать из тысячи). Это может быть какой-то символ, необычно оформленное название компании или даже роспись, главное чтобы было креативно.

Навигация

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

Пример навигации по сайту

Шапка с логотипом и футер с технической информацией

Первое, что мы делаем, создавая страницу, — оформляем «шапку» и «подвал» (футер) ресурса. «Шапка» может содержать логотип компании, контактную информацию, меню. Многие забывают о «подвале», то есть нижней части, а зря! Дело в том, что многие посетители, прочитав весь текст, само собой опускаются вниз страницы, в надежде просмотреть еще что-то интересное или просто оценить веб-сайт. Поэтому, мы советуем поместить в футер (подвал) тематические и полезные ссылки, которые могут пригодиться посетителю.

Пример шапки с логотипом и футера с технической информацией

Хорошая цветовая гамма главной

Выбор цветовой гаммы должен основываться на таких правилах:

  • на странице не должно быть слишком много разных цветов (не более пяти), иначе это будет сильно отвлекать или даже раздражать посетителя
  • используемые цвета и оттенки должны гармонировать друг с другом
  • все элементы сайта рекомендовано оформлять одним и тем же набором цветов (это своеобразный опознавательный знак сайта)

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

Графика и мультимедиа

Использование одного лишь текста на странице — сухо и не интересно. Правильно оформить главную страницу сайта — это значит обогатить ее иллюстрациями в виде картинок, таблиц, графиков, коротких видео роликов. Стоит избегать большого количества данных вспомогательных элементов, чтобы не рассеять внимание зрителя (слишком много картинок отвлекают от текста). Важно использовать только высококачественные материалы с хорошим разрешением.

При поиске графики для сайта важно соблюдать авторские права. Для этого стоит использовать специальные стоки, где можно купить иллюстрации.

Что может быть на главной и не будет лишним

Значительно усилят симпатию посетителя к сайту такие элементы как:

  • видео-контент с кратким описанием сайта
  • товарные новинки / последние новости
  • фото компании / команды

Многие люди с уверенностью скажут: «лучше посмотреть видео, нежели читать». Это в особенности касается описания сайта. Для создания такого видео стоит пользоваться услугами профессионалов, так как эта презентация — лицо сайта.

Пример главной с видео-контентом и кратким описанием сайта

Использование товарных новинок и актуальных новостей подчеркнет тот факт, что сайт живой.

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

Топ 5 лучших примеров главных страниц интернет магазинов

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

1. Terrasport. Этот сайт может продать все что угодно. Здесь представлены наиболее яркие и привлекательные рекламные объявления. Кроме общих обязательных, грамотно расположенных элементов, здесь можно увидеть фильтры по увлечениям, популярным категориям и даже распродажам. Данный сайт имеет множество страниц, что при правильной структуре является огромным плюсом.

Пример главной страницы Terrasport

2. МКЛ. Сайт МКЛ — это яркий пример главной страницы сайта — простой и эффективный.

Он отличается:

  • простым и запоминающимся логотипом
  • четкой структурой
  • ограниченным количеством цветов
  • динамической рекламой

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

Пример главной страницы сайта МКЛ

3. Merit. Данный интернет-магазин является примером сложно структурированного сайта. Здесь достаточно много всего: отдельными блоками выделены бренды, акции, новинки и т. д. Главным преимуществом страницы является динамичность и удачное расположение всех элементов. Контакты представлены тремя номерами разных мобильных операторов, а также стационарным номером. Четко разграниченные разделы для быстрой навигации по товарам.

Пример главной страницы сайта Merit

4. Parfums. Простой дизайн и четкая структура данного ресурса направлены на акцентированное внимание на парфюм, подчеркивание его красочности. Это способствует направлению внимания только на товар, а не на сайт, что дает свои результаты. Страниц здесь очень много, но запутаться достаточно сложно, из-за наличия четких фильтров.

Пример главной страницы сайта Parfums

5. Люксоптика. Это хороший пример главной страницы интернет-магазина: приятная цветовая гамма сайта, предоставленные в центре страницы акционные предложения, фильтр по категориям и популярные товары. Также на главной выведены все необходимое для клиента этой сети — список врачей, оффлайн салоны Люксоптики, онлайн-запись и т. д.

Пример главной страницы сайта Люксоптика

Топ 5 лучших примеров главных страниц продуктов/услуг

1. Promex. Почему главная компании Промэкс лучшая?

  • использованы все обязательные составляющие главной страницы
  • привычное расположение элементов (логотип, контактные данные, запрос на расчет и отправку сообщения, и т. д.)
  • необычная динамичная картинка, которая запомнится многим посетителям
  • запоминающийся логотип
  • наличие сертификатов
  • возможность выбрать свой город
  • наличие преимуществ и примеров работ

Пример главной страницы сайта Promex

2. Alessandro. Этот сайт представлен в мягком ненавязчивом тоне, соответственно, к услугам, которые он представляет. Оригинально представленный список услуг: короткий текст под тематической картинкой, кликнув на которую можно перейти на отдельную услугу и детально ознакомится с ней. Меняющаяся главная картинка с особыми предложениями, высветленными в лучших красках. Здесь также представлены работы мастеров и текст о компании.

Пример главной страницы сайта Alessandro

3. Goodfix. На сайте нет ничего лишнего: сразу к делу! Невооруженным взглядом видно, что страница создавалась с целью заинтересовать и оставить человека, которому нужен ремонт ноутбука или ПК.

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

Пример главной страницы сайта Goodfix

4. Antonika Varizko Photografy. Данный сайт информирует об услугах фотографа. На странице несложный, но креативный дизайн и привычное расположение навигации, которое помогает клиенту быстрее совершить необходимое действие.

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

Пример главной страницы сайта Antonika Varizko Photografy

5. Art 79. Пример бюджетного сайта, который отвечает на все вопросы посетителя. Это доказательство того, что даже с минимальным бюджетом можно сделать полезный сайт.

Пример главной страницы сайта Art 79

Заключение

Лучшие главные страницы — это всего лишь пример качественного оформления, не ограничивайтесь этими идеями. Ваша фантазия — главное средство достижения идеального результата.

В погоне за совершенством избегайте ловушек: не перегружайте домашнюю страницу лишними элементами.

Используйте «Вебвизор», чтобы понять поведение и потребности посетителей. Внедряйте наши советы и у вас получиться создать работающее лицо вашего онлайн-ресурса!

Оставить комментарий

Ваша эл. почта не будет опубликована. Обязательные поля помечены *

Ваш комментарий*
Представьтесь*
Эл. почта*
Адрес сайта

Получайте больше пользы!
Анонсы лучших статей об интернет-маркетинге и продвижении сайтов, новости области, скидки на мероприятия и другие бонусы — только для подписчиков!