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

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

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

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

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

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

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

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

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

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

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

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

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

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

– Свежие акции, спецпредложения для интернет-магазинов.

– Форма заявки или обратной связи.

– Слоган компании.

– Фоновая картинка или видео, привлекающие внимание посетителей и соответствующие теме сайта.

Рис. 65. Пример баннера с формой обратной связи и преимуществами

Слайдер

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

Популярность слайдеры приобрели с распространением javascript-фреймворков. Именно с помощью них создаются различного рода эффекты анимации на слайдерах. Сейчас существует достаточно много готовых решений, не требующих программирования, например RoyalSlider, SlideDeck, NivoSlider, Supersized и другие. Для популярных систем управления сайтом разработаны различные плагины с реализацией слайдеров с множеством эффектов. К примеру, для WordPress это плагин Con Slider, Slideshow Gallery, Content Slide. В большинстве случаев слайдеры создаются на основе ресурсов библиотеки JQuery, однако собственный слайдер можно разработать и средствами HTML5 и CSS3 практически без использования скриптов!

На конструкторах сайтов существуют готовые модули слайдеров, в которые можно вставить фоном фотографию или видео.

Устройство слайдера сайта

Стандартный слайдер для сайта представляет собой смену кадров: 2-5 картинок, которые сменяют друг друга через определенный временной интервал или при ручном нажатии на переключатели.

В целом можно выделить следующие составные элементы любого слайдера:

– Экран с фото или видео.

– Средства навигации (стрелочки, кнопочки).

– Маркеры с общим количеством слайдом и текущим состоянием.

Рис. 66. Слайдер сайта со сменой картинок

Требования к слайдеру