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

Рис.95. Хедер и преимущества

– Текстовые блоки: «О компании», «Для кого курсы», «Кто преподает», «Доставка и оплата» и т.д. Обычно они делятся на абзацы и оформляются картинками.

Рис. 96. Текстовой блок «О компании. История проекта»

– Каталог товаров или услуг.

Значительной ошибкой является не давать на первой странице сайта каталог товаров или модуль «Услуги». Посетитель пришел на сайт, чтобы выбрать услуги или купить товары, а не читать долгий текст об истории компании.

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

Рис.97. Каталог товаров на первой странице

– Отзывы, гарантии и прочие социальные доказательства.

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

Рис.98. Отзывы клиентов на сайте

– Контактные данные, форма лидогенерации, призывы

Контактные данные и форма обратной связи – важнейший элемент Главной страницы сайта. Именно они обеспечивает связь клиента и компании, служит источником лидов – звонков, заявок, заказов. Форма заявки должна быть на видном месте. Можно сделать её как всплывающее окно или выделить в блоке Меню. Лучше указать как можно больше контактов: номеров телефонов, адресов электронной почты, ссылок на страницы в соцсетях, мессенджерах, чтобы клиент мог обратиться в компанию удобным ему способом. Обязательно для продающего сайта нужно расположить на первой странице несколько форм обратной связи с призывами.

Форму обратной связи лучше подкрепить завлекающим предложением, например: «Закажите товар сегодня и получите промокод на вторую покупку!».

Рис.99. Контакты на сайте

Часто к контактам добавляют карту с адресом и схемой проезда к офису или магазину.

– Модули: «Частые вопросы», «Статьи», «Новости», «Как заказать», «Схема работы», «Кому подойдет», «Доставка и оплата».

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

Рис.100. Модуль «Кому подойдет сайт»

– Модули: «Партнеры», «Клиенты», «С кем мы работаем».

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

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

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

Рис.101. Подвал сайта (футер)

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

Глава 14. Веб-дизайн остальных страниц

В этой главе:

1. Список остальных страниц

2. Дизайн страницы «О компании»

3. Дизайн страницы «Контакты»

4. Страница «Новости»

5. Фотогалерея на сайте

6. Корзина товара

7. Дополнительные страницы

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

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