Задача:
Разработать легкий, красивый дизайн сайта для волгоградской пивоваренной компании “Пивовар”. Помимо пива, завод выпускает и безалкогольные напитки. Необходим легкий, удобный и современный дизайн с акцентом на качество выпускаемой продукции и экологически чистое производство. Сайт должен информировать посетителя как о самом заводе так и о производимом продукте (пиво, лимонад, квас, вода и т.д.). Удобный, продуманный интерфейс должен обеспечить доступ к любой странице сайта минимальным количеством кликов. Заказчиком был предоставлен логотип, ставший основой стилистического направления сайта(закруглённые формы, шрифт с засечками, цветовые акценты и т.д.).
Так же необходима HTMLвёрстка страниц сайта.
Процесс:
Сначала вместе с заказчиком я спроектировал прототип главной страницы:
Прототип главной страницы
В дальнейшем при разработке всех макетов данный прототип, был взят за основу. После утверждения заказчиком прототипа, был изготовлен первый вариант главной страницы сайта:
Главная страница сайта
Немного изменив структуру прототипа я убрал из “шапки” контактные данные и разместил все ссылки навигации в одну строчку с логотипом. Ниже расположил небольшой приветственный текст с СЕО ключами, под ним большую яркую кнопку “Экскурсия по заводу”. Фоном для этого блока стала яркая иллюстрация с изображением продукции завода и природой на заднем плане. Это должно вызвать у посетителя устойчивую ассоциацию производимых напитков с чистотой, воздухом, летом, зеленью.
В левой колонке располагаются блоки с новостями и мероприятиями компании. Под ними рекламный банер с акциями и спец. предложениями завода.
Центральную часть страницы занимают разделы каталога, который разбит на основные группы. В каждой группе отображаются наиболее выгодные предложения для привлечения оптовых покупателей. Под основным блоком “Наша продукция” находится яркая кнопка “Вся продукция”. Нажав на неё, посетитель может перейти в раздел “Каталог ” и более подробно ознакомится с предлагаемой продукцией.
В “подвале” дублируются ссылки навигации по сайту а также крупно отображается контактный телефон. Под телефоном, ссылки на аккаунты компании в социальных сетях в виде иконок стилизованных под крышечки от бутылок. Ниже значок copyright с адресом предприятия. Что бы немного разбавить серость фона, я “положил” веточку хмеля.
После беседы с заказчиком было принято решение заменить центральную иллюстрацию и иконки оформления заголовков:
Главная страница. Вариант №2
Центральной частью иллюстрации стало изображение завода. Так как вид старого здания завода (более 130лет) совсем не вписывался по настроению в общую концепцию сайта, было решено его полностью отрисовать по фото предоставленной заказчиком. После прорисовки здание стало выглядеть намного чище, радостнее и интереснее. Природа на заднем плане текста также была заменена на вид города Волгограда. После всех изменений заказчик утвердил эскиз.
Придерживаясь утверждённого направления я сделал эскиз страницы “Продукция”:
Страница “Продукция”
При переходе на страницу “Продукция”, посетитель имеет возможность выбрать интересующий его раздел каталога с удобным разделением на алкогольные и безалкогольные напитки. Если посетитель ещё не выбрал группу товаров ему предлагается ознакомится с новинками из всех категорий.
В блоке с небольшой картинкой, заголовком и кратким описанием товара находится кнопка, при нажатии на которую можно подробно ознакомится с характеристиками продукта и посмотреть увеличенное фото:
Страница с подробным описанием продукта
Со страницы подробного описания товара есть возможность вернуться обратно в раздел.
Далее я сделал информационную страницу, где отобразил все возможные элементы которые могут присутствовать на всех остальных страницах сайта:
Информационная страница
После утверждения заказчиком всех макетов была выполнена HTMLвёрстка страниц.
