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

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

Домашняя страница четко отвечает на вопросы «Кто мы?», «Что мы делаем?», «Чем мы будем полезны пользователю?» и т.д.

Если вы крупная и известная компания, вроде Coca-Cola, то вам не надо объяснять, чем вы занимаетесь — все и так это знают. Однако таких гигантов на рынке меньшинство, и компаниям поменьше необходимо показать посетителю, что он «пришел по адресу». Если человек, зайдя на сайт, не поймет в считанные секунды, что предлагает компания, то задерживаться он не будет.

Дизайн резонирует с целевой аудиторией

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

Домашняя страница содержит ценное предложение

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

Дизайн оптимизирован под разные устройства

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

Дизайн содержит призыв к действию

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

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

Дизайн всегда меняется

Лучшие домашние страницы — не статичны. Они постоянно меняются, подстраиваясь под нужды, проблемы и вопросы посетителей. Многие страницы также меняются после альфа- и бета-тестов, а также содержат динамический контент (это когда информация, показываемая пользователю на главной странице, меняется в зависимости от изменений специального параметра в URL-ссылке).

Дизайн эффективен

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

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

FreshBooks

Какие преимущества?

• Простота навигации. Если вы создаете длинную главную страницу, вам необходимо сделать ее удобной для скроллинга и чтения. Хороший пример представлен выше, перейдите на сайт и оцените сами.
• В призывах к действию отлично используются контраст и позиционирование, благодаря чему вам сразу становится ясно, на что компания хочет, чтобы вы обратили внимание. Особенно выделяется призыв «Начните бесплатно» — устоять перед таким весьма непросто :)
• На главной странице имеется раздел с отзывами реальных пользователей, что крайне положительно сказывается на доверии к компании.
• Также хорош подзаголовок: «Присоединитесь к 10 млн владельцев малого бизнеса, использующим FreshBooks» — в нем содержится весомый социальный аргумент, поскольку 10 млн — совсем не скромная цифра.

Airbnb

Какие преимущества?

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

Pixelgrade

Какие преимущества?

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

Mint

Какие преимущества?

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

Dropbox (Business)

Какие преимущества?

• Dropbox берет простым дизайном и брендированием: хорошо подобранное изображение и призыв к действию — «Попробуйте бесплатно (30 дней)».
• Подзаголовок простой, но сильный: «Работайте еще эффективнее с Dropbox Business».

4 Rivers Smokehouse

Какие преимущества?

• Когда заходишь на этот сайт, начинают течь слюнки. Отличные фотографии и слоган «Грудинка. 18 лет мастерства. Насладитесь сами» создают непреодолимое желание попробовать.
• Плавная прокрутка отправляет вас в тур по услугам фирмы, меню и фотографиям счастливых посетителей.
• Единственный минус — я живу слишком далеко от этого места :'(

Cobb Pediatric Therapy Services

Какие преимущества?

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

Melyssa Griffin

Какие преимущества?

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

Jill Konrath

Какие преимущества?

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

Evernote

Какие преимущества?

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

Telerik by Progress

Какие преимущества?

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

eWedding

Какие преимущества?

• Домашняя страница не перегружена и содержит только необходимые элементы, позволяющие пользователям с легкостью начать создание своего свадебного сайта.
• Отличный социальный аргумент — «Создано более 800 000 свадебных сайтов!».
• Страница сочетает отличный заголовок, визуализацию продуктов компании и призыв к действию.

Basecamp

Какие преимущества?

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

charity: water

Какие преимущества?

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

TechValidate

Какие преимущества?

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

Chipotle

Какие преимущества?

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

Medium

Какие преимущества?

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

Digiday

Какие преимущества?

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

KIND Snacks

Какие преимущества?

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

Ahrefs

Какие преимущества?

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

A24 Films

Какие преимущества?

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

Ellevest

Какие преимущества?

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

HubSpot

Какие преимущества?

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

Подведем итоги

Формула  идеальной домашней страницы содержит в себе несколько основных элементов:

1. Простая и удобная навигация
2. Яркие, контрастные и приятные цвета
3. Не перегруженный дизайн
4. Лаконичный призыв к действию
5. Отзывы реальных потребителей
6. Контакты, размещенные на видном месте
7. Текст на языке целевой группы
8. Социальные аргументы в пользу вашего продукта
9. Вкусные фото и видео, вызывающие желание попробовать то, что вы предлагаете
10. Обращение к эмоциям

Используйте это, и покорите всех посетителей вашего сайта с первого взгляда!

Cackle