ROXOL - Корпоративный сайт с каталогом продукции для производителя смазочных материалов

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

- Анализ и создание новой структуры главной страницы для повышения доверия пользователей, увеличения информативности и стимулирования продаж.

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

- Разработка удобной навигации по сайту.

Улучшили каталог, оптимизировав его структуру и содержание на основе аналитики сайта. 

Обновили внешний вид карточек товаров и сделали их более информативными, не затрагивая логику. 

Исправили иерархию текстового контента на сайте. 

Внесли изменения в структуру главной страницы и добавили новые блоки. 

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

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

Создали удобный и понятный дизайн корпоративного сайта, адаптированный под потребности целевой аудитории. Использовали 5-колоночную сетку для структурирования контента. Основным фоном выбрали бежевый цвет, а акцентный цвет – жёлтый, фирменный для компании "Роксол". Шрифт гротеск подчёркивает уверенность компании и хорошо сочетается с дизайном. Подобрали сочетающиеся цвета и текстовые стили для удобной иерархии. Скругления элементов ассоциируются с лёгкостью и мягкостью смазочных материалов.

На первом экране главной страницы добавили 2 баннера, включая один с 3D-изображением подшипника, созданным с нуля. Этот баннер ассоциируется с использованием смазочных материалов в производственных машинах. Также включили блок с популярными товарами для привлечения внимания пользователей. Разместили блок "Аналоги", оптимизировав его содержимое и дополнив иконками для лучшего восприятия. Добавили два промо-блока для создания впечатления и запоминания сайта.

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

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

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

Примеры некоторых страниц, которые выполнены с сохранением визуальной стилистики.

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

Для целевой аудитории в возрасте 40-50 лет мы ограничили использование анимации, чтобы не создавать избыток визуальных эффектов. Вместо этого, мы сделали интерактивными кнопки, ссылки и некоторые текстовые блоки, используя эффекты прозрачности. Глобальные анимации и переходы применялись только на основных страницах для увеличения времени пребывания на сайте, облегчения освоения информации и поддержания интереса пользователей.

Фронтенд сайта оптимизирован с помощью HTML, CSS и JavaScript, ускоряя загрузку страниц и улучшая индексацию поисковыми системами. Бэкенд реализован на PHP с использованием CMS OcStore для управления контентом. Особое внимание уделялось плавной и быстрой анимации, подчеркивающей высокий уровень компетенции и качества компании.

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

Структурировали контент, выделив основную информацию и создав удобную иерархию. Улучшили информативность карточек товаров и добавили форму обратной связи. 

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

В результате создали новый визуальный стиль, привлекающий новых клиентов, повышающий вовлечение и увеличивающий продажи продукции.