Как мы сверстали интерфейс сервиса STYLUM

Необходимо было превратить готовые макеты Figma в полноценный набор адаптивных страниц.

При этом проект включал не только публичную часть сайта, но и интерфейсы, связанные с работой пользователя с сервисом.

В структуру верстки вошли:

• главная страница;
• каталог сетов;
• карточка сета;
• создание нового сета;
• вход и регистрация;
• поиск;
• избранное и история;
• профиль и настройки;
• баланс и пополнение;
• мои покупки;
• помощь.

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

Основой проекта стали макеты в Figma.

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

При этом верстка создавалась с расчётом на дальнейшую интеграцию с 1С-Битрикс.

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

Для реализации использовали классический frontend-стек:

HTML + CSS + JavaScript.

Без React, Vue или других frontend-фреймворков.

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

Особое внимание уделили структуре HTML и CSS, чтобы отдельные компоненты интерфейса можно было использовать повторно на разных страницах.

Одной из основных частей интерфейса стал каталог.

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

Помимо этого, в интерфейс входили поиск, избранное, история и раздел покупок.

То есть пользовательский сценарий охватывал не только просмотр контента, но и дальнейшую работу с ним внутри сервиса.

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

В него вошли:

• профиль;
• настройки;
• избранное;
• история;
• баланс;
• пополнение баланса;
• мои покупки.

Каждый из этих разделов имел собственный интерфейс в соответствии с макетами Figma.

За счёт этого вместо одного общего шаблона была сформирована полноценная система пользовательских страниц.

Все необходимые интерфейсы реализовывались с учётом адаптивного поведения.

Верстка должна была корректно работать на разных размерах экрана и сохранять структуру интерфейса при переходе от десктопной версии к мобильной.

При этом адаптация выполнялась непосредственно на уровне frontend, а не за счёт упрощения отдельных страниц.

Проект не требовал сложных интеграций или разработки нестандартной backend-логики со стороны LP Agency.

Основная задача была другой — качественно и последовательно реализовать большой объём готового UI.

Особенность заключалась в количестве различных пользовательских состояний и страниц: от каталога и карточек до регистрации, профиля, финансовых операций и истории пользователя.

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

LP Agency выполнила frontend-верстку интерфейса STYLUM по готовому дизайну Figma.

В результате был подготовлен комплект адаптивных страниц для будущей интеграции с 1С-Битрикс:

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

Важный момент: сама разработка и настройка 1С-Битрикс в рамках нашей задачи не выполнялась. Мы отвечали именно за frontend-часть — превратили дизайн-макеты в готовую ванильную верстку, которую затем можно было использовать при дальнейшей разработке проекта.

Таким образом, STYLUM получил полноценную frontend-основу для своего веб-сервиса — без привязки к конкретному frontend-фреймворку и с учётом дальнейшей интеграции с CMS.