Vitateka — сайт живительной силы

Vitateka — аптечное направление одной из крупнейших фармкомпаний России «ПРОТЕК», под этой торговой маркой компания производит косметику, БАДы и изделия медицинского назначения. Чтобы познакомить потребителя с маркой, решено было создать для нее индивидуальный сайт.


Задачи

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


Решение

Заказчик предоставил нам гайдлайн по дизайну упаковки, где ключевые элементы — витальные компоненты. На его основе мы разработали дизайн всего сайта.

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

Промоблок на сайте — слайдер, состоящий из четырех слоев: полукруг-фон, витальный компонент слева, упаковка, компоненты справа. Чтобы все это согласованно двигалось, пришлось подгонять каждый элемент под размеры слайдера.

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

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

Страницу 404 мы анимировали: если пользователь ошибся адресом, то вся его досада по этому поводу будет развеяна парящим по странице витальным компонентом.

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