Key idea

Initially, it was intended to use blocks from the design system we developed for SIBUR’s corporate website. However, this approach would have made the design too formal and corporate. The specifics of Sibur-Yug direction required reconsidering the system and searching for promotional solutions that would make the website more welcoming.

Digital identity

The new design system and visual solutions are inspired by the brandbook constants. The gradient from yellow to turquoise conveys the “Sea and Sun” mood, bringing bright and fresh accents to the design. Branded graphics are replicated on specific UI elements: announcement cards, sliders, buttons.

Structure

At the start, we had numerous pages with poorly designed nesting. We redesigned and lightened the structure, prioritizing information around the target audience.

Home page

We have combined all three key Sibur-Yug themes on the home page in a promotional block, changing alternately as you scroll. Preloader with the key slogans “sea of sun / positivity / health / relaxation” in combination with bright photos and animation sets the atmosphere of a vacation.

Development

The stack of the project includes Pug, SCCS, TypeScript, and native JavaScript. Since Sibur-Yug uses a component-based approach to development, SCSS has reduced the amount of code dozens of times in most components.

Native JavaScript is used to implement interactivity on the website pages, with performance benefits over JS frameworks and libraries.

The website is built using block structure, which allows you to quickly assemble pages, as well as reuse, scale and adapt blocks for specific types of pages and sections.

Results

The Sibur-Yug website visually refers to the corporate website and at the same time looks unique due to its rich color palette. Thanks to the unusual visual solutions, we managed to balance the brand positioning and promotional focus of the resort complex website.