Дизайн сайта для Волгоградской пивоваренной компании «Пивовар»

08.01.2014

Задача:

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

Так же необходима HTMLвёрстка страниц сайта.

Процесс:

Сначала вместе с заказчиком я спроектировал прототип главной страницы:

Прототип главной страницы

Прототип главной страницы

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

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

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

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

В левой колонке располагаются блоки с новостями и мероприятиями компании. Под ними рекламный банер с акциями и спец. предложениями завода.

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

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

После беседы с заказчиком было принято решение заменить центральную иллюстрацию и иконки оформления заголовков:

Главная страница. Вариант №2

Главная страница. Вариант №2

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

Придерживаясь утверждённого направления я сделал эскиз страницы «Продукция»:

Страница "Продукция"

Страница «Продукция»

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

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

Страница с подробным описанием продукта

Страница с подробным описанием продукта

Со страницы подробного описания товара есть возможность вернуться обратно в раздел.

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

Информационная страница

Информационная страница

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

Спасибо за внимание!

Метки: , ,

Комментировать работу

Яндекс.Метрика