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

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

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

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

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

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

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

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

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

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

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

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

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

В этой главе:

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

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

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

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

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

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

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

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

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

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

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

Когда утверждена первая страница, веб-дизайнер делают дизайн следующих страниц:

– О компании (в неё может включаться следующие модули или подразделы: «История компании», «Миссия и ценности», «Вакансии», «Обратная связь», «Наши сотрудники» и т.д.).

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

– Статьи.

– Каталог (все товары по категориям).

– Новости.

– Доставка и оплата.

– Услуги.

– Фотогалерея, выполненные работы, портфолио.

– Прочие, необходимые страницы, если они отличаются от типичных.

Формат и размер остальных страниц будет точно такой же, как и на Главной странице, ширина остается та же – 1920 пикселей, может меняться только размер по высоте, который зависит от количества модулей.

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

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

Подразделы (подзаголовки) страницы «О компании»:

– История компании, описание деятельности.

– Преимущества компании, отличие от конкурентов.

– Производство (текст, фото, видео).

– Слоган и текст о компании в цифрах.

– Сотрудники и руководители («Наша команда»).

– Миссия и ценности.

– Ответы на основные вопросы о компании и её товарах (услугах).

– Схема работы с компанией.

– Адреса филиалов, описание отделений компании (или отделов).

– Видео о компании (о производстве).

– Презентации в формате pdf, видеопрезентации.

– Коммерческие предложения, прайсы, брифы, техзадания.

– Виртуальный тур по офису компании.

– Ссылки на другие разделы сайта, например, после описания продукции присутствует кнопка «Перейти в каталог».

– Вакансии.

– Сертификаты, лицензии, допуски.

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

– Партнёры и ключевые клиенты.

– Новости компании.

– Подробное описание услуг.

Как оформить текст «О компании»

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

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

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

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

Если текста много, можно разбить страницу «О компании» на несколько отдельных страниц, например: выделить отдельно «История компании», «Наши ценности», «Вакансии», «Производство» и т.д.

3. Контакты

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

Подразделы страницы «Контакты»:

– Адреса компании и её филиалов, подразделений, офисов, магазинов, складов, производства.

– Телефоны: основного офиса компании, дополнительных филиалов, отделов, менеджеров по продажам, отдельных сотрудников, склада, производства, доставки, отдела качества, возврата товара и т.д. Телефон-факс.

– Время работы.

– Электронная почта общая и отдельных сотрудников.

– Соцсети