Главная страница ᐈ Как оформить главную страницу сайта

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

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

Из статьи вы узнаете:

1. Зачем нужна домашняя страница
2. Какая информация должна быть на главной странице
3. Требования к главной странице сайта 
4. Оформление главной страницы в зависимости от вида сайта
5. Дизайн главной страницы сайта
6. Примеры оформления главной страницы сайта
7. Шпаргалка: как правильно создать главную страницу сайта

Зачем нужна домашняя страница

Цель любого бизнеса — получить прибыль. В этом контексте главная страница — ваш представитель на переговорах. Она должна убедить потенциального клиента купить товар или услугу именно у вас.

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

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

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

Статья по теме:

Что такое лендинг и как его создать

Читать статью

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

• о компании
• чем она занимается
• что предлагает
• почему стоит купить именно здесь
• куда двигаться дальше

О компании

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

Сам логотип должен быть простым и запоминающимся. Это может быть иллюстрация, фирменный шрифт или эмблема. Нажав на логотип, можно вернуться на домашнюю страницу.

hostiq.ua

Чем занимается компания

Здесь не нужно рассказывать историю создания и как много всего вы предлагаете: для этого есть специальные разделы. Одной фразой или предложением опишите основное направление деятельности.

zagariya-design.com.ua

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

Что вы предлагаете

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

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

nutsking.com.ua

Пробуйте качественный хостинг с рейтингом 9,7 из 10 баллов
на основе 1900 отзывов клиентов!

Тестировать 30 дней бесплатно

Почему стоит купить именно здесь

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

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

Сформировать доверие к бренду помогут отзывы других клиентов, список ваших партнеров, рейтинг компании среди конкурентов. Только не пишите «‎мы в 20-ке лучших»: четко укажите ваше место в конкретном рейтинге. Если оно не выглядит достаточно привлекательным и убедительным, не вызывает у вас чувства гордости, лучше об этом не пишите.

vps.ua

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

Куда двигаться дальше

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

hostiq.ua

Требования к главной странице сайта 

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

Заголовок и торговое предложение

Заголовок скажет посетителю, на какой сайт он попал, и стоит ли ему здесь задержаться. Уникальное торговое предложение поможет удержать человека на главной странице и заинтересовать в вашей услуге.

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

nutsking.com.ua

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

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

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

Призыв к действию, или call to action — один из способов провести клиента в глубь сайта. Яркие и заметные кнопки с короткими надписями «сравнить тариф», «получить скидку», «перейти к хостингу» стимулируют посетителя лучше узнать продукт, протестировать его или получить более подробную информацию.

shmed.com.ua

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

Нужен сайт?
Сделать сайт самому для бизнеса или хобби с нашими готовыми решениями легко как раз-два-три. Бесплатный тест 30 дней!

Создать сайт

Подписка

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

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

foxtrot.com.ua

Контактные данные

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

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

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

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

spellchocolate.com

Хедер и футер

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

privatbank.ua

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

comfy.ua

Навигация

Навигация по сайту включает два основных пункта:

• меню навигации;
• расположение основных элементов на сайте.

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

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

french-shop.com.ua

Больше о навигации на сайте можно почитать в Бюро Горбунова.

Изображения

Изображение привлекает внимание и создает эмоцию быстрее, чем текст. Фото пляжа с лазурной водой на сайте туроператора вызовет больше желания посмотреть программу тура, чем сам заголовок. Именно поэтому картинки для главной страницы сайта нужны независимо от его тематики. Это могут быть фото товаров, результатов или процесса работы, иллюстрации, связанные с вашим продуктом. Важно, чтобы изображение передавало суть статьи, раскрывало преимущества продукта. Читайте о том, как подобрать сильную иллюстрацию, в инструкции Модульбанка. 

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

svetoteh.com

Помните, что больше не всегда хорошо. Картинка на главной странице сайта должна быть уместна, а самих картинок не должно быть слишком много.

Поиск по сайту

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

rozetka.com.ua

Статья по теме:

10 плагинов WordPress для поиска по сайту

Читать статью

Оформление главной страницы в зависимости от вида сайта

Как говорили выше, набор элементов на домашней странице будет отличаться в зависимости от того, какой это вид сайта:

• интернет-магазин
• сайт услуг
• инфопортал

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

Интернет-магазин

Такой сайт обычно предлагает большой ассортимент продукции, чтобы максимальное количество покупателей нашли то, за чем пришли. Главная страница интернет-магазина устроена так, чтобы помочь клиенту сориентироваться, привлечь его внимание к отдельным товарам и прорекламировать новинки.

Исходя из этих задач, в структуре главной страницы интернет-магазина есть:

• визуализация основных категорий товаров — помимо стандартного перечисления в хедере используют иконки продуктов;
• баннер со скидками и крупными акциями;
• акции и скидки — баннер на главной странице сайта используют для крупных акций, в то время как в раздел с акционными предложениями выносят конкретные наименования и показывают выгоду для покупателя;
• разделы «Хит продаж», «Топ-предложения», «Товар дня»;
• новости, обзоры, рейтинги — сюда попадают превью статей, видео-обзоры и сравнение товаров.

Статья по теме:

Как создать и открыть свой интернет-магазин

Читать статью

Сайт услуг

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

Чтобы этому помочь, оформление главной страницы сайта включает:

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

upgrade-yourself.com.uaupgrade-yourself.com.ua

Информационный портал

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

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

edition.cnn.com

Любите продавать?
Держите хостинг для интернет-магазина с гарантированным аптаймом и +30% экономии при годичной оплате

Продавать с HOSTiQ.ua!

Дизайн главной страницы сайта

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

Кроссбраузерность и удобство пользования 

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

Цветовое решение

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

Одна мысль на одном экране

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

tesla.com

Если информации много, и на один экран она не влазит, подумайте, можно ли ее сократить. Если необходим весь текст, используйте контент-слайды с боковой прокруткой.

Информационное единство

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

doctor.kharkov.ua

Статья по теме:

Обзор книги «Дизайн для недизайнеров»: базовые принципы дизайна красивого сайта

Читать статью

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

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

Сладости Spell

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

spellchocolate.com

Школа искусств St.Art

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

starts.com.ua

Конный клуб Пассаж

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

passage.kh.ua

Шпаргалка: как правильно создать главную страницу сайта

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

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

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

Поделитесь опытом, как вы оформляли главную своего сайта: на что обращали внимание в первую очередь, где искали идеи, что еще добавили бы к нашему списку.

Yana

Выполняет роль Scrum-мастера в технических командах, ведет проекты, настраивает процессы и следит, чтобы они работали. Любит порядок, тайм-менеджмент и общение с людьми.

Как правильно оформить главную страницу сайта, что должно быть на главной странице сайта

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

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

Что должно быть на главной странице сайта, как увеличить ее конверсию и как определить ее успех? Обо всем этом поговорим в сегодняшней статье!

Почему главная страница так важна

Тони Хайль (Tony Haile) из Chartbeat утверждает, что у сайта есть всего 15 секунд, чтобы заинтересовать посетителя, иначе он неимоверно пойдет искать дальше то, что не смог найти на вашем ресурсе. Это совсем не значит, что у вас нет удовлетворяющей пользователя информации, может быть, она есть, но находится, например, в конце страницы либо в другом разделе. Но пользователь до туда не дошел, так как сайт не произвел особого впечатления.

Основные задачи главной страницы:

• Информационная. Рассказывает посетителю куда именно он зашел, какие услуги предоставляет компания и чем она вообще занимается.
• Направляющая. Быстрое перемещение между всеми разделами – одна из ключевых функций. Не должно быть такого, что какой-то важный раздел был «зарыт в дебрях». Навигация может быть организована с помощью меню либо активных кнопок.
• Продающая. Доверие компании повышается с помощью демонстрации преимуществ, выгод для пользователя, а также хорошим маркетинговым ходом.
• Коммуникативная. Без коммуникации сейчас никуда. Если на главной странице не будет никаких способов взаимодействия с вами, то о высокой конверсии можно забыть.

Реализация всех задач выполняется за счет правильно структурированной страницы, ее стиля, удобства, простоты. Несмотря на то, что бывают разные типы сайтов (интернет-магазин, блог, новостной сайт и т.п.), существует стандартный набор элементов, без которых главная страница любого веб-ресурса будет выглядеть непонятной и неудобной. Что это за элементы – поговорим далее.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Что должно быть на главной странице сайта

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

Первый экран

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

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

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

Следом за подзаголовком идет призыв к действию. Иногда бывает, что подзаголовок вовсе опускают и вместо него сразу прописывают призыв к действию. Его цель – подтолкнуть пользователя кликнуть по кнопке, которая предназначена для оформления заявки, просмотра дополнительной информации либо чего-то другого. Например, «Оставьте заявку сейчас и получите 10% скидку на уборку вашего дома» либо «Рассчитайте стоимость уборки под ваши задачи и получите мойку 1 окна в подарок».

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

Название кнопки происходит от призыва к действию: если вы призываете оставить заявку, то и кнопку называйте так же («Оставить заявку»). Если призываете рассчитать стоимость, то и кнопка будет называться «Рассчитать стоимость».

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

Вот несколько примеров удачного первого экрана:

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

Преимущества

Расскажите, почему клиент должен сотрудничать именно с вами. Здесь важно написать все кратко и по делу. Не нужно писать фразы вроде «Гарантия качества 100%», «Сделаем все в сроки» и так далее. Этим давно уже никого не зацепить. Следует писать конкретику, например «Гарантируем 100% качество деталей: каждое изделие проходит профессиональную проверку до ввода в эксплуатацию».

Чаще всего подобные преимущества состоят из заголовка и основного текстового контента. Выглядеть это может так:

Либо вот так:

И еще один пример:

Информация о компании

Рассказать о своей компании можно в нескольких предложениях. Важным здесь будет фотография персонала. Счастливая фотография коллектива – залог успеха. Если ваш сайт посвящен вовсе не компании, а предназначен для продажи каких-либо товаров, то можно рассказать о его создателе. Напишите о себе, расскажите, что значит для вас бизнес, которым вы руководите.

Выглядеть это может так:

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

Дополнительное предложение

Чтобы привлечь еще больше потенциальных клиентов с домашней страницы, предложите полезный контент, если таковой имеется. Это может быть:

• путеводитель или руководство;
• электронная книга;
• видеокурс.

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

Выглядеть это может так:

Или так:

Социальное доказательство

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

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

Вот так, например, можно оформить портфолио:

Либо так:

Отзывы, как правило, размещаются внизу страницы. Если у вас их нет, то лучше их не придумывать, так как этот блок в целом играет сомнительную роль: все давно устали от фейковых отзывов. Но вот если вы синхронизируйтесь с реальными отзывами из Флампа либо Яндекса, тогда это придаст экспертности.

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

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

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

И по традиции несколько примеров:

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

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

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

Главное правило хорошего дизайна – дизайн не должен отвлекать клиента. Главной задачей является оптимизация материала и функций сайта.

Вот список ресурсов, где вы сможете найти хорошие примеры сайтов разных типов и стилистик:

• Behance,
• MadeOnTilda,
• Land-book.

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

Оптимизация для мобильных устройств

Без мобильных гаджетов сегодня никуда – большая часть посетителей заходит на сайт со смартфонов или планшетов, поэтому особенно важно проработать этот аспект. Кроме того, оптимизация для мобильных устройств играет особую роль для поисковых систем. Если ваш сайт не будет хорошо оптимизирован под мобильные устройства, то Google и Яндекс будут плохо на это реагировать.

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

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

Дополнительные рекомендации

Простота – залог успеха

Еще раз вспомните про удобство использования – все должно быть максимально просто. Это касается как самого интерфейса, так и дизайна. Не стоит добавлять кучу ненужных элементов ради дизайна – такой подход скорее отпугнет посетителя, нежели привлечет.

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

Используйте фотографии хорошего качества

Мало кому захочется смотреть на некачественные фотографии – всегда помните об этом. Если у вас нет под рукой хорошего фотоаппарата, то загружайте стоковые картинки, но подбирайте их с умом. Важно, чтобы они полностью соответствовали тематике. Также не рекомендуется оставлять сайт совсем без фотографий – так он будет казаться скучным и неинтересным. Вполне хватит 3-5 изображений на одну небольшую страницу.

Найти бесплатные картинки вы можете в следующих сервисах:

• Unsplash,
• Pixabay,
• Pexels.

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

Проводите A/B-тесты

Бывает, что измененная страница увеличивает конверсию сайта, но часто сложно понять, из-за чего это произошло. То ли дизайн стал привлекательным, то ли интерфейс –простым. В таких случаях используют A/B-тестирование (сплит-тестирование).

A/B-тесты подразумевают запуск нескольких альтернативных версий одинаковой страницы. Их цель – определить, какой элемент вызвал наиболее высокую конверсию. Здесь важно, чтобы вы не меняли много элементов, иначе будет сложно определить, какой фактор повлиял на результат.

Начать тестирование можно, например, с простого изменения цвета кнопок или всей офферной конструкции. Постепенно меняйте элементы и смотрите на результат. A/B-тесты – это долгий процесс, который требует времени и анализа.

Анализ результатов

Регулярно анализируйте свой веб-сайт – для таких задач существуют специальные сервисы.

Подключите сайт к Яндекс.Метрике – она позволит отследить просмотры, последние поисковые фразы, с каких устройств и из какого города к вам чаще всего заходят. Кроме того, с помощью данного инструмента можно анализировать клики по номеру телефона, почте, а также отслеживать, когда была отправлена заявка через форму.

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

Google Search Console – аналог Вебмастера от Google, а Google Analytics – аналог Яндекс.Метрики.

Учитывайте рекомендации данных сервисов, и тогда ваш сайт будет популярным. Удачи!

31 Эффективные примеры дизайна домашней страницы и идеи для вашего веб-сайта

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

Думайте о своей домашней странице как о привлекательном доме. Это первое, что видят многие люди, когда заходят на ваш сайт, поэтому вы хотите удивить их, как только страница загрузится.

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

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

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

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

Преимущества хорошо спроектированной домашней страницы

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

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

Что вам нужно на вашей домашней странице? Чего будет ожидать ваша аудитория? И какие элементы имеют приоритет?

Ответив на эти вопросы, вы получите информацию, необходимую для улучшения дизайна домашней страницы. В веб-дизайне элементы домашней страницы имеют очень специфическое назначение.

Помощь целевой аудитории в знакомстве с вашим бизнесом

Многие посетители вашего веб-сайта сначала найдут вашу домашнюю страницу. Имея это в виду, вам нужно произвести сильное первое впечатление.

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

Улучшение взаимодействия с пользователем на вашем веб-сайте

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

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

Получение большего количества конверсий

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

Сделав эту информацию легко доступной на своей домашней странице, вы увидите рост числа конверсий.

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

Повышение узнаваемости бренда

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

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

Какие проблемы клиентов вы решаете? Как вы улучшаете жизнь своих клиентов — личную или профессиональную?

Не заставляйте аудиторию своего веб-сайта выяснять и догадываться, чем вы занимаетесь. Дайте понять с самого начала.

Как создать домашнюю страницу веб-сайта

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

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

Лучшие примеры дизайна домашней страницы (и почему они работают)

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

1. Dropbox

Я уже упоминал Dropbox как отличный пример хорошего маркетинга. Домашняя страница компании ничем не отличается. У вас есть немного перекошенное главное изображение, которое привлекает внимание, и два CTA, один из которых использует темный фон, чтобы привлечь больше внимания, поскольку он предназначен для платной версии инструмента.

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

2. Slack

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

Slack дает понять, что посетители должны делать. Они могут войти или создать учетную запись. Здесь у нас больше вариантов навигации, чем у Dropbox, но каждый помогает посетителям найти то, что они хотят.

3. Green Mountain Energy

Я приведу еще один пример нестандартной графики. Green Mountain Energy не оставляет сомнений в предназначении компании. Он хочет обеспечить чистую энергию по доступной цене. Есть два одинаковых CTA — один для частных клиентов и один для владельцев бизнеса — которые используют контрастные цвета, чтобы привлечь внимание.

4. CarMax

Компания CarMax столкнулась с уникальной проблемой при разработке своей домашней страницы. Компания и покупает, и продает автомобили, поэтому ей нужно было обслуживать обе аудитории. Как видите, у CarMax это получается.

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

5. thredUP

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

Надеюсь, вы не сделаете последнее.

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

6.

StudioPress

Минимум элементов, плоские иллюстрации и приглушенные цвета делают дизайн домашней страницы StudioPress сияющим. Благодаря тексту вы точно знаете, что StudioPress делает для своих клиентов: «Создавайте потрясающие сайты на WordPress». Затем у вас есть три CTA на выбор в зависимости от того, как вы хотите действовать.

7. Healthline

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

Это пример дизайна «показ, а не рассказ». Вместо большого заголовка, который гласит: «Мы публикуем статьи о здоровье», Healthline демонстрирует этот факт множеством заголовков статей и выдержек вверху страницы. У вас также есть доступ к гамбургер-меню в шапке, которое может помочь вам перейти к тому, что вы хотите, и простой ссылке на информационный бюллетень сайта.

8. Crazy Egg

Вы же не думали, что я напишу эту статью без Crazy Egg, не так ли? Главная страница этого веб-сайта направлена ​​исключительно на то, чтобы побудить посетителя вставить свой URL-адрес для просмотра тепловой карты. Также есть ссылка, чтобы начать 30-дневную бесплатную пробную версию, рядом с которой находится фраза «Отменить в любое время».

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

Когда вы нажимаете ссылку «Подробнее», главная страница расширяется и содержит еще больше информации о том, как Crazy Egg помогает владельцам веб-сайтов повышать конверсию.

9. Abacus Plumbing

Это сильно отличается от других примеров на этой странице, но мне очень нравится, как Abacus Plumbing структурировала свою домашнюю страницу.

Это может показаться немного загроможденным, но эта домашняя страница содержит массу социальных доказательств. Аккредитованный логотип BBB, количество отзывов и слова «Вы можете на нас рассчитывать» расположены в стратегически важных местах.

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

10. триваго

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

11. Century21

Слово «неумолимый» привлекло мое внимание, когда я впервые увидел этот дизайн домашней страницы. Если бы вы нанимали риелтора, разве вы не хотели бы, чтобы он или она были безжалостны? Я бы.

Дизайн домашней страницы привлекательный и идеально подходит для аудитории Century21. Особое внимание уделяется поиску свойств сразу с главной страницы, но у вас также есть доступ к полезной навигации.

12. Marc Jacobs

Никто никогда не назовет меня экспертом в области моды, но мне нравится общий дизайн домашней страницы на сайте Mark Jacobs. Он минималистичный и изысканный, что подходит целевой аудитории, а креативный копирайтинг привлекает внимание посетителей.

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

13. Лаура Уортингтон Шрифты

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

В то же время элементы не кажутся загроможденными, и вы сразу понимаете, что продает Лаура Уортингтон.

14. Skype

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

Тогда у вас есть три вещи, для которых люди используют Skype: общение, чат и совместная работа. Кнопка CTA с синим фоном и белым текстом красиво привлекает к себе внимание.

15. Fitness Blender

От логотипа до маркетинговой копии Fitnessblender создал потрясающую домашнюю страницу. Со всеми деньгами, которые люди тратят на фитнес-индустрию, приятно и убедительно видеть сообщение, которое обещает видео с тренировками, которые не стоят денег. Запишите меня!

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

16. Nest

Копия и изображения занимают центральное место в дизайне домашней страницы Nest. В этом примере я вижу некоторые элементы дизайна Apple. У вас есть продукт, представленный во всех его цветах, и слоган «Экономия энергии никогда не выйдет из моды». CTA «Купить сейчас» сообщает посетителям, что именно им следует делать дальше.

17. Toastmasters International

Хотя поначалу дизайн домашней страницы Toastmasters International может показаться немного устаревшим, вы должны помнить о ее целевой аудитории. Организация хочет привлекать людей — обычно лидеров бизнеса — и у нее это хорошо получается. Мне нравятся фоновые изображения и текст заголовка. Кроме того, цвета соответствуют тону и голосу, который организация хочет выразить.

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

18. Bookouture

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

19. Гарантем

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

Особого внимания заслуживает CTA. Он большой, фон высококонтрастный, а цвет фона напоминает цвета логотипа Surem. Все сочетается без проблем.

20. Горячая линия по предотвращению самоубийств

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

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

21. L’Oursin

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

22. The Motley Fool

Многие люди используют The Motley Fool исключительно для статей о финансах, но компания предлагает гораздо больше. Вы заметите, что на странице выделяется один элемент — желтая кнопка CTA с надписью «Последние цены на акции». Если вы нажмете на нее, вы перейдете к платным услугам компании, которые включают в себя предоставление вам выбора акций от аналитиков и экспертов.

23. FindLaw

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

24. UnitedHealthcare

Если вы знакомы с психологией цвета в маркетинге, то знаете, что синий цвет часто используется как символ здоровья и эмоционального исцеления.

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

25. Количество просмотров

Если вы смотрите мои видео на YouTube, вы знаете, что у нас с Адамом есть регулярная серия по четвергам, где мы отвечаем на вопросы людей, оставивших комментарии к предыдущим видео. Бизнес Адама, Viewership.com, направлен на то, чтобы помочь людям воспользоваться преимуществами видеомаркетинга.

Дизайн домашней страницы идеален. Мы видим розово-красный цвет только в двух местах и ​​зеленый цвет только в двух местах. Вот как Viewership привлекает внимание посетителей к соответствующим частям страницы.

26. Lyft

В моей предыдущей статье о лучших примерах домашних страниц я использовал Uber в качестве одного из своих вариантов. Тогда будет справедливо, если я упомяну Lyft здесь. Это фантастическая домашняя страница, которая использует умную пользовательскую иллюстрацию для привлечения зрителей и включает в себя высококонтрастную кнопку CTA. Он также успешно обслуживает как райдеров, так и водителей.

27. hubEngage

Мне нравится дизайн домашней страницы hubEngage, потому что он серьезный и привлекательный. «Раскройте потенциал вовлеченных сотрудников». Это единственная цель бизнеса. Затем у вас есть окно чата в правом нижнем углу, что является отличным решением UX, и актуальное изображение героя.

28. Старбакс

Почему мы не закрываемся на ура? Starbucks не новичок в маркетинге. Компания установила высокую планку для любой другой кофейни, и дизайн ее домашней страницы регулярно меняется в зависимости от продуктов, которые Starbucks хочет продвигать.

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

29. Copyblogger

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

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

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

Люди хорошо реагируют на визуальные образы. На самом деле, почти 60 процентов клиентов, опрошенных в ходе одного исследования, сказали, что они скорее будут взаимодействовать с красиво оформленной веб-страницей, чем с просто оформленной. Потребители оценивают ваш бизнес по внешнему виду домашней страницы.

30. Uber

Любой, кто меня знает, скажет вам, что я ненавижу водить машину. Я всегда звоню в Uber, чтобы меня забрали.

Я также большой поклонник веб-сайта Uber. Он предлагает один из лучших дизайнов домашней страницы, который я видел за долгое время.

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

Это непростая задача, особенно когда на странице так мало слов.

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

Это два совершенно разных сегмента рынка. Тем не менее, это как-то работает.

Обратите внимание на выбор изображения. Парень за рулем явно водитель Uber, но он смотрит прямо в камеру — ты . Если вы хотите заказать Uber, это тот человек, с которым вам было бы комфортно садиться в машину. Или, если вы хотите работать неполный рабочий день, он тот, чей успех вы хотели бы повторить.

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

31.

Rosetta Stone

Если вы не знакомы с Rosetta Stone, это набор инструментов, предназначенных для помощи в изучении иностранного языка. Он находится в верхней части ценового диапазона, но по-прежнему пользуется огромной популярностью.

Кроме того, это один из лучших примеров домашней страницы, которые я видел для сайта электронной коммерции.

Мы снова имеем дело с изображением героя, на этот раз мирского путешественника, который использует свой телефон — якобы для доступа к приложению Rosetta Stone.

Почему это работает: Rosetta Stone лидирует благодаря своему основному УТП: технологии TruAccent. Дополнительные преимущества технологии отличают ее от конкурентов и делают ее более эффективной, помогая людям овладеть языковыми навыками.

Тогда у вас есть еще одно ценностное предложение: компания работает уже 25 лет. Есть также социальное доказательство: «Самое надежное языковое решение…»

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

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

Эта домашняя страница отлично справляется с привлечением внимания посетителя и предоставляет множество мест для изучения, не отвлекая посетителя от основного CTA.

Контрольный список оптимизации домашней страницы

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

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

Вот удобный контрольный список того, что нужно включить на свою домашнюю страницу, чтобы улучшить ее и повысить конверсию.

1. Напишите сильный и четкий заголовок

Каждый из трех приведенных выше примеров имеет четкий, конкретный заголовок для привязки страницы. Давайте рассмотрим каждый заголовок здесь:

• Создайте авторитет в Интернете с помощью мощного контент-маркетинга
• Доберись туда — твой день принадлежит тебе
• Единственное языковое программное обеспечение с TruAccent™ — лучшей в мире технологией распознавания речи. 903:50

Очевидно, что они очень разные, но у них есть несколько общих черт.

Во-первых, они используют сильные слова. Это слова, которые сразу вызывают эмоции или связывают с читателем.

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

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

Тогда у вас есть Розеттский камень, который использует такие слова, как «только» и «лучший в мире», чтобы передать доверие и авторитет. Эти слова подразумевают, что Rosetta Stone — это все, что вам нужно для достижения ваших целей.

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

2. Не путайте своих пользователей

Одна из наиболее распространенных проблем, которые я замечаю на домашних страницах, — конфликтующие CTA.

По возможности избегайте конфликтующих CTA. У вас может быть более одного варианта, но ясно дайте понять, что есть один призыв к действию, который вы хотите, чтобы ваши посетители выполняли конкретно. Вы можете увидеть, как Uber и Rosetta Stone сделали это в приведенных выше примерах, сделав альтернативные CTA меньше и менее очевидными.

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

Другими словами, будьте проще.

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

3. Добавьте прямую и большую кнопку CTA для предложения

Ваш CTA — это то место, на котором посетители должны сосредоточить свое внимание. Это приглашение: вот что делать дальше!

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

Кроме того, убедитесь, что вы используете призыв к действию, который имеет смысл и передает ценность. Призыв к действию вроде «Подписаться сейчас» меня не волнует. Измените его на: «Подпишитесь сейчас, чтобы получить бесплатное тематическое исследование». Теперь мне интересно.

4. Используйте контрастные цвета

Я очень люблю контрасты на своих сайтах. Вы увидите мой фирменный оранжевый цвет на NeilPatel.com и Neil Patel Digital.

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

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

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

5. Держите предложение в верхней части страницы

Посетители вашего веб-сайта могут никогда не прокручивать страницу дальше первой страницы. Это просто факт. Если вы спрячете свое предложение под сгибом страницы, многие посетители его никогда не увидят.

Как вы можете видеть из лучших примеров домашней страницы, которые я упомянул выше, каждая из них включает предложение или УТП (уникальное торговое предложение) вверху страницы. Это видно с момента прихода посетителя.

Как узнать, что работает, а что нет на вашей домашней странице

Веб-дизайн крайне субъективен. Мне может нравиться дизайн сайта, а вам он может не нравиться. Нет способа угодить всем.

Однако вы можете угодить большинству людей, которые посещают ваш сайт. Как? Вы выясняете, что работает, а что нет, основываясь на положительной реакции большинства посетителей вашего сайта.

Crazy Egg позволяет создавать отчеты о поведении пользователей на вашем сайте. Вы увидите, где люди нажимают, прокручивают и иным образом реагируют на элементы дизайна.

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

Склонны ли люди пропускать ваш призыв к действию, когда приходят с Facebook? Возможно, ваши посты в Facebook не соответствуют дизайну вашего сайта.

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

После сбора этой информации создайте две версии своего веб-сайта. Представьте одну версию половине ваших посетителей, а другую — остальным. Этот процесс A/B-тестирования отдельных элементов поможет вам улучшить свой сайт, чтобы он идеально подходил для вашей целевой аудитории.

Заключение

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

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

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

Как только вы это сделаете, вы создадите машину для преобразования веб-сайтов.

Как создать лучшую домашнюю страницу за 3 шага

Иллюстрация Тридиба Даса

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

Но если домашняя страница является таким жизненно важным компонентом веб-сайта, как же многие ошибаются? Ниже мы углубимся в это подробнее и рассмотрим некоторые распространенные ошибки, которых следует избегать.

Домашняя страница с современной плоской графикой. Изображение предоставлено Adobe Stock Photos.

Дом там, где сердце

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

В идеале посетитель, попадающий на вашу домашнюю страницу, должен понять, о чем вы, за 10 секунд или меньше. Изображение предоставлено Adobe Stock Photos.

Правило 10 секунд

В большинстве случаев впечатления посетителей от вашей главной страницы влияют на то, сколько времени они проводят на вашем сайте в целом. Исследование, проведенное Nielsen Norman Group, сравнило время, проведенное на веб-сайте, с распределением Вейбулла — концепцией, используемой для анализа «времени до отказа» пользователя. Другими словами, время, необходимое пользователю для отказа, зависит от количества времени, которое пользователь провел на главной странице.

Исследование, проведенное Чао Лю и его коллегами, показало, что 99% веб-сайтов имеют 10-секундное окно возможностей. Это означает, что посетители решат, хотят ли они остаться или уйти в течение 10 секунд.

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

Иллюстрация руки, нажимающей кнопку пуска. Изображение предоставлено Adobe Stock Photos.

Как создавать домашние страницы с учетом микровзаимодействий

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

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

Имея это в виду, вы можете задать себе вопрос: «С чего мне начать?»

1. Начните с посетителя

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

2. Определите макет

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

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

Типографика

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

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

Образы

То, что мы видим, влияет на наши решения, чувства и ожидания. В кулинарии даже есть поговорка: «Ешь глазами». То же самое относится и к главной странице веб-сайта. В первую очередь мы решаем глазами, поэтому убедитесь, что вы выбираете изображения, которые могут быть связаны с вашим посетителем. Демонстрирует ли это проблему, которую они пытаются решить? Отображает ли он эмоции, которые они могут испытывать?

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

Ваши изображения также должны рассказывать историю, поддерживающую цели бизнеса. Это означает, что вы хотите, чтобы изображение показывало, как пользователь покупает продукт или усыновляет собаку, чтобы оно поддерживало потребность бизнеса в превращении посетителя в покупателя.

Композиция

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

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

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

Иллюстрация домашней страницы, отображаемой на мобильном телефоне, планшете, ноутбуке и настольном компьютере. Изображение предоставлено Adobe Stock Photos.

3. Рассмотрим платформу

Когда Apple выпустила первый iPhone в июне 2007 года, она познакомила нас с новыми возможностями просмотра веб-страниц. Теперь у нас есть еще больше устройств для просмотра веб-сайтов с разными разрешениями экрана. Посетитель может впервые увидеть домашнюю страницу на мобильном или любом другом устройстве, поэтому адаптивный дизайн так важен.

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

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

Дизайн для мобильных устройств — не единственный способ создать удобный веб-сайт. Понимание контекста использования также является информативным. Контекст использования относится к среде, в которой посетитель часто посещает веб-сайт. Это у них дома? В ожидании автобуса? На поезде? Это поможет вам определить, какая платформа должна быть приоритетной.

Понимание того, где, когда и как ваш пользователь может взаимодействовать с вашей домашней страницей, поможет вам принять решение о дизайне. Изображение предоставлено Adobe Stock Photos.

Психология, стоящая за дизайном

Психология играет существенную роль в дизайне UX, и хороший дизайн домашней страницы воспользуется этим. Двумя очень полезными психологическими принципами являются закон Хика и эффект фон Ресторффа.

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

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

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

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

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

Иллюстрационная концепция главной страницы веб-сайта. Изображение предоставлено Adobe Stock Photos.

Заключение

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

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

This entry was posted in Популярное