Разработка 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 как библиотека: цвета, типографика, отступы, тени, иконки. Это снижает время на вёрстку и делает поддержку предсказуемой.
Кейс: редизайн каталога для производственной компании
Компания производит промышленное оборудование, сайт на Битрикс «Бизнес». Проблема: менеджеры жаловались, что клиенты не могут найти нужную модификацию товара — уходили на страницу товара, не понимали выбор характеристик, звонили в отдел продаж.
Что сделали:
- Проанализировали воронку через Вебвизор — 73% пользователей не доходили до кнопки «В корзину» на странице товара
- Изучили структуру инфоблока: товары имели 12 свойств-характеристик, но компонент
bitrix:catalog.elementотображал их простым списком - Спроектировали новый UX карточки товара: характеристики сгруппированы в табы, модификации выбираются через интерактивный конфигуратор
- Разработали макеты с учётом того, что данные приходят из
CIBlockElement::GetProperty()— конфигуратор строится динамически на основе значений свойств - Отдельно спроектировали мобильную версию: конфигуратор сворачивается в аккордеон, основные характеристики вынесены над fold
После реализации время на странице товара выросло, количество звонков «помогите выбрать» снизилось — клиенты стали самостоятельно доходить до оформления заказа.
Передача в разработку
Готовый дизайн передаётся с полной документацией:
- Figma-файл с прописанными Auto Layout, именованными слоями и компонентами
- Спецификации для каждого компонента: отступы, размеры, поведение при разных состояниях
- Анимации и переходы: описаны в виде Figma Prototype или текстовых описаний для разработчика
- Список компонентов Битрикс, которые затрагивает редизайн, с указанием файлов для правки
Сроки и этапы
| Этап | Малый сайт (до 20 страниц) | Средний сайт (20–80 страниц) | Крупный проект (80+ страниц) |
|---|---|---|---|
| Аудит + ТЗ + wireframes | 3–5 дней | 1–2 недели | 2–4 недели |
| Визуальный дизайн | 1–2 недели | 3–5 недель | 6–12 недель |
| Дизайн-система | — | 1 неделя | 2–3 недели |
| Согласование и правки | 3–7 дней | 1–2 недели | 2–4 недели |
Сроки зависят от количества уникальных шаблонов, сложности компонентов и скорости согласования со стороны заказчика. Итерации согласования заложены в оценку.
Что влияет на стоимость
Дизайн «лендинга на Битрикс» и дизайн «интернет-магазина с каталогом из 5000 позиций» — принципиально разные задачи по объёму. На стоимость влияет:
- Количество уникальных страниц и состояний компонентов
- Необходимость создания дизайн-системы (для последующей масштабируемости)
- Глубина прототипирования — только макеты или интерактивный прототип
- Требования к мобильной версии: адаптация или отдельный мобильный дизайн
- Количество раундов правок, выходящих за рамки согласованного ТЗ