Сайт‑каталог вин и напитков

ГК Вилаш

О клиенте:

Вилаш – группа компаний, которая производит и импортирует вина и напитки. Работает с 1992 года.

Задача:

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

Перейти на сайт Перейти на сайт

Сайт с настроением винодельни

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

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

Путь вина раскрывается при прокрутке

У рассказа о компании есть последовательность: виноградники, завод, дистрибуция и продукт на полке. Мы разложили её на четыре сцены с крупными названиями и короткими пояснениями.

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

Ассортимент, в котором видны сами бутылки

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

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

Рассмотреть этикетку и продолжить выбор

В карточке мы разделили экран на две части: крупная бутылка на спокойном фоне и информация о напитке. Объём, сахар и крепость вынесли в подписи с иконками рядом с бутылкой. Название, описание и подходящие ситуации собраны справа.

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

За этикеткой – производство

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

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

Выбрать вино на телефоне

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

Из списка напитков посетитель переходит в карточку. Сначала рассматривает бутылку, затем читает характеристики и смотрит другие вина. Широкая настольная композиция становится последовательным рассказом по вертикали.

Что мы сделали

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

Открыть сайт Вилаш Открыть сайт Вилаш
  • Визуальный язык с винной палитрой и фотографиями в белых рамках
  • Главный слайдер со сменой фонового изображения
  • Рассказ о пути вина с анимацией при прокрутке
  • Каталог с категориями, фильтрами и заметными этикетками
  • Карточки напитков с продолжением выбора
  • Страницу производства и мобильный каталог

Напишите нам
о своём проекте

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

Похожие проекты

Сайт оператора связи
Сайт благотворительной организации
Сайт интегратора систем безопасности и связи
Сайт-каталог негорючих тканей
Сайт машиностроительного предприятия
Сайт компании порошковой окраски
Сайт производителя мебели
Сайт ресторанной группы