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

(первая страница):

1. «Шапка» (хедер).

2. Меню.

3. Промо-блок с акциями и спецпредложениями (топ товаров, новинки и т.д.).

4. Модуль «Повышение лояльности» с реальными отзывами, гарантиями, лицензиями, сертификатами, наградами и пр.

5. Информационный блок с основными ключевыми словами и преимуществами компании.

6. Контакты.

7. «Подвал» сайта (футер).

Обратите внимание: для дизайна интернет-магазина слайдер или большой баннер с УТП не является обязательным. На таком сайте основная задача – сразу перевести внимание посетителя на каталог акционных или популярных товаров, не отвлекать его лишними деталями от покупки или заказа товара.

Разберем подробнее основные модули внешней структуры.

3. «Шапка» сайта, меню и слайдер

«Шапка» сайта (хедер)

Зачем нужна «шапка» сайта

Хедер (от англ. «header» – заголовок) – это верхняя плашка, верхняя часть сайта. «Шапка сайта» – это первое, что видит посетитель сайта. При правильном заполнении она помогает удостовериться, что пользователь зашел на нужный сайт.

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

Такие элементы, как логотип и слоган – участвуют в формировании бренда и узнаваемости компании.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

– Кнопки:

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

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

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

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

– Вакансии,

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

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

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

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

См. рис. 63.

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

Меню сайта

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

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

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

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

В меню часто бывают ссылки на разделы каталога, новинки, акции (в случае интернет-магазина). Если в хедер не поместились ссылки «О компании», «Контакты» и «Доставка и оплата», – добавьте их в основное (ТОП) меню.

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

Баннер в шапке

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

На баннере (слайдере) могут располагаться следующие элементы сайта:

– Оффер (заголовок сайта).

– Кнопка «Перейти в каталог», «Узнать подробнее» и т.д. Это кнопки CTA (призыв к действию).

– Краткие преимущества фирмы.

– Перечень основных продуктов или услуг.

– Стрелки или иконки смены кадров.

– Свежие акции,