Создание дизайна и сайта на Тильде для сайта Bio Prospect

Анастасия
Web-дизайнер

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

Кейс Bio Prospect

bioprospect.ru

О проекте

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

Была выбрана резиновая верстка, что позволило подстраивать контент в ширину экрана как в ноутбуке, так и на full HD мониторе. Этот тип верстки существенно отличается от обычной, так как требует позиционирования объектов в процентах от ширины монитора. Мы создали больше расширений, чем обычно предоставляет Тильда, и провели тестирование на множестве устройств, прежде чем осуществить релиз.

Дизайн получился стильным, лаконичным. Монохромная палитра ui-ux идеально сочетается с яркими фото продуктов, акцентируя на них внимание. Сайт подстраивается под ширину экрана. Фон для баннеров выбрали в стиле уже готовых упаковок: яркие, привлекательные, с эффектом глубины. На первом экране размещён слайдер, который презентует актуальные товары, новинки и акции.

Второй слайдер на самом деле состоит из двух маленьких слайдеров. Эффект синхронизации достигается за счет одновременного переключения слайдов и тщательно подобранных изображений. Для достижения зависимости между слайдами при их переключении использовался Slick Slider — это jQuery плагин для создания на сайте слайдера любой сложности. К тому же, этот слайдер выполнен в вертикальной ориентации, что необычно для традиционных слайдеров — это стало своеобразной изюминкой дизайна.

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

Так как проект создан на платформе Tilda, карточки товаров легко обновляются без участия разработчика. Мы немного доработали стандартный формат деталки, чтобы она выглядела органично общему стилю проекта.

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

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

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