How we updated the interface of the STYLUM service

It was necessary to turn the ready-made Figma layouts into a full-fledged set of adaptive pages.

At the same time, the project included not only the public part of the site, but also interfaces related to the user’s work with the service.

The layout structure includes:

• main page;
• catalog of sets;
• set card;
• creating a new set;
• login and registration;
• search;
• favorites and history;
• profile and settings;
• balance and replenishment;
• my purchases;
• help.

Thus, it was necessary to create not a separate landing page, but a complete web service interface with several user scenarios.

The basis of the project was the layouts in Figma.

We consistently transferred the design to a working frontend structure, preserving the visual system, dimensions, margins, typography, and layout of elements.

At the same time, the layout was created with the expectation of further integration with 1C-Bitrix.

This meant that the result of the work was not just a static demonstration of layouts, but a ready-made frontend framework that could be connected to dynamic data and CMS server logic.

The classic frontend stack was used for implementation.:

HTML + CSS + JavaScript.

Without React, Vue, or other frontend frameworks.

For such a project, this made it possible to keep the layout as independent and convenient as possible for subsequent integration with the existing CMS.

Special attention was paid to the HTML and CSS structure so that individual interface components could be reused on different pages.

The catalog has become one of the main parts of the interface.

As part of the layout, the catalog pages, a separate set card, and the creation of a new set were implemented.

In addition, the interface included search, favorites, history, and a shopping section.

In other words, the user scenario covered not only viewing the content, but also further work with it inside the service.

A separate block of pages was linked to the user’s account.

It includes:

• profile;
• settings;
• favourites;
• history;
• balance;
• adding funds to your balance;
• my purchases.

Each of these sections had its own interface according to Figma layouts.

Due to this, instead of one common template, a full-fledged system of user pages was created.

All necessary interfaces were implemented taking into account adaptive behavior.

The layout had to work correctly on different screen sizes and preserve the interface structure when switching from the desktop to the mobile version.

At the same time, the adaptation was performed directly at the frontend level, and not by simplifying individual pages.

The project did not require complex integrations or the development of non-standard backend logic by LP Agency.

The main task was different — to efficiently and consistently implement a large amount of ready-made UI.

The special feature was the number of different user states and pages: from catalog and cards to registration, profile, financial transactions and user history.

At the same time, all pages had to remain part of the same visual system and be suitable for further integration with 1C-Bitrix.

LP Agency has completed the frontend layout of the STYLUM interface based on the finished Figma design.

As a result, a set of adaptive pages was prepared for future integration with 1C-Bitrix.:

home → catalog → set card → set creation → authorization → search → personal account → balance → purchases → help.

An important point: the development and configuration of 1C-Bitrix itself was not performed as part of our task. We were responsible specifically for the frontend part — we turned the design layouts into a ready—made vanilla layout, which could then be used in the further development of the project.

Thus, STYLUM received a full-fledged frontend framework for its web service — without being tied to a specific frontend framework and taking into account further integration with the CMS.