Как сделать дизайн шапки сайта

7 простых советов по созданию шапки продающего сайта

Приветствую, уважаемые читатели.

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

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

Пример шапки:

1. Логотип

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

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

2. Контактный телефон.

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

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

3. Навигационное меню.

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

4. Точный и лаконичный заголовок.

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Такие несложные размышления позволят вам придумать красивый и понятный заголовок.

5. Тематическая иллюстрация.

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

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

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

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

6. «Текст доверия».

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

7. Простая форма обратной связи.

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

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Максимум 3 поля – Имя, телефон и E-mail. Или еще какое-нибудь, которое требует специфика компании, для которой разрабатывается дизайн.

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

Несколько хороших шапок напоследок:

Шапка сайта «Русское Поместье»

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Шапка сайта логистической компании

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Шапка сайта компании «Такси Хорошее»

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Шапка сайта компании «REKLAMARKET»

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Шапка сайта компании «ВОЛНАКОЛОР»

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Шапка сайта компании «Спело Зрело»

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Премиум уроки от WebDesign Master

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Создание сайта от А до Я. Комплексный курс

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Создание современного интернет-магазина от А до Я

Источник

Как сделать шапку сайта

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Преимущества и содержание

Наличие уникальной шапки (header) дает немало плюсов:

Для специалиста вопрос того, как сделать шапку для сайта в короткие сроки, является простым. Новичку же придется изучить приличное количество материала на эту тему. Если вы собираетесь всерьез освоить веб-строительство, создавать контент и графику, вам необходимо разобраться с HTML, CSS, научиться пользоваться Photoshop и другимм программами. На сервисе 1С-UMI эта задача уже решена ― в ассортименте сотни шаблонов с уже готовыми привлекательными шапками, достаточно разместить свой лого, слоган и изображения, можно добавить индивидуальности при помощи стилей.

Верхний блок должен содержать:

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

Как сделать шапку сайта?

Существует три способа выполнить задачу.

Как разместить блок?

Вы сделали элемент, но это только часть работы. Теперь его нужно интегрировать в структуру ресурса. Если у вас сайт на 1С-UMI, перейдите в режим редактирования и кликните по блоку с шапкой, загрузите и вставьте нужную картинку. При необходимости изменить дизайн поработайте со стилями в CSS.

Пример, как сделать шапку сайта CSS:

В описании #header удалите имеющиеся значения и обозначьте ширину и высоту вашего изображения.

#header <
width: ширина px;
height: фон px;
background-color: #25B33f; — фон
margin-bottom: отступ снизу px;
>

Как сделать шапку сайта HTML:

В тег body вставьте div, идентифицировав его с двумя заголовками h1 и h3, которые являются названием и описанием соответственно.

название

описание

Придайте вид заголовку и тексту — создайте для них два описания и укажите такие свойства:

Размещение на WordPress

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

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

Работа на конструкторе

Не все владельцы ресурсов имеют необходимые навыки для самостоятельного создания сайтов и их элементов. В таких случаях лучше всего создать сайт на конструкторе и доработать готовый шаблон, чтобы сделать его непохожим на типовые сайты. На сервисе 1С-UMI это можно сделать самостоятельно. В библиотеке сервиса предусмотрено более 500 готовых шаблонов, поэтому вам понадобится всего лишь пара минут, чтобы сделать полноценную верхнюю часть ресурса. Обратите внимание: здесь нет возможности рисовать элемент с нуля. Однако в шаблонах доступно изменение текста, шрифта, картинки, а также стилизация готовых элементов через CSS. Преимущества такого исполнения: вы тратите минимальное количество времени, но получаете результат, который полностью подходит и соответствует требованиям.

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

Источник

Создание шапки для сайта: полезные советы и примеры цепляющих хедеров

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Шапка сайта (Header, Хедер) – это первый элемент, на который обращает внимание посетитель. Если рассматривать веб-страницу как архитектурную модель, то футер сайта – это подвал, контент – окна и стены, а хедер – крыша, которая находится на самом верху. Ухоженная и красивая черепица частного дома бросается в глаза. Точно так же и шапка на сайте должна быть привлекательной и релевантной. Header входит в категорию тех компонентов ресурса, от которых напрямую зависит конверсия и прибыль. В статье мы разберем:

Каким из представленных сайтов можно гордиться своей шапкой?

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

Вариант 1. Интерьерная фотостудия Fusion

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Вариант 2. Сеть шиномонтажных центров и автомоек

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Вариант 3. Производитель мармелада «Русский кондитер»

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

Назначение хедера: как сделать правильно

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

Содержание шапки сайта

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

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

Проектирование шапки для сайта

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

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

И производная из него Z-образная модель, которая актуальна при просмотре более насыщенных и длинных страниц.

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Диаграмма Гутенберга. Усовершенствованный Z-паттерн. Описывает поведение пользователя при просмотре информации на экране с учетом дальнейшего скроллинга. То есть принцип при каждой смене экрана повторяется. Схема условно представлена четырьмя зонами. На первую, где в случае с шапкой обычно находится логотип/слоган, пользователь смотрит всегда и сразу. При переходе во вторую зону внимание ослабляется, но еще остается сконцентрированным. Потому вдоль хедера согласно этой схеме размещается важная информация (оффер, контакты, режим работы, форма обратной связи). Третья зона остается без внимания. На нее читатель тратит доли секунды. Четвертая – заключительная – способствует принятию решения: уходить или остаться.

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Во всех вариантах одна закономерность – первое впечатление, так или иначе, формируется на основе зрительных зон 1 и 2, а именно верхнего блока. Это подтвердили эксперименты компании Nielsen Norman Group. Отсюда вывод, что пользователям Header сайта дает ключевую информацию и представление о том, куда они попали, а UI/UX дизайнерам – возможность грамотно презентовать ресурс и привлечь потенциальную аудиторию.

Визуализация и читаемость шапки для сайта

Единой панацеи для всех ниш и видов ресурса не существует. Чтобы понять, какой цвет, шрифт и фон хедера подходит лучше всего, проводятся исследования и А/В тестирования, когда разные группы людей видят различный материал на одном и том же сайте. Однако основная задача одна: сформировать у посетителя положительное мнение о странице за наименьший промежуток времени. Header может по-разному себя вести во время скроллинга:

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Двойное меню. Удобный и информативный хедер, который разделен на две строки. В качестве примера представляем сайт для бренда радиостанций «Терек», созданный веб-агентством Web112. Верхний ряд представлен ссылками на соцсети, контактами и кнопкой обратной связи. Второй – более полный, с логотипом, описанием услуги и ссылками на основные разделы проекта. Во время скроллинга первая строка «уходит» за экран, а вторая – «сопровождает» пользователя. Шапка доступна, легко читаема и выглядит дружественно.

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

На большом экране страница выглядит так.

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

А на экране смартфона вот так.

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

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

Качественный Header: разбор основных и второстепенных моментов

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

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

Рассмотрим, какие элементы актуальны для шапки и что нужно учитывать в разработке:

1. Логотип. На продающих сайтах размещается традиционно в верхнем левом углу. Через него пользователь может попасть на главную из любой другой страницы. Но на самой главной лого должно быть изображением, иначе ссылка становится цикличной и страница ссылается сама на себя. Это вредно для SEO. С первого взгляда посетителю нужно понимать, где он находится независимо от того, пришел ли он через органический поиск или контекстную рекламу. Чем дольше человек изучает страницу, чтобы разобраться, что и почем, тем выше вероятность отказа. Делать логотип огромным не стоит, достаточно 40-60 пикселей в высоту. На примере сайта-каталога для мебельной компании «Мебель-S», еще одного выходца из нашего портфолио, мы видим, как лого в шапке сразу сообщает: «Вы в магазине мебели».

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

2. Краткое описание. Так называемый «текст доверия», который размещается рядом с логотипом и дает пользователю емкую информацию об услугах и выгодах сотрудничества с компанией. Можно вместо описания вставить УТП (уникальное торговое предложение). Оно может выглядеть совершенно по-разному, в виде одной фразы или краткого списка. В качестве примера взгляните на разработанный нами сайт для трейд-маркетингового агентства POS Management. А точнее, на его шапку, в которой обозначено вхождение агентства в ТОП-10.

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

4. График работы. Ценность этой информации в хедере зависит от специфики услуг. Если это сервис аварийного открытия замков, то человеку, который не может попасть в квартиру, время работы будет, безусловно, важно. Либо же автосервис, в котором водитель нуждается прямо сейчас, в связи с чем часы работы для него – первостепенная информация. Для подобных сайтов это не просто повышение удобства пользователя, но и весомый коммерческий фактор ранжирования в Яндексе. Компания работает круглосуточно и по выходным? Подчеркните это надписью в шапке. Кстати, подробнее о том, как создать качественный сайт для автосервиса, который не стыдно продвигать в поисковиках, вы можете прочитать в статье «Создание сайта для автосервиса: особенности SEO и выбор CMS».

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

6. Тематическая графика. Анимированные шапки, сменяющие друг друга картинки, различные эффекты, видео или просто статичные изображения – зависит от специфики сайта и вкуса. Разумеется, важно сопоставлять пожелания с тематикой и возможностями. Если бюджет позволяет, можно потратиться на фон для шапки и сделать тематическое видео, которое не будет отвлекать от главной информации, но значительно повысит привлекательность. В остальных случаях лучше проще, но качественнее во всех аспектах, чтобы не страдали юзабилити, удобство, релевантность и SEO-продвижение. Главное, чтобы хедер отражал деятельность компании и располагал к себе. Например, если организация обучающая, вместо безликой симпатичной иллюстрации лучше показать сам процесс оказания услуг. Или, если это доставка пиццы, то один из лучших вариантов для фона – дружелюбного вида курьер с аппетитной пиццей в руках. Показывайте товар лицом, направляйте потенциальных клиентов на правильные ассоциации.

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

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

Как сделать дизайн шапки сайта. Смотреть фото Как сделать дизайн шапки сайта. Смотреть картинку Как сделать дизайн шапки сайта. Картинка про Как сделать дизайн шапки сайта. Фото Как сделать дизайн шапки сайта

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

Размещать кнопку призыва к действию в шапке или в каком-либо другом месте – решать вам вместе с маркетологами. Обычно элементы СТА (call-to-action) в хедер не вставляют, если сайт сделан для магазина с большим разнообразным ассортиментом в сегменте B2С. Если кнопке все же нашлось место в Header, она должна выглядеть заметно, но ненавязчиво, без кричащих призывов.

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

Еще несколько рекомендаций по созданию грамотной шапки сайта:

Правильный ответ на «шапочный» тест

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

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

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

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

Создание шапки для сайта: подводим итоги

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

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

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

Источник

Добавить комментарий

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