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

Ключевая идея
Изначально предполагалось использовать блоки дизайн-системы, которую мы разработали для корпоративного сайта СИБУРа. Однако при таком подходе дизайн получился бы слишком строгим и корпоративным. Специфика направления Сибур-Юг требовала переосмысления системы и поиска проморешений, которые сделают сайт более дружелюбным.
Digital-айдентика
Новая дизайн-система и визуальные решения вдохновлены константами брендбука. Градиент от желтого к бирюзовому передает настроение «Моря и солнца», привнося в дизайн яркие и свежие акценты. Фирменная графика тиражируется на конкретные UI элементы: карточки анонсов, слайдеры, кнопки.

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

Главная страница
Все три основных направления Сибур-Юг мы объединили на главной странице в промоблоке, с поочередной сменой при скролле. Прелоадер с ключевыми слоганами «море солнца / позитива / здоровья / отдыха» в сочетании с яркими фотографиями и анимацией задает атмосферу отпуска.

Разработка
Стек проекта включает в себя Pug, SCCS, TypeScript и нативный JavaScript. Поскольку на Сибур-Юг используется компонентный подход при разработке, благодаря SCSS удалось сократить количество кода в десятки раз в большинстве компонентах.
Для реализации интерактивности на страницах сайта используется нативный JavaScript, который выигрывает в производительности перед JS-фреймворками и библиотеками.

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

Результат
Сайт для Сибур-Юга визуально отсылает к корпоративному сайту и в то же время выглядит уникально за счет насыщенной цветовой палитры. Благодаря необычным визуальным решениям нам удалось сбалансировать позиционирование бренда и промонаправленность сайта курортного комплекса.
