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

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

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

Схема «шапки» сайта

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

Элементы «шапки» сайта:

– Логотип компании

Обычно располагается в левом верхнем углу сайта. Его площадь не должна занимать более 20-25% всего хедера. Добавьте в него ссылку на главную страницу (на большинстве сайтов делают именно так, поэтому пользователи уже привыкли к такой схеме.)

– Краткая информация о компании (направление деятельности)

Укажите кратко вид деятельности компании. Это поможет посетителю сайта сразу понять, куда он попал. Например: «Аренда спецтехники в Краснодаре» или «Сайт директолога, продвижение сайтов с высокой конверсией».

– Контакты (адрес, телефон, электронная почта, Ватсапп).

Контакты обычно располагаются справа «шапки». Изредка их ставят по центру хедера. Можно разместить один основной номер (например, 8-800…), настроить автоматическое отображение номера для отдельных регионов (актуально, если ваш магазин работает по всей стране или миру), или сделать раскрывающийся список с выбором подходящего номера. Номер можно сделать активным: подключить набор номера, чтобы пользователь мог позвонить вам при нажатии на номер телефона (в мобильной версии сайта).

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

– Корзина товаров

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

– Дополнительная информация

Для ранжирования сайта в поисковой системе по коммерческим факторам важным будет добавление следующей информации в хедер:

– часы и график работы;

– адрес компании;

– геолокация (где находится фирма) или выбор города;

– регионы доставки;

– заказ обратного звонка;

– поиск по сайту;

– вход в «Личный кабинет» и «Регистрация на сайте».

– избранное и список сравнения (для интернет-магазинов).

– Кнопки:

Кнопка «Заказать обратный звонок», кнопка переключения языков интерфейса, кнопки-ссылки на мобильную версию или версию для слабовидящих;

Иногда в «шапку» сайта входит дополнительное меню сайта (О компании, Вопросы и Ответы, Контакты). См. рис.64.

Что не стоит располагать в «шапке» сайта:

– большие фотографии

– Вакансии,

– Политику обработки данных,

– длинные тексты,

– ссылки на соцсети.

Постарайтесь не перегружать шапку лишними элементами и не делать под ней пестрых подложек. Лаконичный стиль в данном модуле приветствуется.

См. рис. 63.

Рис.63. Схема «шапки сайта»

Меню сайта

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

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

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

Рис. 64. Пример «шапки» сайта с меню и слайдером