Дизайн корпоративного сайта издательско-полиграфической фирмы «Духовная Нива»

Изготовлено:18 июля 2017 г.
Сделать редизайн сайта издательско-полиграфической фирмы «Духовная Нива». Разработать интерфейс калькулятора для расчёта стоимости цифровой печати. Дизайн должен быть простым, но информативным. Необходимо максимально отразить полиграфическую тематику.

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

В результате было отрисовано 7 типовых страниц. Все они позволят верстальщику и программисту разработать шаблон для системы управления сайтом, так как клиент планирует администрировать сайт самостоятельно.

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

Карта сайта
Карта сайта

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

Главная страница разделена на 2 основных слоя. Первый — это секция с коммерческим предложением и кнопкой «Быстрый заказ», что инициирует открытие модального окна с простой формой (с полями ФИО, телефон и email). Ссылка «Калькулятор цифровой печати», расположенная справа от кнопки, перенаправит посетителя на страницу с расширенной формой, где клиент может выполнить предварительный расчёт стоимости тиража и отправить заявку, что поможет минимизировать дальнейшую работу менеджера. Второй слой — это секция с основными услугами. Было предложено отказаться от стандартного списка с услугами, которые можно увидеть на сайтах большинства типографий, а представить их в виде изображения (превью) и заголовка. Это связано с тем, что далеко не каждый клиент, сможет определить, какой именно тип полиграфической услуги ему нужен. Такое графическое решение значительно упростит процедуру выбора, так как такой формат является более интуитивно понятным.

страница верстаетсяГлавная страницаГлавная страница

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

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

страница верстаетсяСтраница с информациейСтраница с информацией

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

страница верстаетсяТекстовая страницаТекстовая страница

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

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

страница верстаетсяКалькуляторКалькулятор

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

страница верстаетсяСтраница с контактамиСтраница с контактами

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

страница верстаетсяОшибка 404Ошибка 404

На сайте используются 4 основных цвета, а также различные варианты с их прозрачностью.

#FE5206
#E5E5E5
#3D3D3D
#000000
Основные цвета

В качестве основной была выбрана гарнитура без засечек Pt Sans с начертанием Regular. В качестве дополнительной используется гарнитура с засечками Playfair Display, но уже с начертанием Bold.

Данная гарнитура используется для основного текста
Данная гарнитура используется для основного текста
Данная гарнитура используется для дополнительного текста (заголовки, кнопки и т.д.)
Данная гарнитура используется для дополнительного текста (заголовки, кнопки и т.д.)

Сайт находится на этапе вёрстки.