Розробка UX/UI дизайну сайту на 1С-Бітрікс

Типова ситуація: сайт працює на 1С-Бітрікс три роки, конверсія падає, аналітика показує, що користувачі йдуть з каталогу на третьому кліку. Дизайнер, який робив сайт спочатку, працював «за ТЗ від маркетингу», не знаючи ні структури компонентів Бітрікс, ні особливостей рендерингу шаблонів. У результаті — красиві макети у Figma, які неможливо реалізувати без переписування половини шаблону bitrix:catalog.section.

UX/UI для Бітрікс — це не просто дизайн. Це проектування з урахуванням того, як платформа рендерить дані, де живуть компоненти, як будується навігація через CIBlock і які обмеження накладає візуальний редактор.

Розробка UX/UI дизайну сайту на 1С-Бітрікс

Робота починається з аудиту поточного стану, а не з Figma. Перш ніж малювати, потрібно зрозуміти: які компоненти використовуються, як влаштований шаблон сайту, чи є кастомні модулі, які сторінки генеруються динамічно через CBitrixComponent, а які статичні.

Аудит і технічне завдання

На цьому етапі аналізуємо:

• Структуру шаблону: папки /bitrix/templates/, перевизначення компонентів у /local/templates/
• Використовувані компоненти: bitrix:menu, bitrix:catalog, bitrix:news, bitrix:form.result.new — у кожного свої обмеження щодо розмітки
• Точки входу користувача: дані з Яндекс.Метрики або Google Analytics, карта кліків, записи Вебвізора
• Технічні обмеження: версія PHP, наявність кешу компонентів (managed_cache), CDN

За результатами аудиту формуємо технічне завдання з wireframes — не піксельними макетами, а схемами взаємодії. Wireframes погоджуються до початку візуального дизайну.

Проектування користувацьких сценаріїв

Для інтернет-магазину на Бітрікс ключові сценарії: каталог → картка товару → кошик → оформлення замовлення. Компонент bitrix:sale.basket.basket має жорстку структуру шаблону — не можна просто «перенести кнопку вліво» без правки template.php. Це потрібно враховувати при проектуванні.

Для корпоративного сайту акцент зміщується на структуру інфоблоків: як користувач знаходить потрібний розділ, як працює пошук через bitrix:search.title та bitrix:search.page.

Проектуємо окремо:

• Desktop-сценарії: повна навігація, hover-стани, складні фільтри
• Mobile-сценарії: дотики, свайпи, пріоритизація контенту під вузькі екрани
• Стани компонентів: порожній кошик, товар не в наявності, помилка форми, завантаження даних

Візуальний дизайн і дизайн-система

Макети розробляються у Figma з компонентним підходом. Кожен UI-елемент — кнопка, картка товару, пагінація, хлібні крихти — описується як компонент з варіантами станів (default, hover, active, disabled, error).

Для Бітрікс особливо важливо пропрацювати:

• Шаблони компонентів: окремий макет для кожного значущого компонента — bitrix:catalog.element, bitrix:catalog.section, bitrix:news.list, bitrix:news.detail
• Адміністративний контекст: якщо редактори використовують режим правки (панель управління), дизайн не повинен ламатися при увімкненому show_admin_panel
• Адаптивні стани: мінімум три брейкпоінти — 1280px, 768px, 375px

Дизайн-система фіксується у Figma як бібліотека: кольори, типографіка, відступи, тіні, іконки. Це скорочує час на верстку та робить підтримку передбачуваною.

Кейс: редизайн каталогу для виробничої компанії

Компанія виробляє промислове обладнання, сайт на Бітрікс «Бізнес». Проблема: менеджери скаржилися, що клієнти не можуть знайти потрібну модифікацію товару — переходили на сторінку товару, не розуміли вибір характеристик, телефонували у відділ продажів.

Що зробили:

1. Проаналізували воронку через Вебвізор — 73% користувачів не доходили до кнопки «У кошик» на сторінці товару
2. Вивчили структуру інфоблока: товари мали 12 властивостей-характеристик, але компонент bitrix:catalog.element відображав їх простим списком
3. Спроектували новий UX картки товару: характеристики згруповані у вкладки, модифікації обираються через інтерактивний конфігуратор
4. Розробили макети з урахуванням того, що дані надходять з CIBlockElement::GetProperty() — конфігуратор будується динамічно на основі значень властивостей
5. Окремо спроектували мобільну версію: конфігуратор згортається в акордеон, основні характеристики винесені над fold

Після реалізації час на сторінці товару зріс, кількість дзвінків «допоможіть обрати» знизилася — клієнти стали самостійно доходити до оформлення замовлення.

Передача в розробку

Готовий дизайн передається з повною документацією:

• Figma-файл з прописаними Auto Layout, іменованими шарами та компонентами
• Специфікації для кожного компонента: відступи, розміри, поведінка при різних станах
• Анімації та переходи: описані у вигляді Figma Prototype або текстових описів для розробника
• Список компонентів Бітрікс, які зачіпає редизайн, із зазначенням файлів для правки

Терміни та етапи

Терміни залежать від кількості унікальних шаблонів, складності компонентів і швидкості погодження з боку замовника. Ітерації погодження закладені в оцінку.

Що впливає на вартість

Дизайн «лендингу на Бітрікс» і дизайн «інтернет-магазину з каталогом із 5000 позицій» — принципово різні задачі за обсягом. На вартість впливає:

• Кількість унікальних сторінок і станів компонентів
• Необхідність створення дизайн-системи (для подальшої масштабованості)
• Глибина прототипування — лише макети або інтерактивний прототип
• Вимоги до мобільної версії: адаптація або окремий мобільний дизайн
• Кількість раундів правок, що виходять за рамки погодженого ТЗ