Задача:
Результат:
Мы сделали интерфейс интернет-магазина не только удобным и красивым, но и снабдили его рядом «изюминок», интерактивными механизмами информирования об особенностях вин и стимулирования продаж. Отдельная гордость — страница вина — лаконичная, и в то же время яркая и информативная.
![Главная страница](https://userhouse.ru/i/project/result/images/HB_Main_hr.jpg)
Главная страница
Каталог вин
![Страница вина](https://userhouse.ru/i/project/result/images/HB_Wine_hr.jpg)
Страница вина
Результат работ
Процесс:
В первой версии дизайн-концепции мы пошли по пути минималистичного стиля, но с яркими вкраплениями пиктограмм разных типов товаров и рисованных стикеров в фирменном стиле, которые выделяют особые вина и спецпредложения из списка. Страницу товара мы полностью выстроили вокруг главного героя сайта – бутылки вина:
![Первая версия концепции](/i/project/pictures/HappyBottle/HB_concept_var_1.0-hr.gif)
Вторая версия концепции изменилась незначительно, а вот третья версия стала ближе к фирменному стилю. Добавились текстуры, шрифты стали более затейливы, бутылки решено было фотографировать на прозрачном фоне и размещать на сайте без рамок. Были проработаны фильтры, позволяющие выбрать любое сочетание параметров продукта и «на лету» смотреть, как меняется ассортимент:
![Третья версия концепции](/i/project/pictures/HappyBottle/HB_concept_var_3.0-hr.gif)
Утвердив концепцию в таком виде, прорабатываем варианты главной страницы. Предлагаем выделять главный блок харакерными патернами в разных вариантах, или использовать тематические изображения, поверх которых размещены обтравленные по контуру бутылки:
![Варианты главной страницы](/i/project/pictures/HappyBottle/HB_main_var_4.0-hr.gif)
В финальном варианте главной страницы вместе с заказчиком решаем еще ближе приблизиться к фирменному стилю, уйдя от дополнительных цветов и графических элементов. Шире используем один из основных элементов стиля: фирменный красный «бабл». Определяемся с контентом: верхний блок объясняет, зачем это все нужно, затем идет одна из главных «фишек»: тематические сеты, составленные сомелье, потом – самые интересные предложения и акции по винам, затем – уникальные образцы из разных стран.
В финальном дизайне каталоге проработали подачу одной из главных особенностей сайта — вина, специально подобранные сомелье. У таких вин есть пиктограмма в виде «баббла». При наведении на бутылку «баббл» раскрывается вместе с дополнительной информацией о вине. Отрисованы финальные стикеры, в том числе указания на страну из уникальной коллекции (в данном случае — Италия). Придуман и показан « юприз от HappyBottle»: у случайных пользователей в каталоге появляется бутылка, завернутая в фирменную упаковку. При наведении на нее предлагается получить бутылку вина в подарок при следующем заказе, расшарив информацию о магазине в социальной сети.
![Финальный вариант главной](/i/project/pictures/HappyBottle/HB_catalon_10.0_bubble-hr.gif)
Проработанный фильтр каталога. С помощью самого продвинутого фильтра среди конкурентов можно подобрать все: цвет, бренд, цену, урожай, рейтинг и даже то, к каким блюдам подходит вино. Все это – в любых сочетаниях. По каждому из атрибутов фильтра видно, сколько вин из ассортимента по нему доступно.
![Проработанный фильтр каталога](/i/project/pictures/HappyBottle/HB_catalog_10.0_fliter-hr.gif)
Финальный дизайн страницы вина. В проработанном варианте пришли к окончательному составу блоков, подсказывая покупателю сопутствуюшие товары, другие вина производителя, доступно расскзывая о свойствах. Сделан больший акцент на «бабблах» с высказываниями сомелье о вине. Отрисовано два варианта страницы: с полными заполнением и вариант, когда информации о вине еще мало.
![Проработанная страница вина](/i/project/pictures/HappyBottle/HB_wine_10.0_2var_hr.png)
Поделиться в соцсетях
Другие проекты по проектированию интерфейсов
![Маркет Красок](https://userhouse.ru/i/client/logos/_Market_Krasok_2_hr.png)
![Mail.ru Group](https://userhouse.ru/i/client/logos/_Mail_2_hr.png)
![Ultima](https://userhouse.ru/i/client/logos/_Ultima_2_hr.png)
![Yota](https://userhouse.ru/i/client/logos/_Yota_2_hr.png)
![Forex Club](https://userhouse.ru/i/client/logos/_ForexClub_2_hr.png)
![ILP Agency](https://userhouse.ru/i/client/logos/_ILP_2_1_hr.png)
![VVP Group](https://userhouse.ru/i/client/logos/_VVP_2_1_hr.png)
![ТрансКонтейнер](https://userhouse.ru/i/client/logos/_TK_2_hr.png)
![Резонит](https://userhouse.ru/i/client/logos/_Rezonit_2_hr1.png)