Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн главной страницы сайта: как оформить, и какая информация должна быть на домашней странице, чтобы сайт впечатлял и приводил клиентов
Останется пользователь на странице или тут же закроет её — зависит от дизайна. А вот заинтересуется ли он вашими услугами и оставит ли заявку — решает контент и маркетинговая проработка. С Главной страницы начинается знакомство с компанией, поэтому на ней не должно быть просадок.
Оглавление
- Функции и задачи главной страницы сайта
- Какие разделы и блоки должны быть на главной странице сайта
- Главная страница сайта компании
- Главная страница сайта интернет магазина
- Главная страница сайта визитки
- Персональный сайт: какой должна быть главная страница
- Главная страница информационного сайта
- Дизайн главной страницы
- Текст на главную страницу сайта: что написать
- Тестирование вариантов главной страницы сайта
- Правила и требования к главной странице сайта
- Ошибки главных страниц сайтов
- 7 примеров оформления самых крутых главных страниц сайта
- Чек-лист правильной главной страницы сайта
Функции и задачи главной страницы сайта
Главная страница сайта должна давать ясные ответы на ключевые вопросы: чей это сайт, какие товары или услуги можно заказать, как получить дополнительную информацию о компании или продукте, как связаться или оставить заявку.
-
Знакомство с компанией, её товарами, услугами
Главная страница сайта формирует первое впечатление о вас. Если страница выглядит неряшливо, захламлёно, на ней нет важной информации, она не показывает, кто вы или что предлагаете, то не рассчитывайте на положительное мнение о компании или продукте.
Казалось бы, красивая страница сайта по доставке цветов, но как-то не хочется тут оставаться и выбирать букет: фото товара затемнены так, что разглядеть сложно. Разделов не видно, надо где-то искать их в меню. Зато на фоне летают снежинки =))
А вот похожий сайт доставки цветов, и да, немного не дотягивает визуально, но здесь всё просто и понятно. Хорошо виден продукт, удобная навигация, понятно, что предлагается, и в чём преимущества заказа именно здесь, контакты видно сразу.
Навигация: главная страница, как холл с множеством дверей
Быстрое и удобное перемещение по сайту одно из важных правил при его проектировании. У пользователя не должно возникать трудностей с поиском нужной страницы или с пониманием, где может находиться та или иная информация.
Основной элемент навигации на сайте — меню со ссылками на страницы, разделы, формы.
Основной элемент навигации на сайте — меню со ссылками на страницы, разделы, формы.
Навигационное меню на сайте производителя мебели ЛМЗ. Проект WebValley Studio
Если меню слишком большое, его нужно проектировать: организовать так, чтобы навигация была удобной и понятной. Например, разбить по группам разделы и подразделы в интернет-магазине или на большом корпоративном сайте.
Меню второго уровня вложенности на сайте оптики. Проект WebValley Studio
Можно убрать в скрытое меню менее важные разделы.
Пример, когда на сайте важны только две страницы, все остальные было решено перенести в бургерное меню, чтобы не акцентировать на них внимание. Проект WebValley Studio
Помимо меню, сами блоки сайта также могут выполнять функцию навигации. Например, при скролле страницы интернет-магазина, пользователь видит блоки каталога, специальные предложения, распродажи. На Главной сразу понятно, что предлагается на этом сайте, с неё можно перейти в нужный раздел, провалиться глубже.
С Главной можно перейти в Каталог, на страницу О компании, в Контакты
Главная страница — как холл со множеством дверей, которая нативно и последовательно ведёт на важные разделы сайта.
Формирование доверия и продажи
Главная страница формирует доверие посетителя и стимулирует его, плавно подводя к покупке. Для этого используются блоки доверия: отзывы, кейсы, сертификаты, гарантии, подробное прозрачное описание товаров и услуг.
Контент должен быть качественный: грамотно сформулированный текст, профессиональные фотографии продукта, современные иллюстрации или видеоматериалы.
Контент должен быть качественный: грамотно сформулированный текст, профессиональные фотографии продукта, современные иллюстрации или видеоматериалы.
Пример первого экрана сайта по разработке планов эвакуации, где качественно сформирован заголовок, изображение отражает суть продукта и выгодно смотрится на тёмном фоне. Проект WebValley Studio
Фото не должны быть пиксельными или не подходить под стилистику оформления, не должны быть обрезанными или с неправильно поставленным кадром.
Пример отличной обложки Главной страницы если бы не одно, но — плохо откадрированная фотография медицинского оборудования портит всё впечатление и выглядит неряшливо, а неправильно подобранный фильтр усугубляет общее впечатление ещё больше.
А вот пример более удачной обложки, где всё выглядит гармонично и целостно. Проект WebValley Studio
Коммуникация с брендом и вовлечение
Главная страница должна не только информировать и направлять посетителей, но и побуждать их к активным действиям. Хорошо выстроенная коммуникация на сайте формирует доверие, увеличивает лояльность, улучшает пользовательский опыт.
Текст на Главной странице может быть строгим и официальным или дружелюбным. Всё зависит от ваших целей. Но, в любом случае, он должен быть в тему, не смущать и не напрягать пользователей. Тон общения должен быть уместным для той аудитории, к которой вы обращаетесь.
Текст на Главной странице может быть строгим и официальным или дружелюбным. Всё зависит от ваших целей. Но, в любом случае, он должен быть в тему, не смущать и не напрягать пользователей. Тон общения должен быть уместным для той аудитории, к которой вы обращаетесь.
Приветственный блок на сайте юриста
Абзац крупным планом с предыдущего примера сайта юриста. Попробуйте прочитать одно предложение в этом большом массиве текста (да-да, весь абзац — это одно предложение). А теперь попробуйте понять всё то, что в этом блоке написали. Сложная терминология привычна для юристов, они так общаются и это норма, но если подумать, то кто целевая аудитория сайта юриста? Другие юристы? Нет, это обычные люди, не юристы, которые не разбираются в юридических вопросах, поэтому и обратились за помощью к специалисту. Им сложно прочитать и понять весь этот перегруженный официальный текст. Не надо так писать. Кроме того, этот абзац текста просто бесполезен. Что он несёт для пользователя? Он не раскрывает сути услуг, не показывает экспертизу юриста, не отвечает на вопрос, чем он может помочь клиенту, и почему он может сделать это лучше других. Одна вода и прописные истины.
А вот пример удачного стиля общения на сайте тату-мастера, который будет понятен и ученому, и домохозяйке
Чтобы вовлечь пользователя в коммуникацию можно предложить перейти и подробнее почитать информацию о товаре или услуге, подписаться на рассылку, получить скидку, оставить отзыв.
Пример взаимодействия с посетителем сайта — компания предлагает оставить заявку и получить бонус в виде бесплатной проверки зрения. Проект WebValley Studio
Какие разделы и блоки должны быть на главной странице сайта: прорабатываем структуру и информационное наполнение
Нет идеальной структуры продающей Главной страницы. У каждого бизнеса своя специфика. Информация, которая критически важна на сайте одной компании, может быть бесполезна на сайте другой. Поэтому мы не просто привели список блоков, но и объяснили, какую роль выполняет каждый на Главной странице сайта, чтобы вам было проще определиться, насколько он важен для вашего бизнеса.
-
Размер главной страницы сайта
Главная страница может быть как километровой, так и одноэкранником, нет единственного правильного варианта. Всё зависит от ниши, осведомлённости клиентов о продукте и компании, от целей сайта и других факторов.
Пример Главной страницы сайта-визитки юриста в один экран. На первый взгляд — для юриста это нереально мало: никакого подтверждения экспертности, примеров выигранных дел, услуг и условий сотрудничества. Но если Евгения Герасимова ведёт на эту страницу только свою тёплую, прогретую аудиторию, которая с ней уже знакома и знает, на что способен этот юрист, то хватит и одноэкранника.
Сейчас есть тренд на краткость, но вы точно должны понимать: зачем вы ограничились одним экраном. Достаточно этого, чтобы заинтересовать пользователя? Не всегда такая стратегия будет удачной, так как первый блок страницы обычно разжигает интерес у посетителя, побуждая его скролить дальше, и если пользователь не получит ожидаемого, он просто уйдёт.
Не путайте одноэкранник с горизонтальным скроллом, ведь такой сайт тоже как будто в одном экране, но, на самом деле, у него есть продолжение, просто скролится сайт не вниз, как все привыкли, а вбок.
Не путайте одноэкранник с горизонтальным скроллом, ведь такой сайт тоже как будто в одном экране, но, на самом деле, у него есть продолжение, просто скролится сайт не вниз, как все привыкли, а вбок.
Пример многоэкранного сайта с горизонтальным скроллом
А вот пример очень длинной Главной страницы сайта:
Главная страница сайта коуча. Около 25 экранов — и это тоже нормально, учитывая специфику ниши
Обложка — главный экран страницы
Обложка — первое, что видит пользователь, заходя на страницу. Пользователь должен сразу понять, где он, и что тут предлагают. Не нужно борщить: с первого экрана, наваливать кучу спецэффектов или креатива, если у вас нет задачи сделать конкурсную работу для площадки типа Awwwards и подобных. В бизнесе важно не отпугнуть посетителя, а привлечь его внимание понятным офером и приятным дизайном. Или дать ему сразу то, зачем он пришел.
Пример не очень удачного первого экрана: визуал устарел и не совсем понятно, какие именно услуги оказывает юрист, на каком праве специализируется.
А вот пример красивого и современного оформления первого экрана сайта. Вот только не совсем понятно, что тут предлагают, особенно если пользователь не знаком с терминологией.
Пример удачного первого экрана Главной страницы юридической фирмы. Понятный заголовок с названием компании и хорошо сформированный офер, сразу ориентируют посетителя, где он, какие услуги здесь предлагают, и почему стоит сотрудничать с этой фирмой. И даже отсутствие фото в обложке здесь к месту — уж точно лучше, чем стоковые фото юристов =)) Проект WebValley Studio
Первый экран интернет-магазина может содержать баннеры и карточки популярных или акционных товаров, и не иметь заголовка. Хотя с точки зрения продвижения, лучше спроектировать первый экран Главной страницы так, чтобы заголовок всё-таки был.
Первый экран маркетплейса Ozon
Но, если вы не такой гигант, как Озон, а бутиковый салон, например, магазин элитных шуб, где сильна имиджевая составляющая, то не стоит пренебрегать офером и размещать кучу карточек с товарами по акции на первом экране.
Первый экран интернет-магазина элитных шуб ALBINEL. Салон по продаже настолько дорогого продукта не должен выглядеть как пёстрая ярмарка с кучей акций. Здесь важно дать посетителю понимание, куда он попал, и что ему предлагают. При этом, выдержать эстетику чистоты и минимализма, чтобы подчеркнуть эксклюзивность и элитность продукта. Проект WebValley Studio
Сравним два первых экрана домашних страниц компаний в сфере дизайна интерьера.
К какой из них захочется обратиться?
К какой из них захочется обратиться?
Сайт студии дизайна интерьера, у которого в обложке навалено всё, что только можно. Текст на фоне картинки нечитаемый, картинка под тонной текста, плашек, форм и кнопок — потерялась, не производит WOW-эффект.
Студия дизайна интерьера INGAIN. Чистый эстетичный первый экран. «Создаём дизайн интерьера, комфортный для каждого члена семьи. Наши проекты служат долгие годы. Интерьеры INGAIN — это гармоничное сочетание функциональности и визуальной эстетики пространства». Текст в обложке всё сказал сам за себя. Компания не только делает стильные и современные ремонты, но и заботится о каждом покупателе и качестве продукта. Проект WebValley Studio
Заголовок главной страницы сайта
Заголовок сайта должен сразу дать понять, где человек находится, что ему предлагают, и в чём уникальность продукта. Если цель страницы продать, то важно составить грамотный офер, который будет передавать уникальность предложения.
Чётко и понятно рассказали посетителю, что за компания перед ним, чем она занимается, в каких вопросах может помочь. А офер сразу закрывает боли ЦА: решим всё за вас, защитим бизнес, проконсультируем бесплатно.
Если сайт — визитная карточка компании, расскажите о том, что это за компания, и чем занимается:
На Главной сразу обозначена сфера деятельности, и чем компания может помочь. Сайт Attack Shark. Проект студентки WebValley Academy Алёны Чаплинской
Понятный и полезный заголовок на Главной странице курса онлайн-школы Citadel
Вся суть услуг компании уложена в заголовке на Главной странице логистического оператора Cargo Amur
Для сайта-визитки специалиста важно не только представиться, но и обозначить цель — продать свои услуги или познакомить с работами и кейсами.
Обложка сайта-визитки пластического хирурга. Дизайнер мастерски вписал в минималистичный формат и персону хирурга, и обозначил спектр его услуг, отобразив их в виде индивидуальных иконок. Сразу понятно, что перед нами пластический хирург, и понятно, с какими проблемными зонами он в силах помочь. Хочется поскролить дальше.
Качественный офер должен раскрывать уникальность вашего предложения, то, чем вы выгодно отличаетесь от своих конкурентов, а не просто показать направление деятельности компании.
Преимущества на главной странице сайта
Если ваша цель продать продукт на сайте, либо себя, как компанию, блок с преимуществами нужен. Важно в этом блоке рассказать не о том, какие вы классные, а о том, какую выгоду получит покупатель ваших товаров или услуг.
Блоки преимуществ на сайте неоновых вывесок Neon Show. Проект WebValley Studio
Если сайт информационный и цель Главной страницы — навигационная, то блок с преимуществами, скорее всего, не нужен. Если он будет на Главной — это никак не просадит конверсию. Просто в этом случае можно без него обойтись, чтобы не нагружать лишней информацией посетителя.
Информация о компании на главной — всегда ли нужна
Информация о компании на Главной странице помогает повысить доверие пользователей к бренду, создать положительное впечатление.
Когда точно стоит знакомить с компанией:
Когда точно стоит знакомить с компанией:
- Если у вас сайт-визитка или корпоративный сайт, то есть, компания — важное действующее лицо, нужно запомниться аудитории;
- Услуга предполагает экспертность, а значит, вам надо продать не только саму услугу, но и компанию, как эксперта.
- При этом нужно помнить, что много текста на Главной — плохо. Портянку вряд ли станут читать, поэтому лучше разместить часть информации — превью — на Главной странице, а более детально рассказать уже на странице О компании, куда пользователь может перейти по желанию.
Пример блока о компании в виде аккуратных карточек на Главной странице
Когда информация о компании на Главной странице необязательна:
- Если вы известный бренд, который не требует представления, например, Apple;
- Если вы крупный магазин, маркетплейс, типа Яндекс Маркет, и у Главной страницы совсем другие задачи. Информация о компании здесь будет лишней;
- Также важно понимать, что первично: продукт или компания. Если первичен продукт, например, услуга лазерной эпиляции, то пользователю интереснее узнать об особенностях и преимуществах услуги, аппарате, на котором оказывается услуга, квалификации мастера. Информация о салоне, в котором проходит процедура — вторична, и без неё на Главной можно обойтись.
Информация о продукте и ценах
Всегда исходите из целей сайта. Если ваша цель — продать товар или услугу, цена на Главной странице должна быть. Когда пользователю не надо обшаривать глубины сайта, чтобы узнать цены, это повышает конверсию. Единственно, не надо борщить и вываливать на Главную страницу весь прайс.
Сайт производителя неоновых вывесок Neon Show. На Главной странице обозначена цена на основную услугу — изготовление неоновой вывески на заказ. Компания оказывает и другие услуги: обрамление неоном, аренда неоновых вывесок, установка смарт-освещения, мастер-классы. Но это не приоритетные услуги, поэтому нет смысла вываливать их на Главную.
Пример слева — на Главной странице вывалена тонна информации о тарифах. Пользователь вынужден вчитываться и погружаться, чтобы понять, в чём разница между разными пакетами. Но цель Главной — познакомить с предложением, а не рассказать всё. Правильнее создать отдельные страницы под каждую услугу и уже там подробно изложить всё. На Главной странице достаточно показать превью тарифов и возможность перейти на страницу с подробной информацией — пример справа.
Не бойтесь, что пользователь сразу уйдёт с сайта, как только увидит цены. Если цен на Главной нет — это всегда серьёзная просадка конверсии. Если цены есть, но они высоковаты — просадка конверсии возможна, но небольшая, по сравнению с полным отсутствием цен. Кроме того, такая просадка мнимая, потому что связана с тем, что вы отсекли не своего клиента — тех людей, которые всё равно бы отвалились, когда узнали цены, пообщавшись с менеджером.
Если сайт информационный или имиджевый, то цены тут второстепенны, на Главную их можно не выносить. Но тогда и не стоит ждать продаж от сайта.
Если сайт информационный или имиджевый, то цены тут второстепенны, на Главную их можно не выносить. Но тогда и не стоит ждать продаж от сайта.
Блоки доверия
Блоки доверия на Главной хорошо влияют на имидж компании и конверсию, создавая положительный образ вокруг бренда. Они дожимают пользователя, если у него остались сомнения, стоит ли заказывать ваш продукт.
К таким блокам можно отнести отзывы, кейсы в портфолио, награды и сертификаты. Важно, чтобы они были значимыми и действительно классными, а не просто, чтобы были, «все делают и я сделаю».
К таким блокам можно отнести отзывы, кейсы в портфолио, награды и сертификаты. Важно, чтобы они были значимыми и действительно классными, а не просто, чтобы были, «все делают и я сделаю».
-
Отзывы
Отзывы — это ваши рекомендации. Отзывы на Главной странице надо красиво оформить. Сейчас модно наскриншотить отзывы из WhatsApp, и вывалить их на Главную страницу, типа так больше доверия. Это не так. Есть десятки сервисов фейковой переписки, наклепать таких отзывов можно по 5 вёдер в час. Поэтому доверия они не добавят, а визуал попортят.
Для повышения доверия лучше добавить возможность подтвердить личность автора, например, указать ник в соцсети, или показать отзыв в привязке к выполненной работе, например, отзыв фотомодели и конкретная фотосессия, отзыв магазина и конкретная вывеска, смонтированная на фасаде этого магазина.
На сайте студии WebValley Studio можно не только почитать отзыв, но и найти контакты довольного клиента, а также посмотреть кейс проекта, который был выполнен для заказчика.
-
Сертификаты, награды, премии, достижения, рейтинги
Если у компании есть сертификаты или награды, то их стоит выносить на Главную страницу, только если они реально ценные, значимые для клиента. Указать документы об образовании и повышении квалификации лечащего доктора — ок, разместить диплом за III место в «Зеленом марафоне», чем бы эта херня ни была — не ок. Пользователю должна быть очевидна связь между вашим достижением и его выгодой. Когда вы выкладываете на Главную патент на технологию Acu-I — вам кажется, что это серьёзное преимущество. Но пользователю так не кажется. Он не видит связи между своей проблемой и этим патентом, а значит, документ просто занимает место на странице, вместо того, чтобы работать на повышение доверия и конверсии.
Карусель сертификатов на сайте Revive System. Обычно такие блоки сложно сделать красиво, так как все сертификаты и дипломы имеют разный формат, дизайн и качество фоток редко хорошее, из-за чего блок смотрится неаккуратно и разношёрстно. Отличным выходом будет создать карусель, где можно разместить любое количество картинок, а не вываливать кучу скриншотов сразу на экран. Проект WebValley Studio
Если документы выглядят хорошо и их не много, то почему бы не оформить их в стильный блок. Но важно не забыть о функционале. Например, на Главной странице сайта Технофорум можно детально рассмотреть каждую бумажку просто кликнув на неё — она откроется в поп-апе. Если такой функционал реализовать сложно, то лучше не мудрить и сделать вариант попроще. Ведь цель блока не просто показать красивую картинку, а дать возможность изучить материалы подробно. Сайт ТехноФорум Телекоммуникации. Проект WebValley Studio
-
Портфолио, кейсы, выполненные работы
Кейсы на Главной странице должны быть классными и целевыми. Их не должно быть много: цель блока с портфолио на Главной странице — продемонстрировать ваш уровень и экспертность, а не показать все ваши работы. Если вы организуете мероприятия в различных направлениях — покажите разностороннюю экспертизу. Пусть кейсы на Главной отразят вашу экспертность в разных сферах. Если же вы хотите сфокусироваться на определённой нише, то не захламляйте портфолио всем подряд, а выберите ТОПовые кейсы только в заявленном направлении. Так вы покажете целевой аудитории, что вы специалист в данной сфере и выполнили уже много подобных работ.
Портфолио фотографа, специализирующегося на портретной фотосъемке
И самое важное — для кейсов и отзывов должны быть отдельные страницы! Не вываливайте всё на Главную. Здесь достаточно разместить от 3 до 5 привлекательных топовых проектов, чтобы показать свою экспертность, и столько же подробных отзывов, чтобы подчеркнуть, что вам доверяют.
Призывы к действию
Бывает, что владелец сайта жалуется на низкую конверсию, но даже при поверхностном аудите оказывается, что на Главной странице просто нет форм для оставления заявки. Пользователь и рад заказать, но ему не дали такой возможности.
Другая ошибка — формы есть, призывов нет. Вам кажется, что очевидно, раз сайт про дизайн интерьера, значит, форма нужна, чтобы обсудить проект, вызвать замерщика, заказать дизайн-проект. Но для пользователя это вообще неочевидно. Практика показывает, что если не написать на сайте «Оставьте заявку», то пользователь её и не оставит.
Если цель сайта активные продажи продукта, тогда призывов нужно запланировать несколько, не стоит делать один блок в конце длинной страницы.
Другая ошибка — формы есть, призывов нет. Вам кажется, что очевидно, раз сайт про дизайн интерьера, значит, форма нужна, чтобы обсудить проект, вызвать замерщика, заказать дизайн-проект. Но для пользователя это вообще неочевидно. Практика показывает, что если не написать на сайте «Оставьте заявку», то пользователь её и не оставит.
Если цель сайта активные продажи продукта, тогда призывов нужно запланировать несколько, не стоит делать один блок в конце длинной страницы.
На Главной странице компании по изготовлению кухонь на заказ три призыва по мере скролла. Проект WebValley Studio
Есть менее очевидная ошибка — призывы не в тех местах. Если призыв вставлен на страницу в момент, когда пользователь ещё к нему не готов — это не повышает конверсию, а, наоборот, выкручивает его из воронки продаж. То же самое происходит, когда пользователь уже готов совершить целевое действие, а вместо призыва его продолжают пичкать преимуществами, информацией о компании и другими бесценными подробностями. Он успевает остыть до того, как долистает до блока призыва. Чтобы не возникало таких проблем, сайт должен проектировать маркетолог или UX-дизайнер, который проработает путь пользователя по странице и сценарии взаимодействия.
На сайте-визитке, для которого продажи — не самоцель, тоже могут быть призывы: познакомиться с кейсами, подписаться на рассылку, связаться для консультации. Но этот формат сайта подразумевает более мягкую форму призывов — не нужно борщить их через каждые два блока.
На сайте-визитке, для которого продажи — не самоцель, тоже могут быть призывы: познакомиться с кейсами, подписаться на рассылку, связаться для консультации. Но этот формат сайта подразумевает более мягкую форму призывов — не нужно борщить их через каждые два блока.
Пример призыва вступить в клуб на Главной странице сайта-визитки проекта Кинотеатр во дворе для ПИК
Актуальные акции, скидки, хиты продаж
Этот раздел уместен на Главной странице, особенно если у вас интернет-магазин. Но важно помнить, что баннеры с рекламными предложениями должны занимать не более 30% экрана. Пользователь не должен продираться сквозь дебри к основному контенту или путаться, где что найти.
Пример, как можно расположить акции на Главной странице интернет-магазина спортивных товаров
Контакты
Контакты для связи не всегда нужны на Главной странице сайта:
- Разместить раздел контактов сразу на Главной стоит, если от местоположения компании напрямую зависит конверсия. Например, если вы студия ногтевого сервиса. Клиент редко поедет на другой конец города, чтобы покрасить ногти, он будет искать что-то поближе. Попадая на Главную страницу, он хочет не только посмотреть все услуги и записаться, но и сразу же понять, где находится салон, как проехать, есть ли там парковка. В этом случае блок с контактами логично разместить сразу на Главной странице, чтобы не пришлось искать его по всему сайту.
- Контакты на Главной нужны, если услуга подразумевает срочность, экстренность. Например: эвакуатор, такси, зубная боль. В этом случае, чем быстрее пользователь найдёт контакты, тем выше вероятность конверсии.
- Если сайт большой, услуг много, офисов много, на сайте нужны реквизиты, рекомендуется раздел контактов вынести на отдельную страницу, а не лепить его на Главной. Но доступ к контактам с Главной страницы должен быть простым, понятным. Желательно добавить ссылку на контакты как в меню сайта, так и в подвал, чтобы посетитель мог всегда быстро связаться с вами.
- Если услуга подразумевает длительный срок исполнения, и у вас нет персональных менеджеров с отдельными номерами телефонов, которые держат клиента в курсе на каждом этапе, то на Главной стоит разместить самые важные контакты для быстрой связи: телефон, мессенджер. А адреса офисов и карты проезда лучше вынести на отдельную страницу. Например, это актуально для мебельных компаний, которые изготавливают продукцию на заказ. Пользователь хочет зайти на Главную и сразу набрать номер, чтобы уточнить, как там его кухня, а не искать раздел с контактами по всему сайту.
- Если сайт информационный, например, новостной портал, и вы вообще не предполагаете, что с вами будут связываться читатели, нет смысла захламлять Главную страницу. Даже если пользователи время от времени предлагают свои новости, обращаются по размещению пресс-релизов — это не основное целевое действие, а значит, для большинства посетителей эта информация на странице бесполезна.
На сайте фотографа контакты приведены в виде ссылок на соцсети и мессенджеры в подвале Главной страницы. Этого вполне достаточно, учитывая, что фотограф работает на выезде.
В других случаях, помимо телефонов и почты, на сайте требуется разместить адрес, а иногда и карту со схемой проезда, либо реквизиты компании.
Пример контактов с картой на Главной странице. Сайт юридической компании LABS. В этой нише редко всё можно решить удалённо. Клиент поедет в офис за консультацией, оформлением документов, подписанием бумаг. Поэтому блок с контактами должен быть максимально подробным. Проект WebValley Studio
Меню главной страницы сайта
Одна из функций Главной страницы — навигационная, поэтому меню — обязательный элемент. Обычно меню содержит такие элементы, как:
- логотип компании,
- ссылки на основные разделы сайта — услуги, контакты, о компании, портфолио,
- контакты или кнопку для связи,
- иконки соцсетей или иконки корзины, личного кабинета, поиск, если они предусмотрены в проекте.
Меню логично расположено в верхней части Главной страницы сайта GENIARD — просто и понятно. Пользователь сразу найдёт его и лего сориентируется на сайте.
Современное грамотное решение по размещению меню. Оно занимает верхнюю строку, где расположен логотип компании и контакты. А основные разделы сайта собраны в меню-бургер на боковой панели слева. Такое решение выглядит стильно, помогает сохранить эстетику и минималистичность на экране элитного дизайн-агентства. Нет необходимости сразу вываливать на посетителя все страницы сайта, он здесь и так надолго, пусть спокойно погуляет под впечатлением от премиального дизайна, качественных видеороликов и эстетики проекта. Открытые ссылки разделов в меню здесь захламили бы пространство и склонили визуал из премиум сегмента в среднестатистический бюджетный. Студия дизайна интерьеров INGAIN. Проект WebValley Studio
Вместо классических открытых пунктов меню можно встретить иконку бургера, по клику на которую меню открывается во всплывающем окне. Такое решение не стоит лепить бездумно. Чем проще, тем лучше. Не надо усложнять пользователю поиск нужного ему раздела. Если нет острой необходимости или железного обоснования, как в примере выше, то не стоит засовывать разделы в скрытое меню.
Когда имеет смысл использовать бургер:
Когда имеет смысл использовать бургер:
- если пунктов меню слишком много, и они не помещаются в одну строку в открытом виде;
- если в меню сложная иерархия разделов и подразделов;
- если нужно сделать эффектное меню, а ниша и задачи сайта позволяют это сделать: промо сайты, премиум сегмент.
Пример классного промо сайта по мотивам знаменитых диснеевских песен. Здесь меню бургер — уместно. Оно помогает не захламлять дизайн, не отвлекать от визуала, который в приоритете.
Что точно не стоит прятать в бургер:
- логотип компании;
- кнопки для связи или телефон компании, если они имеют важное значение для пользователя;
- иконки корзины и личного кабинета.
Поиск по сайту на главной странице
Часто конверсия зависит от того, найдёт ли пользователь нужный товар или услугу на сайте. На крупных ресурсах, таких как маркетплейсы, большинство пользователей начинают взаимодействие с продуктом через поиск.
-
Всегда ли нужен поиск на сайте
Надо исходить из направления бизнеса, размеров сайта, количества услуг или товаров. Чем их больше, тем с большей вероятностью посетитель воспользуется поиском, а не пойдёт искать нужное в меню или гулять по страницам.
Поиск обязательно должен быть на Главной странице интернет-магазина, онлайн-кинотеатра, новостного ресурса или портала, где огромное количество разделов и страниц, а также на сайтах с большим количеством услуг. -
Каким должен быть поиск
Поиск на Главной странице сайта должен быть простым и удобным. В идеале это поисковая строка, содержащая подсказку или иконку в виде лупы. Важно, где именно находится поиск: не стоит его прятать или размещать в нелогичном месте.
На сайте Кинопоиска иконка лупы неудачно затерялась среди списка страниц разделов. С ходу её очень трудно найти.
А вот на сайте мебельщика Диван ру логичный и понятный поиск видно сразу.
С точки зрения программирования, чтобы поиск повышал конверсию, он должен быть умным:
Без этих параметров поиск на Главной странице может привести к обратному эффекту — не повысить, а просадить конверсию, ведь малейшее несовпадение запроса и пользователь подумает, что у вас нет того, что он ищет.
Правильно организованный поиск помогает:
- Не выводить нулевых результатов поиска,
- Понимать опечатки пользователя, искать по части слова, предлагать синонимы запроса, чтобы не получилось, что покупатель не нашёл потолочный плинтус, потому что на сайте он называется молдинг,
- Предлагать поисковые подсказки, если пользователь не знает, как сформулировать запрос.
Без этих параметров поиск на Главной странице может привести к обратному эффекту — не повысить, а просадить конверсию, ведь малейшее несовпадение запроса и пользователь подумает, что у вас нет того, что он ищет.
Правильно организованный поиск помогает:
- Легко и быстро искать информацию;
- Устранить лишние этапы в воронке продаж и увеличить конверсию;
- Повысить лояльность клиентов, за счёт удобства использования ресурса.
Футер
Главная страница не должна обрываться на полуслове. Её надо завершить красиво и логично. Футер — низ Главной страницы, подвал. Чаще всего здесь размещают ссылку на Политику конфиденциальности, Публичную оферту и другие ссылки на информацию о компании, логотип, ссылки на соцсети.
Пример небольшого футера
Обычно компании этим и ограничиваются, что совершенно не правильно. Футер — это сквозной блок, который отображается на всех страницах сайта, поэтому в нём удобно разместить навигацию по сайту. Так как блок не имеет ограничений по размеру, и может быть как маленький, так и очень большой, в отличие от шапки сайта, в нём можно удобно и подробно отобразить всю навигацию по сайту, включая те разделы, которые не поместились в главном меню.
Пример большого футера на сайте мебельщиков Диван ру.
Также в футере можно разместить форму обратной связи. Это удобно, так как пользователь может воспользоваться ей с любой страницы и ему не придётся долго искать способ связаться с вами. Но если форма размещена в подвале, важно не перегружать её, оставить не более 2−3 полей. Более детальную форму можно разместить в отдельном блоке на Главной странице.
Пример подвала с формой обратной связи. Сайт Ленинградского мебельного завода. Проект WebValley Studio
Баннеры и реклама на главной странице сайта
Рекламные баннеры чаще можно встретить на информационных сайтах, которые монетизируются рекламой. В целом, это нормально, главное, соблюдать меру, а не так, что рекламы больше, чем контента.
Пример рекламных баннеров на сайте Photo-monster
Чтобы на сайте показывалась реклама, на нём должны быть навешены рекламные блоки, а сам сайт — добавлен в рекламную сеть Яндекса — РСЯ. РСЯ работает так, что для каждого пользователя будут автоматически подставляться рекламные баннеры, загруженные рекламодателями в их рекламных кабинетах, и владелец сайта на это не влияет. А чужие рекламные баннеры могут быть такими всратыми, что испортят весь красивый дизайн Главной страницы. Они могут быть вообще не в тему и невпопад — сайт превращается в помойку.
Рекламный баннер некрасиво сел в контейнер. Такая картинка испортит любой визуал Главной страницы. И владелец сайта не выбирает, что будет показано в этих рекламных блоках.
Поэтому для сайтов коммерческих компаний вообще несолидно лепить рекламные блоки. Максимум, что адекватно будет смотреться на Главной странице — рекламный баннер со своими спецпредложениями и собственной продукцией.
Рекламный баннер на Главной странице магазина сантехники «Тёплая вода».
Проект WebValley Studio
Статьи на главной странице сайта: стоит ли размещать
Статьи на Главной странице информационного сайта должны быть 100%, так как это его основной контент.
Пример Главной страницы новостного сайта РБК
А размещать ли на Главной странице коммерческих сайтов блок с новостями — надо исходить из целей сайта и продукта. Если продукт сложный для понимания, а ниша требует экспертности от подрядчика, то блок с последними статьями из блога на Главной — очень даже рабочий инструмент.
Пример блока с тематическими статьями на Главной странице сайта по продаже элитных сейфов. В блоге размещены статьи по теме, где покупатель может посмотреть обзоры продукции, понять, какой именно сейф ему нужен, как правильно его выбрать и купить.
Если же Главная — это рекламный лендинг на понятный недорогой товар — то блок со статьями использовать нежелательно. Пользователя нужно подводить к конверсионному действию, а не уводить с продающей страницы собственными руками. Есть вероятность, что пользователь уйдёт читать статьи, и уже не вернётся оттуда.
Главная страница сайта компании
Задача Главной страницы корпоративного сайта — познакомить посетителя с компанией, её услугами, продемонстрировать преимущества по сравнению с конкурентами.
На Главной странице корпоративного сайта надо предусмотреть:
1) Навигацию по основным услугам компании. Не нужно все услуги с подробным описанием вываливать на Главную страницу сайта, для этого должны быть отдельные страницы. На Главную важно вынести краткое описание услуг с возможностью перейти по ссылке для подробного знакомства. Если услуг много, достаточно разместить основные, самые важные и востребованные.
На Главной странице корпоративного сайта надо предусмотреть:
1) Навигацию по основным услугам компании. Не нужно все услуги с подробным описанием вываливать на Главную страницу сайта, для этого должны быть отдельные страницы. На Главную важно вынести краткое описание услуг с возможностью перейти по ссылке для подробного знакомства. Если услуг много, достаточно разместить основные, самые важные и востребованные.
Пример размещения карточек с услугами компании в прототипе Главной страницы. Конечно, хочется показать всё и сразу, но скролить вот такую портянку полноэкранных блоков очень неудобно. Это нужно выносить на отдельную страницу, посвященную услугам.
Если услуга одна, то в этом случае её подробное описание можно разместить на Главной странице.
2) Прайс или цены на услуги компании. Если услуга простая и конкретная, цена на Главной странице должна быть оказана обязательно.
2) Прайс или цены на услуги компании. Если услуга простая и конкретная, цена на Главной странице должна быть оказана обязательно.
Пример простых карточек услуг с ценами на сайте Sky Padel
Если услуга сложная и требует детального расчёта, на Главной можно указать диапазон цен или цену от минимального значения, а полный расчёт уже предложить на странице конкретной услуги.
Услуги с ценами «от…» на сайте WebValley Studio. Разработка сайта — сложный интеллектуальный продукт, цена на который зависит от объёма проекта, сложности дизайна и функционала, необходимости интеграций со сторонними сервисами, глубины маркетинговой проработки, наличия фото, видео, текстового контента. Назвать цену, не понимая задачу, невозможно. Но цена «от…» помогает обозначить порядок цен, чтобы у пользователя был примерный ориентир.
В особо сложных случаях, когда правда невозможно прикинуть даже минимальную цену «от…», можно и не указывать её на Главной странице. Но прозрачность цен всегда положительно сказывается на имидже компании, повышает лояльность посетителей, увеличивает конверсию сайта.
Карточка сложной услуги с индивидуальным расчётом в каждом случае. Тут уже цена не указывается.
3) Этапы работы. Главный страх, который останавливает пользователей от покупки — неизвестность. Вот оставит он заявку — что дальше произойдёт? Придётся сразу оплачивать услугу? Надо будет встречаться с менеджером и ехать в офис? Чтобы повысить уровень доверия клиентов, сориентировать их и снять возражения, важно чётко и прозрачно прописать пошаговый процесс работы при оказании услуги. Это особенно важно для услуг, которые не являются повседневными или знакомыми большинству людей.
Например, нет смысла описывать этапы для записи в салон красоты. Тут всё и так понятно: записался, пришёл к назначенному времени, получил процедуру, оплатил, ушёл. А вот если услуга сложная, многоэтапная, например, строительство дома или создание сайта, то важно подробно прописать основные шаги, временные рамки, а также необходимые документы или материалы, которые могут понадобиться клиенту. Так, вы не только упростите процесс принятия решения, но и продемонстрируете прозрачность и профессионализм.
Например, нет смысла описывать этапы для записи в салон красоты. Тут всё и так понятно: записался, пришёл к назначенному времени, получил процедуру, оплатил, ушёл. А вот если услуга сложная, многоэтапная, например, строительство дома или создание сайта, то важно подробно прописать основные шаги, временные рамки, а также необходимые документы или материалы, которые могут понадобиться клиенту. Так, вы не только упростите процесс принятия решения, но и продемонстрируете прозрачность и профессионализм.
Пример раздела этапов с подробным описанием и указанием сроков каждого. Сайт застройщика Genesis. Проект WebValley Studio
4) Преимущества. Блок, который поможет повысить лояльность и показать, чем вы выгодно отличаетесь от конкурентов, и какую пользу дадите своему клиенту.
Пример раздела преимуществ компании с выгодой для клиента. Сайт застройщика Genesis. Проект WebValley Studio
5) Портфолио. Кейсы — мощный инструмент для завоевания доверия клиента. Этот блок позволяет увидеть реальные примеры вашей работы, оценить качество и стиль ваших услуг, а также понять, как вы можете решить задачи заказчика. Пропадает страх покупки кота в мешке, ведь пользователь видит, что вы уже решали подобную задачу. Убедительные кейсы, с объяснением процесса и результатов, создают положительное впечатление и помогают подтолкнуть клиентов к сотрудничеству.
6) Команда. Люди любят покупать у людей, а не у абстрактной компании. Когда видишь команду или специалиста, с которым предстоит работать, это вызывает доверие, снимает страхи, ведь когда с человеком знаком хотя бы заочно, уже не так страшно оставлять заявку или звонить, чем когда на другом конце незнакомец. Желательно, чтобы у клиента была возможность познакомиться со специалистом, узнать его заслуги и квалификацию, почитать отзывы, а не просто посмотреть на приятное лицо. Ну и качественные фото в единой стилистике, профессионально снятые, всегда будут выигрышно смотреться на вашем сайте.
Блок с командой в проекте творческого пространства «Смелей!» Хорошая возможность познакомиться с командой и даже выбрать того специалиста, который больше откликается по стилистике работ или отношению к делу.
Блок с полноэкранной карточкой команды на сайте юридической компании LABS. Хорошо видно честное лицо эксперта. Он располагает к себе и вызывает доверие. После такого заочного знакомства уже не страшно звонить или оставлять заявку. Проект WebValley Studio
Блок команды на Главной странице, снятый в единой стилистике. Сразу складывается впечатление сплочённой команды, а дизайн сайта выглядит эстетично и аккуратно.
Нестандартный блок команды в виде полноэкранного фото.
Классно стилизованный креативный блок команды в технике дуотон.
Главная страница сайта интернет магазина
Конкуренция в товарных нишах сейчас такая, что Главная страница интернет-магазина должна не только продавать, но и работать на узнаваемость бренда. Важные составляющие, которые обязательно должны быть в её составе:
1) Удобное навигационное меню. Если пользователь не найдёт за несколько кликов нужный товар в магазине — он уйдёт на другой сайт. Поэтому навигацию в интернет-магазине нужно проектировать: проработать структуру меню, разбить его по категориям и разделам, чтобы покупатель мог быстро найти товар. В меню должны быть интуитивно понятные иконки поиска, корзины, личного кабинета, при его наличии.
1) Удобное навигационное меню. Если пользователь не найдёт за несколько кликов нужный товар в магазине — он уйдёт на другой сайт. Поэтому навигацию в интернет-магазине нужно проектировать: проработать структуру меню, разбить его по категориям и разделам, чтобы покупатель мог быстро найти товар. В меню должны быть интуитивно понятные иконки поиска, корзины, личного кабинета, при его наличии.
Меню интернет-магазина спутникового оборудования. Проект WebValley Studio
2) Баннеры. Чаще всего их можно увидеть вместо первого экрана-обложки. Если баннер красиво оформлен и выгодно демонстрирует продукт компании, то он будет к месту на Главной странице интернет-магазина.
Баннеры на странице магазина сантехники. Дизайн WebValley Studio
3) Разделы каталога. У интернет-магазина Главная страница, также как и у корпоративного, выполняет навигационную функцию. На ней, с помощью нескольких карточек, надо обозначить разделы каталога.
Пример грамотного оформления ассортимента продукции компании на Главной странице сайта Диван ру. Продукция оформлена в виде эстетичных, минималистичных карточек, которые наглядно демонстрируют ассортимент продукции компании.
Разделы каталога на Главной странице интернет-магазина элитных шуб ALBINEL. Аккуратная плитка из двух карточек товара, по клику на которые можно попасть в соответствующий раздел каталога. Удобная навигация, эстетичный визуал, информативная подача — пользователь сразу с Главной страницы видит, шубы из какого меха здесь предлагают. Проект WebValley Studio
4) Информация для покупателей. Интернет-магазины обязаны размещать Политику конфиденциальности, Договор оферты, информацию об оплате, доставке, гарантии, контактные данные. Эту информация обычно размещают в подвале Главной страницы сайта с возможностью перехода по ссылке для подробного ознакомления уже на отдельной странице.
Пример блока с информацией для покупателей в подвале сайта
5) Блоки призыва. Основное целевое действие интернет-магазина — покупка. Но это не значит, что другие целевые действия невозможны. Интернет-магазин, чтобы оставаться на плаву и развиваться, должен работать с аудиторией на всех этапах воронки продаж. Поэтому важно заложить такие блоки призыва как: подписку на новости, ссылки для регистрации на сайте, предложения скидок или акций, а также напоминания о начале покупок или добавлении товаров в корзину. Правильные призывы к действию могут значительно повысить конверсию и вовлеченность пользователей.
Вовлекающий призыв на Главной странице сайта салона оптики Оптик Лаб. Очки редко покупают без консультации оптометриста. Если бы не правильный призыв, пользователи никогда б не узнали, что в салоне есть такая услуга, и были бы вынуждены идти на приём к врачу платно, откладывая покупку на неопределённый срок. Проект WebValley Studio
6) Отзывы на сайте. Избалованные маркетплейсами пользователи ничего не покупают в интренете, не прочитав отзывы. Этот блок на Главной странице интернет-магазина поможет создать положительный имидж и повысить лояльность покупателя к магазину.
Блок отзывов на Главной странице сайта интернет-магазина по доставке цветов
Отзывы на Главной странице сайта бутикового магазина свадебных платьев
Каталог на главной странице сайта
Раньше в старых интернет-магазинах на Главной странице сразу размещался каталог товаров: зашёл на сайт — и вот тебе сразу витрина, где всё в кучу. Это неправильно, так как у Главной страницы и страницы Каталога разное назначение и разный функционал.
Сейчас конкуренция в интернете огромная, товаров много и все однотипные. Поэтому, при создании интернет-магазина, важно уже на старте подумать о развитии бренда, отстройке от конкурентов, концепции магазина, общих ценностях с целевой аудиторией — это и должна доносить Главная страница. При этом на Главной странице магазина можно и нужно использовать карточки товаров, но не вываливать сразу весь каталог, а выводить определённые категории товаров:
Сейчас конкуренция в интернете огромная, товаров много и все однотипные. Поэтому, при создании интернет-магазина, важно уже на старте подумать о развитии бренда, отстройке от конкурентов, концепции магазина, общих ценностях с целевой аудиторией — это и должна доносить Главная страница. При этом на Главной странице магазина можно и нужно использовать карточки товаров, но не вываливать сразу весь каталог, а выводить определённые категории товаров:
- товары со скидкой;
- новинки;
- бестселлеры;
- плитку с разделами каталога, чтобы показать, что вообще есть в магазине.
Главная страница интернет-магазина сантехники. Выведены карточки по основным разделам товаров.
Главная страница интернет-бутика свадебных платьев и аксессуаров, где одновременно выводятся товары со скидкой, спецпредложения, популярные товары, а также навигационные карточки по разделам каталога.
Главная страница сайта визитки
В отличие от корпоративного или персонального сайта, главная задача сайта-визитки — познакомить с компанией или персоной, а не продать. Поэтому Главная страница визитки будет информативнее и спокойнее по содержанию. Минимум блоков призыва, максимум пользы.
Поскольку сайт-визитка не предполагает большую разветвлённую структуру, подробное, но ёмкое описание услуг может размещаться на Главной странице, а не выноситься на отдельные страницы услуг.
Поскольку сайт-визитка не предполагает большую разветвлённую структуру, подробное, но ёмкое описание услуг может размещаться на Главной странице, а не выноситься на отдельные страницы услуг.
Пример блока услуг с кратко обозначенными направлениями работы. Сайт компании по сметному ценообразованию Ценовые системы. Проект WebValley Studio
Персональный сайт: какой должна быть главная страница
Персональная страница знакомит посетителя с её героем и его услугами. При оформлении Главной страницы нужно отталкиваться от задач, так как сайт персоны может быть нацелен на продажи, тогда основным героем будет не сам автор, а продукт. Это влияет на порядок изложения информации на сайте: сначала рассказываем о продукте или услуге, а потом уже об авторе продукта. Важно этот баланс учесть, так как персоны часто влюблены в себя и пихают своё лицо в каждый блок, забывая, зачем пришёл посетитель.
Персональная страница психолога, где главное — её продукт, и он на первом месте в структуре страницы
Второй формат персонального сайта — визитка, где сайт знакомит пользователя с персоной, раскрывает её биографию, образование, личностные качества. Продаёт эксперта, а не его услуги. Только при таком формате сайта уместно на Главной странице много говорить про себя.
Персональный сайт актрисы Снежаны Самохиной. Совместный проект студентки курса WebValley Academy и WebValley Studio
Главная страница информационного сайта
К инфосайтам относятся сайты медиа, новостные порталы, городские сайты и форумы, сайты СМИ. На них размещаются статьи, обзоры, пресс-релизы. Продажа товаров или услуг — не главная их задача, хотя это тоже может быть источником дохода.
Пример Главной страницы портала города Москвы
Новостные сайты, особенно порталы, это адский борщ из множества разделов и тематик. Важно продумать навигационную часть, чтобы Главная страница сайта была структурированной и понятной. В меню обязателен поиск, а также важно предусмотреть сайдборды — колонки по краям контейнера, где можно разместить разделы, баннеры и прочие элементы страницы.
Главная страница журнала T-Ж компании Tinkoff содержит основной центральный контейнер, где размещены разделы новостей, свежие статьи, и сайдборды по краям: слева — меню навигации, справа — баннеры.
Есть ошибочное мнение, что если сайт информационный, то об офере можно не запариваться. Это не так. Грамотный офер на сайте всегда будет плюсом, даже на портале.
Офер на сайте Википедии — предложение редактировать материалы
На Главной странице информационного сайта уместно разместить средства коммуникации, такие как опросы, интерактивы, которые помогают вовлекать пользователя и взаимодействовать с ним.
Пример интерактива на странице новостного портала РИА Новости
Дизайн главной страницы
Знакомство с компанией начинается не просто с Главной страницы сайта, а с её дизайна. Если пользователю нужно время, чтобы прочитать офер, вникнуть в ваше предложение, то мнение о том, нравится ему визуал или нет, формируется мгновенно.
-
Прототип главной страницы сайта
Работа над дизайном Главной страницы всегда начинается с прототипа. Всё, что было проработано по структуре на этапе аналитики и первичного проектирования, надо наглядно отобразить на схеме, чтобы понять, как пользователь будет двигаться по странице, правильный ли порядок блоков или может, что-то надо поднять повыше или опустить пониже и почему. Прототип — чёрно-белый черновик Главной страницы. Его специально отрисовывают без цвета и графики, чтобы ничего не отвлекало от структуры страницы и логики изложения.
Прототипы в WebValley Studio всегда прорабатываются до мелочей, чтобы максимально наглядно продемонстрировать заказчику результат. Проект WebValley Studio
Фон для главной страницы сайта
Фон Главной страницы сайта должен быть визуально привлекательным и соответствовать общей концепции дизайна. Он может быть однотонным, градиентным, содержать текстуры, изображения или видеоролики. Важно, чтобы фон не отвлекал внимание от основного контента и не мешал восприятию информации.
Яркий фон на Главной странице сайте стилиста
Монохром на сайте обучения организаторов мероприятий
Неон на Главной странице сайта курсов предпринимателей для детей
Какой бы фон вы ни выбрали, он должен быть контрастным по отношению к тексту и другими элементами, чтобы обеспечить удобочитаемость.
Хоть проект и выглядит стильно, но спорный момент по фону тут присутствует. Цвет текста недостаточно контрастный, фон тёмный, шумный. Общее впечатление — грязновато получилось. Хотя сам блок очень даже классный.
Если фотографии и сочные цвета неплохо украшают фон Главной страницы, то с текстурами надо быть осторожнее. С ними надо уметь работать, иначе получится всратый морально устаревший дизайн:
Вот такого фона, который было популярно размещать в двухтысячных годах за пределами контейнера с контентом сайта, не должно быть в современном дизайне. Выглядит это жутко, фон не украшает сайт, а только портит впечатление и отвлекает от контента.
При должном навыке дизайнера, в зависимости от концепции бренда и вашей аудитории, нестандартный текстурный общий фон Главной страницы может выглядеть круто и к месту, делая вас запоминающимися:
Сайт тату-мастера со стильным и запоминающимся текстурным фоном
Слайдер на главной странице сайта
Так как на Главной странице нужно уместить много информации, и сделать это компактно, дизайнеры прибегают к слайдерам. Важно, чтобы ими было комфортно пользоваться. Карусель не должна крутиться со скоростью света. Анимация должна быть плавной, а скорость переключения такая, чтобы пользователь успевал прочесть информацию на экране. В идеале предусмотреть такой функционал, чтобы пользователь имел возможность остановить карусель и прочитать текст, например, наведя на него курсор мыши. Также важно, чтобы у слайдера была возможность принудительного перелистывания вперёд назад, чтобы не нужно было ждать, когда же нужный слайд, который не успели прочитать, появится снова. Если слайдов 3−4 это ещё терпимо, хотя и ненормально, но если их больше 5, то это жутко раздражает.
Если технически нет возможности реализовать такие решения, то подумайте, стоит ли использовать слайдер, и как его наличие отразится на поведенческих факторах.
Если технически нет возможности реализовать такие решения, то подумайте, стоит ли использовать слайдер, и как его наличие отразится на поведенческих факторах.
Слайдер на Главной странице магазина цветов. Проект WebValley Studio
Слайдер с интересной анимацией на Главной странице мебельного магазина Диван ру
Прятать контент в слайдеры на Главной странице можно, только если вы уверены, что пользователь ничего не потеряет, не увидев эту информацию. Всегда надо исходить из того, что пользователь не будет ничего листать.
Визуальное повествование
Всё, что можно показать картинкой, лучше показать картинкой, а не текстом. Можно описать красоту курорта, его привлекательное месторасположение и природу, уютные номера словами, но, учитывая, что 65% людей — визуалы, гораздо эффективнее передать это с помощью фотографий. Так сообщение дойдёт быстрее и вызовет более глубокие эмоции. А поскольку Главная страница сайта должна производить впечатление и передавать информацию в краткой форме — визуальное повествование обязательно надо использовать в дизайне.
Шикарные виды поместья на сайте винодельни говорят сами за себя
Классный текст — половина успеха. Но если рядом с цепляющим текстом разместить убогую страшную картинку, то результат не впечатлит пользователей: и картинка не сфокусирует внимание, и текст рядом с ней читать не захочется. Срабатывает связка: херовая стоковая картинка ни о чём, значит, и текст рядом с ней шаблонный и не стоит внимания.
Не надо быть ТОПовым дизайнером, чтобы понять, какой из двух блоков вызовет интерес у пользователя
Не всё можно проиллюстрировать картинками. Инфографика, схемы, сравнительные таблицы — это тоже часть визуального повествования, которая помогает лучше понимать и воспринимать контент.
Красивая таблица о сантехнических ресурсах на сайте интернет-магазина «Тёплая вода». Шаблон разработан WebValley Studio
Но важно не перебздеть. Таблицы, схемы, диаграммы должны наглядно доносить мысль и упрощать восприятие. Нельзя делать инфографику ради инфографики. Если схема или инфографика слишком перегруженная или сложная для восприятия, и пользователь вынужден разгадывать ребус — лучше всё-таки оформить эту информацию текстом или списком.
Живые фото
Ничто не может так убить визуал на Главной странице, как унылые стоковые фото, давно всем приевшиеся и выглядящие шаблонно.
Забудьте про всех этих дядек, пожимающих руки, и улыбающихся на фоне компьютеров или рабочего стола с бумагами.
Забудьте про всех этих дядек, пожимающих руки, и улыбающихся на фоне компьютеров или рабочего стола с бумагами.
Фотографии на сайте должны быть реальными, отражающими жизнь компании, её сотрудников и продукт. Визуальный контент должен вдохновлять посетителей на использование вашего товара или услуги.
Важно уделить качеству изображений особое внимание: нанять фотографа и сделать такой контент, который будет выгодно смотреться на сайте.
Важно уделить качеству изображений особое внимание: нанять фотографа и сделать такой контент, который будет выгодно смотреться на сайте.
Смотрите на примере, как даже вполне себе нормальные фотографии заказчика могут испортить концепцию и повлиять на впечатление о сайте. И слева, и справа — вполне хорошие варианты фото цветов в баннерах. Слева — вариант, предложенный дизайнером, а справа — то, что по итогу есть у заказчика. И вроде тоже ничего: красивые букеты, профессиональные фото. Но вот неряшливость прослеживается в том, как не вписываются фото в данную композицию по тематике, по цвету, плохо откадрированы, не садятся в дизайн-макет. И вроде не ужасно, но и не прекрасно =)) Всегда надо планировать контент для сайта, чтобы он выглядел профессионально и дорого.
Что делать, если нет фото, или деятельность компании трудно проиллюстрировать фотографиями
Лучше обойтись без картинок на сайте, чем пытаться впихнуть стоковое г@вно.
Сайт без фото тоже может выглядеть круто, если грамотно подойти к структуре, сетке и поработать с типографикой.
Сайт без фото тоже может выглядеть круто, если грамотно подойти к структуре, сетке и поработать с типографикой.
Пример эстетичной Главной страницы сайта без использования картинок. Проект WebValley Studio
Но если картинки на сайте всё-таки нужны, посмотрите в сторону графики или концепции с абстрактными объектами. При грамотном подходе сайт может выглядеть круто даже с фоткой не в тему, если заложить туда смысл и правильно преподнести.
На примере выше — дизайн Главной страницы для компании, которая занимается обучением инвестициям в криптовалюту. Задача: сделать шаблон сайта с 3D-фигурой и анимацией по скроллу. Фигура должна вращаться. На сайте это единственный графический объект, больше фото, иллюстраций нет. В качестве 3D-фигуры заказчики хотели что-то в греческом стиле, и представляли себе бюст античного греческого бога. И, да, это уже не ново: таких голов сейчас полно везде, по теме и не в тему. В этом проекте — как будто тоже не в тему. Плюс, мы долго подбирали голову, и со всеми было что-то не так. Решение: дизайнер предложил уйти от образа голов, но остаться в этой тематике. Мы предложили в качестве объекта — каменный храм Оракула. «Дельфийский оракул — символ Аполлоновой мудрости, и направляет на путь истинный всякого». Подобно оракулу, компания заказчика обучает мудрости и направляет новичков в мире криптовалют. Идея зашла, и храм был утвержден на сайт в качестве центрального объекта. Проект WebValley Studio
Адаптивный дизайн главной страницы
Есть большая вероятность, что знакомство с вашим сайтом пользователь начнёт с мобильного устройства, поэтому игнорировать адаптивные версии при разработке Главной страницы — нельзя. При проектировании важно уделить внимание как скорости загрузки сайта, так и удобному считыванию информации. Нельзя просто всё уменьшить, чтоб впихнуть на маленький экранчик, и оставить как есть. Дизайн мобилок должен быть проработан отдельно, с учётом особенностей размеров экранов и поведенческих паттернов мобильных пользователей. Текст должен быть хорошо читаемым, а элементы дизайна — адаптивными, чтобы корректно отображались на разных экранах, а пользователю было удобно взаимодействовать с ними: попадать по кнопкам пальцем, не цеплять случайно другие элементы.
На примере показано, как правильно адаптировать мобильную версию Главной страницы. Нельзя просто всё сжать и уменьшить — выглядит плохо, а текст стал очень мелкий. Справа — тот вариант, который хорошо смотрится с экрана телефона и удобен для пользователя.
-
Как понять, что пора обновить дизайн главной страницы
Каждое изменение в дизайне должно быть обосновано конкретной бизнес-задачей или актуальной проблемой, которую необходимо решить. Если ваш текущий сайт успешно генерирует лиды и вы справляетесь с поступающими заявками, подумайте о том, что именно в дизайне может работать ещё лучше, вместо того, чтобы менять его просто ради изменений. Возможно, стоит оставить всё как есть. Но если всё же редизайн необходим, то нужно подойти к его реализации грамотно, в идеале в связке с SEO-специалистом, чтобы не просадить сайт.
Как понять, нужен ли сайту редизайн:- Сайт не приносит заявки при хорошем трафике. Важно разобраться, почему люди заходят на сайт и не покупают. И не всегда дело в дизайне.
- Ребрендинг компании. Если компания обновляет фирменный стиль, расширяет спектр услуг или выходит на новый рынок, ей надо заново знакомиться с аудиторией и доносить ценность продукта, тут редизайн Главной страницы оправдан.
- Просадка по UX. Если пользователи заходят на сайт, но не могут найти там нужную информацию, путаются, задают вопросы, ответы на которые есть на сайте, значит с сайтом что-то не так. Надо пересмотреть структуру и юзабилити.
- Сайт не решает задачи пользователей. Например, есть товар, но его нельзя купить, так как нет корзины на сайте. Есть вопросы, но их никак нельзя задать, так как нет контактов для связи. Или ниша предполагает большую часть мобильного трафика, но на сайте нет или слабо проработана мобильная версия. Всё это звоночки, что сайту требуется редизайн.
- Устаревший дизайн. Средний срок службы дизайна сайта — 5 лет. Спустя 5 лет сайт всё ещё может выглядеть хорошо и аккуратно, но важно помнить о конкурентах и трендах. Если Главная страница выглядит хуже, чем у конкурентов, стоит задуматься о редизайне. Если ваш сайт динозаврик, то редизайн ему нужен однозначно.
-
Шаблоны главной страницы сайта и почему они неэффективны
Шаблон Главной страницы сайта — это такой усредненный вариант, который подходит всем сразу и универсален. Но в бизнесе, как правило, если решение подходит всем, оно в полной мере не подходит никому. Шаблон не решает задачи именно вашего бизнеса. Он не отражает специфику вашего продукта, не учитывает путь ваших пользователей, а значит — бесполезен для продвижения и роста узнаваемости компании.
Шаблон Главной страницы сайта. Выглядит аккуратно, но очень скучно и стандартно. Положение и состав блоков в нём может не ложиться на вашу специфику, не способствовать продажам.
Используя шаблон, вы не застрахованы от того, что точно такой же сайт будет у вашего конкурента. Важно запомниться. Надеяться на то, что у вас купят сразу, как только на сайт зашли — утопия. Посетитель изучит несколько предложений. Сайты, которые на одно лицо, пройдут мимо. А если у вас круто проработанная Главная страница с уникальным дизайном — пользователь её запомнит чисто визуально, и легко снова найдёт ваш сайт среди десятков предложений.
Текст на главную страницу сайта: что написать
Текст на сайте — мощный инструмент коммуникации с пользователями. Пишите просто и понятно для вашей аудитории.
Чтобы понять, что именно писать на Главной странице сайта:
Так вы сформируете структуру своей будущей страницы, и поймёте что, как и где писать.
Наймите копирайтера. Как бы хорошо вы не писали, лучше довериться профессионалу, который знает, как правильно упаковать смыслы.
Забудьте про портянки. Почему-то, когда люди пишут текст на сайт компании, они всерьёз думают, что кто-то будет это читать: прям последовательно, внимательно, абзац за абзацем. Никто не будет читать. Не нужно всю информацию вываливать на Главную страницу. Пишите коротко и по делу. На Главной не нужны мемуары директора, история компании от сотворения мира до наших дней, толковый словарь, который даёт определение каждому слову.
Пишите не о себе, а о клиенте. В тексте держите фокус не на том, какой у вас классный продукт, а как классно он решит проблему пользователя. Не скатывайтесь в самовосхваление, а покажите, в чём выгода для клиента от преимуществ вашей компании.
Оптимизируйте текст. От качества текста на Главной странице во многом зависит продвижение сайта в поисковых системах. Чтобы он был интересен не только людям, но и поисковым роботам, текст должен быть оптимизирован. Подключите SEO-специалиста: он подберёт релевантные ключевые слова, подскажет, как правильно посадить их в текст, чтобы сайт лучше продвигался в поисковиках.
Чтобы понять, что именно писать на Главной странице сайта:
- проведите маркетинговое исследование, чтобы понять, что нужно потребителям, и как преподнести продукт компании;
- изучите, кто ваша целевая аудитория, чего она ожидает от продукта, как принимает решение о покупке, какие возражения возникают в процессе;
- проанализируйте своих успешных конкурентов.
Так вы сформируете структуру своей будущей страницы, и поймёте что, как и где писать.
Наймите копирайтера. Как бы хорошо вы не писали, лучше довериться профессионалу, который знает, как правильно упаковать смыслы.
Забудьте про портянки. Почему-то, когда люди пишут текст на сайт компании, они всерьёз думают, что кто-то будет это читать: прям последовательно, внимательно, абзац за абзацем. Никто не будет читать. Не нужно всю информацию вываливать на Главную страницу. Пишите коротко и по делу. На Главной не нужны мемуары директора, история компании от сотворения мира до наших дней, толковый словарь, который даёт определение каждому слову.
Пишите не о себе, а о клиенте. В тексте держите фокус не на том, какой у вас классный продукт, а как классно он решит проблему пользователя. Не скатывайтесь в самовосхваление, а покажите, в чём выгода для клиента от преимуществ вашей компании.
Оптимизируйте текст. От качества текста на Главной странице во многом зависит продвижение сайта в поисковых системах. Чтобы он был интересен не только людям, но и поисковым роботам, текст должен быть оптимизирован. Подключите SEO-специалиста: он подберёт релевантные ключевые слова, подскажет, как правильно посадить их в текст, чтобы сайт лучше продвигался в поисковиках.
Тестирование вариантов главной страницы сайта
Как только сайт запущен, не думайте, что на этом всё. Анализируйте время пребывания на странице, процент отказов и конверсию, тепловые карты и карты скроллинга, чтобы понять, как пользователи взаимодействуют с сайтом, на каких этапах возникают затыки, и как можно улучшить.
В некоторых случаях целесообразно использовать А/B тестирование — измерение конверсии путём сравнения двух вариантов Главной страницы. Попробуйте сравнить две версии: где одна и та же обложка, но с разные оферы, или разные картинки, но одинаковый офер.
В некоторых случаях целесообразно использовать А/B тестирование — измерение конверсии путём сравнения двух вариантов Главной страницы. Попробуйте сравнить две версии: где одна и та же обложка, но с разные оферы, или разные картинки, но одинаковый офер.
Важно! Всегда тестируется только одна гипотеза: не нужно сразу всё менять, и офер, и картинку — так вы не сможете понять, что именно дало положительный результат. В первом варианте заменили и заголовок и цвет, во втором варианте заменили только заголовок.
Но A/B-тестирование — инструмент, к которому нужно прибегать только с одобрения маркетолога, с предварительно проведённым A/A-тестированием, на большом объёме трафика, иначе его результаты будут недостоверны. Кроме того, на такое тестирование надо выделять отдельный бюджет. Поэтому, если нет чёткого понимания специфики этого инструмента, то лучше обойтись наблюдением за страницей в динамике, а не вестись на пафосные рассуждения маркетологов-блогеров о том, что A/B-тесты — это волшебная таблетка, которая нужна каждому.
Правила и требования к главной странице сайта
На что обратить внимание, чтобы страница отвечала задачам и помогала бизнесу:
-
Понимание целевой аудитории
Если пользователь будет заходить на страницу и узнавать себя, видеть решение своей проблемы, то сайт будет приносить продажи даже с посредственным дизайном и функционалом. Поэтому хорошая Главная страница не та, на которой всё летает, не та, которая воспевает компанию, не та, от которой директор ловит оргазм, а такая, которая отвечает потребностям целевой аудитории, закрывает боли, страхи и возражения. -
Проработанная структура, а не просто скопированная с конкурентов
Нельзя просто взять несколько сайтов конкурентов, посмотреть, какие блоки они используют на Главной странице, и слепить себе что-то по образу и подобию, ожидая, что это принесёт желаемый результат. Никто не знает, как у конкурента строилась работа, провёл ли он все нужные исследования, выстроил структуру, исходя из задач бизнеса или просто дома с женой или партнёрами обсудил как лучше. Тестировал гипотезы или сделал и забыл? А точно у него работает всё как надо? Бездумно повторяя за конкурентом, можно лишь повторить его ошибки. -
Простота: не надо лепить дизайн ради дизайна
Хороший дизайн такой, в который нечего добавить. Гениальный дизайн такой, что из него нечего убрать. Не скатывайтесь в цыганщину. Не надо «я надену всё лучшее сразу». Не стоит лепить вензеля, иконки, фотографии себя любого, бесценные цитаты, финтифлюшки и дешёвые украшательства. Каждый элемент на сайте должен выполнять какую-то функцию. Профессиональный дизайнер всегда спрашивает себя: «Зачем это здесь», и если не находится серьёзного обоснования, то избавляется от всего лишнего.
Не стоит прибегать к сложным анимационным решениям и неочевидной механике взаимодействия с пользователем. Станут ли на вашем сайте чаще заказывать роллы, если на Главную страницу запилить анимацию сборки, чтобы по мере скролла в нижней части экрана сваливался рис, на него рыбка, и готовый суши обвязывался листом нори? Вряд ли. А скорость загрузки убьёт наверняка, и вместо WOW-эффекта вы добьётесь только того, что пользователи будут уходить с сайта, так и не дождавшись загрузки, и не увидев вашу креативную идею. -
Изображения шикарного качества
Фотографии на сайте — важный элемент дизайна. Если фото стоковые или страшные, непрофессиональные, то и сайт будет выглядеть всрато. Иногда хороший фотоконтент — уже половина успеха в дизайне Главной страницы. -
Информативность контента
Писать на Главной странице нужно кратко, ёмко и по делу. Но беда в том, что разработчики сайтов часто скатываются в другую крайность: превращают текст не в логичный последовательный рассказ, а в какой-то набор тезисов и лозунгов:- индивидуальный подход,
- кратчайшие сроки,
- приемлемые цены,
- широкий спектр услуг,
- активно развивающаяся компания.
В пользователя швырнули этим бредом, не дали никакой конкретики, не вызвали пояснительную бригаду, просто оставили один на один с этими пустыми фразами, чтобы он додумал сам: кратчайшие сроки — это сколько? Для кого приемлемы эти цены? Для Абрамовича? В чём заключается индивидуальный подход? Это ко мне сейчас индивидуально подошли или тут ко всем так подходят? Это пустая болтовня, которая не несёт никакой пользы для клиента. Поэтому краткость — это хорошо, но только до того момента, пока сохраняется информативность. Ведь пользователь пришёл за этим к вам на сайт — узнать всё о компании, продукте или услуге, условиях её оказания. А не для того, чтобы узреть пустые лозунги о динамично развивающейся компании, оказывающей широкий спектр услуг. -
Удобство и понятность
Если ваши дизайнерские решения будут сложны для восприятия, вы рискуете потерять часть аудитории. Люди уйдут на сайты конкурентов, которые не такие замутные и лучше учитывают их потребности. Создавайте свою Главную страницу максимально удобной и простой в использовании. Ещё никто не ушёл с сайта, потому что на нём не было летающей квакозябры. А из-за того, что на странице невозможно ничего найти — пользователи отваливаются пачками. -
Красота и современность дизайна
Красивый и современный сайт располагает посетителя остаться и познакомиться с продуктом поближе. На таком сайте приятно находиться, он демонстрирует ваш серьёзный подход во всем. Не забывайте своевременно обновлять дизайн, чтобы идти в ногу с трендами и не отстать от конкурентов. -
SEO-оптимизация
Какой бы ни был у вас шикарный текст и визуал на Главной странице, об этом никто не узнаёт, если на неё не придут пользователи. Чтобы сайт привлекал трафик из поисковиков, нужна SEO-оптимизация:- Ключевые слова. Подберите запросы, которые отражают суть контента страницы, и по которым вас могут искать пользователи. Они должны быть естественно и органично вписаны в контент, не перегружая текст и не делая его нечитаемым и топорным. Располагать ключи следует не только в заголовках, но и в описании, метаданных Главной страницы.
- Метатеги. Поисковый робот не заглатывает всю страницу целиком, сначала он сканирует контрольные точки — метатеги. Заголовок и описание страницы — превью, которое выдаётся на странице поиска Яндекс и Google пользователю. Заголовки и подзаголовки на Главной странице. Если они содержат ключевые слова и релевантны контенту на странице — это сигнал для поискового робота, по каким запросам показывать ваш сайт.
- Контент страницы. Важно качество, а не количество. Не сработает просто напихать ключей везде подряд и ждать чуда. Текст должен содержать поисковые запросы, но они должны быть вписаны в него так, как будто их тут нет.
- Атрибут альт. Текст, который описывает картинки на странице, и позволяет пользователям узнать, что должно отображаться, если изображение не загружается. В идеале, он также должен содержать ключевые запросы, тогда пользователи смогут находить вас в поиске по картинкам.
-
Анализ результатов и докрутка дизайна
Не бросайте готовую страницу на произвол судьбы. Качественный продукт требует постоянного мониторинга и докрутки, чтобы соответствовать целям бизнеса и трендам современного дизайна.
Ошибки главных страниц сайтов
Халтуру видно сразу. Непрофессиональные разработчики сайтов допускают одни и те же ошибки при создании Главной страницы.
-
Вывалить на главную абсолютно всё
Перегруженная Главная страница сайта выглядит максимально ужасно. Никому не хочется читать сплошную портянку текста или бесконечно скролить сайт, пытаясь выискать в этой помойке нужную информацию. Для подробного описания есть отдельные страницы, на Главную же стоит вынести только основную часть — превью с возможностью читать подробнее при переходе в нужный раздел.
Вот это трешачок. Сплошные полотна текста, милипиздрические картинки, либо закрытые текстом изображения на сайте дизайнеров интерьера, вместо крупных эстетичных фото крутых проектов — провальная Главная страница.
-
Забить на визуал
Захламлённый пестрый интерфейс — это дно. Но, когда мы говорим, что чем проще — тем лучше, не надо впадать в крайности. Это не значит, что и не стоит заморачиваться над дизайном. Простота должна быть продуманной и спланированной. Главный на сайте — контент. Качественно проработанная структура, хорошая типографика, минимум излишеств — и сайт будет выглядеть аккуратно и чисто. Уделите внимание фотографиям товаров или команды, оформите кейсы, добавьте качественные видеоролики при необходимости — всё это поможет выделить сайт, придать ему индивидуальность и запоминаемость. -
Навязчивые виджеты, всплывающие окна, музыка и видео
Постоянно дрыгающийся виджет или невпопад всплывающие окна негативно скажутся на впечатлении от сайта. Такие приёмы раздражают. У пользователя, скорей, появится желание уйти с сайта, а не оставить заявку во всплывающем окне, которое высыпалось уже в третий раз за 2 минуты. Всё должно быть в меру. Всплывающие формы нормально работают:- там, где требуется индивидуальный подбор продукта;
- для дорогих продуктов с длинным циклом сделки;
- в сфере услуг и B2B.
Отдельного внимания заслуживают модные звуковые эффекты или видеоролики со звуком. Важно предусмотреть возможность отключить звук, а ещё лучше — запуск его по желанию. Не очень приятно, когда ты открыл сайт со звуком, сидя на работе или только что уложив ребёнка спать.
Классный сайт с музыкальным сопровождением. Но резкий запуск звука слегка пугает неожиданностью.
А ещё такие решения значительно снижают загрузку сайта.
-
Самовосхваление и никаких выгод для пользователя
На сайт приходят люди, чтобы решить свои проблемы. Конечно, хочется рассказать всем, какая вы крутая компания, сколько у вас достижений, но важнее сосредоточиться на потенциальном клиенте и рассказать, как вы ему поможете решить его проблему, и какая выгода его ожидает от сотрудничества с вами. -
Сложная навигация
Навигация на сайте должна быть максимально понятной и комфортной. Слишком сложная и непонятная структура, отсутствие нужных разделов или поиска может негативно отразиться на поведенческих факторах посетителя. Человек просто закроет сайт и уйдёт, не найдя нужной ему информации. -
Непонятные заголовки
Большинство пользователей читают только заголовки, поэтому они сразу должны доносить суть того, что здесь предлагают. В противном случае пользователь просто уйдёт, потеряв интерес или не разобравшись.
Угадали по заголовкам, чем компания занимается и почему она круче конкурентов? Корабли и идеи! Сайт застройщика выставочных стендов ВИК. Дизайн WebValley Studio, копирайтинг — чужой.
-
Нет призывов к действию
Призыв, размещённый в нужном месте, направляет пользователя к совершению конверсионного действия. Отсутствие блоков СТА может привести к потере клиентов. -
Долгая загрузка страницы
Загрузка Главной страницы сайта напрямую влияет на конверсию. Если она грузится слишком долго, её просто закроют не дождавшись. Если сайт тормозит при скролле, закроют 100% — это жутко бесит. Поэтому важно не перегружать сайт спецэффектами в ущерб загрузке страницы. -
Нет контактов
Если на Главной странице нет вообще никаких контактов, это не только снижает конверсию, но и может натолкнуть на мысль, что компания ненастоящая. Если в вашем случае нет необходимости выносить контакты на Главную, позаботьтесь о том, чтобы с неё вела удобная и заметная кнопка на страницу Контакты. -
Очепятки и неграмотное оформление текста
Никому не приятно читать некачественный текст. Это говорит о неряшливости или наплевательском отношении к контенту, наводит на мысль, что и в работе с клиентами компания придерживается такого же подхода. Вычитывайте тексты, пользуйтесь сервисами проверки орфографии, если не уверены в собственной грамотности.
7 примеров оформления самых красивых, современных и стильных главных страниц сайта
Подборка эффектных Главных страниц от наших дизайнеров.
-
Pixelgrade
Максимально простая приятная страница, предлагающая шаблоны на WordPress. Удачная обложка — аккуратная и демонстрирующая продукт. Заголовок сразу даёт понять, где мы оказались и что тут предлагают. Справа размещены варианты шаблонов в виде карусели. Яркий контрастный фон не режет глаза и добавляет дружелюбности. Компания кратко, но информативно рассказала, что предлагает и какие выгоды от этого клиенту. Ничего лишнего.
Диван ру
Современный стильный интернет-магазин мебели. Их Главная страница — пример того, как надо делать. Здесь хорошо всё: удобное меню, грамотные фильтры, многообразие разделов, качественные фото, единая стилистика в оформлении, присутствуют все актуальные разделы, нет помойки из товаров, есть отзывы живых людей и большой информативный подвал.
Глэмпинг 4 Стихии
Приятный сайт, рассказывающий об отдыхе в эко-отелях. Отличный заголовок — «Отдых на природе с комфортом мегаполиса» даёт пользу и людям, предпочитающим тишину, и тем, кто любит городской комфорт. Удачно подобрана цветовая гамма: зелёный подчеркивает экологичность, а чёрный — расслабляет, настраивает на релакс, отсылает к премиальности продукта. На сайте качественные фото и индивидуальный пакет иконок — всё это говорит о скрупулезности подхода и располагает к компании. Контент изложен порционно, нет огромных портянок с текстом. Описаны услуги и привилегии для посетителей. Всё четко и по делу.
Гайд по Грузии
Необычный стильный гайд по Грузии от ребят «Катя и Ежи». Авторы прям заморочились. Для сайта отрисован индивидуальный пакет тематических иллюстраций. Собрана вся информация для начинающего путешественника, формат подачи дружелюбный, а изложение комфортное. Ребята позаботились о том, чтобы информация была полной, но не вываливалась сразу кучей, аккуратно спрятав её в поп-апы. Повествование в формате сторителлинга, где интересно не только читать текст, но и разглядывать рисунки. Визуальное повествование на высоте. И хотя Главная страница достаточно длинная, скроллить не устаёшь.
INGAIN
Главная страница этого премиального сайта дизайна интерьеров с первого экрана завораживает приятной анимацией и стильными фотографиями люксовых интерьеров. На сайте круто всё. Внимание к деталям здесь на высшем уровне. Качественный текст, грамотно изложенный, основанный на болях целевой аудитории, постепенно погружает посетителя в процесс работы компании. Микродетали и плавность скролла добавляют ощущение комфорта от нахождения на странице. Структура построена логично и последовательно. Изложены все выгоды и бонусы для клиента, этапы сотрудничества. Показаны классные кейсы и отзывы довольных покупателей. Каждый блок оформлен на высшем уровне, как и проекты компании.
Monolith Studio
Стильный сайт тату-салона — концептуальный, минималистичный, брутальный. Ребята подошли креативно и создали пространство, где есть и стиль, и свобода, и брутальный налёт. Эффектная 3D-фигура торса создает ощущение глубины и полёта. Стильное портфолио и классный блок команды — ничего лишнего. Создатели проекта как бы говорят: «Мы лучшие, и не нуждаемся в особом представлении». Структура чёткая и понятная: вот мы, вот наши крутые работы и отзывы довольных клиентов. Поехали =))
Школа программирования
Сайт школы программирования c понятным чётким офером. Структура Главной страницы отлично проработана под продажу курсов: что продаём, кто мы, как будем работать, какие для вас бонусы, спикеры, вопросы — разработчики учли всё. На сайте приятная цветовая гамма и крутая анимация пиксельных плашек, которая не нагружает интерфейс, а просто легко следует за пользователем на протяжении скролла и подогревает интерес. Она концептуально вписывается в эту нишу.
Чек-лист правильной главной страницы сайта
Чтобы вы ничего не забыли, мы подготовили чек-лист правильной Главной страницы сайта, без ошибок и просадок.
Автор статьи
Мария Дрокина
UI-дизайнер
20.12.2024
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.