Для любой компании главная страница сайта – виртуальная парадная дверь. Если посетителю не нравится то, что он видит, не сомневайтесь, он нажмет кнопку «Назад».
Как сделать оформление сайта привлекательным? При этом он должен быть не просто красивым – он также должен работать. Вот почему самые лучшие домашние страницы в этом списке выигрывают не только в красоте, но и в гениальности.
Что делает хороший дизайн главной страницы сайта
1) Дизайн главной страницы четко отвечает на вопрос «Кто я?», «Что я предлагаю?» и/или «Что пользователь может сделать здесь?»
Если вы представляете хорошо известный бренд (например, Coca-Cola), вам может сойти с рук отсутствие описания того, кто вы и что вы делаете. Но большинство компаний должны отвечать на эти вопросы, так чтобы каждый посетитель знал, что он находится в «нужном месте». Если пользователи в течение нескольких секунд не смогут понять, что вы делаете, долго они не задержаться.
2) Резонанс с целевой аудиторией
Главная страница должна говорить с целевой аудиторией на ее языке. Лучшие оформления сайтов примеры избегают «корпоративной абракадабры» и устраняют все лишнее и отвлекающее.
3) Сообщение о ценном предложении
Когда пользователь заглядывает на главную страницу, его нужно заставить остаться. Она является лучшим местом, чтобы выразить смысл своего товара или услуг в одном предложении так, чтобы пользователь решил остаться на вашем сайте и не ушел к конкурентам.
4) Юзабилити
Все варианты дизайна, рассмотренные ниже, весьма удобны: на них легко ориентироваться, на них нет «кричащих» объектов. Например, флэш-баннеров, анимации, всплывающих окон или чрезмерно сложных и ненужных элементов. Многие из них также оптимизированы под мобильные устройства, что очень важно в современных условиях.
5) Включает в себя призыв к действию (СТА-элемент)
На каждой из рассмотренных ниже главной странице эффективно использованы первичный и вторичный призывы к действию, чтобы направить посетителей к следующему логическому шагу. Например, «Бесплатная пробная версия», «Купить сейчас» или «Подробнее».
Помните, что цель главной страницы — удержать посетителей на сайте и провести их до конца воронки конверсии. СТА-элемент говорит им, что делать дальше чтобы, пользователи не испытали потрясение и не растерялись. Что еще более важно, СТА-элемент превращает главную страницу сайта в продающую или привлекающую потенциальных клиентов.
6) Постоянно изменяется
Лучшие главные страницы не всегда статичны. Некоторые из них, как WhiteHouse.gov, постоянно меняются с учетом потребностей, проблем и вопросов пользователей.
7) Использует отличный общий дизайн
Хорошо продуманное оформление сайтов — залог успеха в построении доверительных отношений пользователей с брендом, настройке связи с целевой аудиторией и продвижении в воронке конверсии. По сути, эти главные страницы эффективно используют размещение CTA-элементов, пробелы, цвета, шрифты и другие вспомогательные элементы.
Вдохновляющий веб-дизайн: 16 лучших дизайнов главной страницы
1) FreshBooks
Этот дизайн гениален, потому что:
- Прост в использовании. Возникает много споров о том, какие домашние страницы лучше — короткие или длинные. Если вы выберете последний вариант, то должны обеспечить легкое прокручивание и чтение. Эта страница выглядит практически как история;
- Удачно использовано сочетание цветов и позиционирование первичных СТА-элементов. Когда заходите на главную страницу сразу становится понятно, что компания хочет привлечь ваше внимание;
- Очень заманчивый текст на СТА-элементе: «Попробуйте бесплатно в течение 30 дней»;
- Эффектный подзаголовок: «Для более чем 5 миллионов людей, использующих FreshBooks, отправлять счета и следить за расходами теперь не проблема». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, «мучительно сложно» для фрилансеров и владельцев малого бизнеса.
2) Airbnb
- Это оформление главной страницы сайта пример впечатляет: она встречает посетителей полноэкранным видео с красивыми кадрами, высокого разрешения. Она рассказывает о путешественниках, которые проводят время, как будто они местные жители: готовят пищу на кухне, покупают местные сыры. Выглядит очень естественно и достоверно;
- Прямо по центру главной страницы располагается форма поиска с местом назначения и датой прибытия/отбытия, которую ищет большинство посетителей, направляя пользователей к следующему логическому шагу;
- Форма поиска «умная«: она автоматически отобразит последний поиск пользователя, если тот авторизован;
- Основной призыв к действию («Поиск«) контрастирует с фоном и выделяется, а вторичный призыв к действию виден в верней части.
3) Mint
- Это супер простой дизайн с сильным заголовком и подзаголовком без сленга;
- Домашняя страница обеспечивает безопасную, но спокойную атмосферу, что очень важно для продукта, который обрабатывает финансовую информацию;
- Он также содержит простой и убедительный призыв к действию: «Зарегистрируйтесь бесплатно«. Дизайн CTA также замечателен — иконка в виде замочка попадает точно в цель, сообщая о безопасности еще раз.
4) Dropbox(Consumer)
- Главная страница сайта Dropbox — пример предельной простоты. Ограничено использование рекламы и видеороликов, а также объединено все фоновое пространство;
- По статическому скриншоту выше трудно понять, но этот оформления сайтов вариант привлекает внимание тонким использованием причудливой анимации в графике;
- Подзаголовок — простой, но мощный: «Открывайте свои файлы где угодно и на любых устройствах, и без труда предоставляйте к ним доступ». Не нужно расшифровывать какую-либо терминологию, чтобы понять, что делает Dropbox;
- Акцент на одном первичном призыве к действию: «Зарегистрируйтесь бесплатно«.
5) Dropbox(Business)
- Это яркий пример обеспечения поддержки сайта для разной аудитории. Она отличается от главной страницы, которая изначально была создана для потребителя (смотрите выше). Бизнес-пользователи требуют больше информации, а также дополнительное подтверждение того, что Dropbox(Business) — безопасное и масштабируемое решение для компаний (проблему восприятия Dropbox решает непосредственно на своей домашней странице);
- Dropbox по-прежнему продолжает применять простой дизайн и брендинг. Он включает в себя только то, что важно: большое изображение с поддержкой рекламы и кнопку «Попробуй бесплатную 30-дневную ознакомительную версию«, призывающую к действию.
6) Whitehouse.gov
- Создание сайта, который выступает за целую нацию — задача не из легких. Whitehouse.govпостоянно меняется, чтобы отразить главные проблемы и приоритеты. Тестирование и оптимизация — ключевой компонент блестящего дизайна домашней страницы;
- Что особенно замечательно в Whitehouse.gov так это отличие от большинства сайтов, связанных c правительством. Он имеет чистый дизайн и способствует развитию сообщества;
- Довольно легко найти то, что вы ищете, когда оказываетесь здесь. А если вы не можете сразу найти то, что нужно, есть удобное поле поиска.
7) 4 Rivers Smokehouse
- В сочетании с большой картинкой для оформления сайта заголовок «ГРУДИНКА. 18 лет мастерства. Для вашего удовольствия» звучит заманчиво;
- Прокрутка параллакса проведет для вас краткую презентацию услуг, меню и покажет людей, прекрасно проводящих время – прекрасное использование популярного дизайнерского тренда.
8) Cobb Pediatric Therapy Services
- Заголовок и подзаголовок обращаются к эмоциональной стороне посетителей: «Работайте с компанией. Это стоит того. Доверьтесь нам. Мы были там тоже. Мы найдем вам работу там, где вы сможете полностью проявить себя» Это предложение является уникальным и убедительным;
- Заголовок находится на вращающейся карусели, которая учитывает категорию посетителей, от соискателей до людей, ищущих психотерапевта для своих школ;
- Есть несколько путей для посетителей, по которым можно пройти на страницу. Но призы к действию расположены хорошо, сформулированы просто и контрастируют с остальной частью страницы.
9) Jill Konrath
- Дизайн простой и переходит прямо к делу. Из заголовка и подзаголовка сразу понятно, чем занимается Джилл Конрэт (и как она может помочь вашему бизнесу);
- Также предоставляется легкий доступ к аналитическим материалам Джил, что важно для установления ее авторитета в качестве основного докладчика;
- Легко подписаться на рассылку новостей и установить контакт – два ее основных призыва к действию;
- Включает в себя логотипы новостных каналов и отзывы, как социальное признание – все правила оформления сайта соблюдены.
10) Evernote
- За эти годы Evernote превратился из простого приложения, сохраняющего записи в набор инструментов для бизнеса. Это не всегда легко передать на домашней странице, но Evernoteпроделал хорошую работу по компоновке возможных сообщений в несколько ключевых преимуществ;
- Эта домашняя страница использует сочетание насыщенных, приглушенных цветов в видео, а также подписи ярко-зеленого и белого цвета, чтобы выделить их на общем фоне;
- После простого заголовка («Помни все»), взгляд останавливается на призыве к действию «Зарегистрируйтесь Бесплатно».
11) Telerik by Progress
- «Скучное предприятие» — это не то чувство, которое возникнет, когда вы зайдете на сайт Telerik. Компания предлагает множество технологий и продуктов, использует смелые цвета, интересные дизайны и видеосъемку с энергетикой подобно Google. Одним из важных аспектов является создание обстановки, чтобы посетители чувствовали себя желанными и знали, что имеют дело с реальными людьми;
- Мне нравится простой, выполненный на высоком уровне обзор шести товарных предложений. Это абсолютно понятный способ сообщить о том, что делает компания;
- Реклама несерьезная и легко читается. Они говорят на языке своих клиентов.
12) Boxbee
- Заголовок представляет собой призыв к действию, направленный прямо на целевую аудиторию: предпринимателей, работающих в индустрии хранения данных;
- Оформление главной страницы сайта имеет чистый и простой дизайн. Он подчеркивает заголовок, а затем сразу же демонстрирует первичный призыв к действию;
- Этот первичный призыв к действию выделяется за счет контрастного цвета.
13) eWedding
- Для влюбленных, планирующих важный день, eWedding – прекрасное место для создания свадебного сайта. Домашняя страница не загромождена и включает в себя только необходимые элементы;
- Подзаголовок «Создано более чем 800,000 свадебных сайтов!» — это большое социальное доказательство;
- Включает в себя отличные видеоролики продукта, отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: «Создайте сайт».
14) Basecamp
- В течение долгого времени страницы Basecamp были удивительными и здесь можно понять почему. У них всегда эффектные заголовки и умная анимация;
- Призыв к действию выделен жирным шрифтом и находится в верхней части страницы;
- В этом случае компания выбрала домашнюю страницу более похожую на блог, которая предоставляет намного больше информации о продукте.
15) charity: water
- Это не типичный некоммерческий сайт. Большое количество видеороликов, творческой рекламы и использование интерактивного веб-дизайна выделяют его;
- Анимированный заголовок в оформлении сайта — отличный способ собрать множество сообщений в одной строке;
- Правильное использование видео и фото, особенно в плане получения эмоций, которые вызывает действие.
16) TechValidate
- Эта домашняя страница красиво оформлена. Особенно нравится использование белого пространства и контрастных цветов, а также клиент ориентированный дизайн;
- Заголовок ясен и убедителен, как и призывы к действию;
- Также есть отличная информационная иерархия, которая позволяет легко сканировать и быстро понимать страницу.