UX/UI проектирование для 1С-Битрикс: wireframes, дизайн-система

Бывает: сайт на 1С-Битрикс работает три года, конверсия падает, аналитика показывает — пользователи уходят из каталога на третьем клике. Дизайнер, который делал сайт, работал по ТЗ от маркетинга, не зная структуры компонентов и особенностей рендеринга шаблонов. В результате — красивые макеты в Figma, которые невозможно реализовать без переписывания половины шаблона bitrix:catalog.section. Мы решаем эту проблему, проектируя дизайн с учётом платформенных ограничений и бизнес-задач. Наш опыт: более 10 лет в Битрикс, 100+ реализованных проектов. Подробнее о UX-дизайне.

По данным Nielsen Norman Group, UX-дизайн, интегрированный с платформой, даёт прирост конверсии на 30% больше, чем дизайн без учёта особенностей CMS. Для Битрикс это особенно важно: неправильно спроектированный компонент bitrix:catalog.section может убить продажи. Дизайн-система ускоряет внедрение новых страниц в два раза по сравнению с разрозненными макетами.

UX/UI и конверсия в Битрикс

Исследования Baymard Institute показывают, что плохой UX заставляет 73% пользователей уходить с сайта до добавления товара в корзину. Правильно спроектированный интерфейс повышает конверсию в 1.5–2 раза. В Битрикс это достигается за счёт адаптации дизайна под структуру инфоблоков и компонентов.

Проблемы, которые мы решаем

Проблема нереализуемых макетов

Дизайнеры, не знакомые с Битрикс, часто рисуют нереализуемые элементы: анимированные меню, которые не работают с bitrix:menu, сложные фильтры, требующие кастомного JS, или карточки товаров с нестандартной сеткой, ломающие адаптивность. Мы избегаем этого — каждый макет проверяется на совместимость с компонентами.

Сложная навигация в каталоге

Для интернет-магазина ключевой сценарий — каталог → карточка → корзина. Типичная ошибка — перегруженные фильтры или отсутствие хлебных крошек. Мы проектируем сценарии отдельно для desktop и mobile, учитывая состояния bitrix:sale.basket.basket (пустая корзина, ошибка формы).

Дизайн без дизайн-системы

Без единой системы компонентов поддержка сайта превращается в хаос. Мы создаём дизайн-систему в Figma: цвета, типографика, отступы, состояния кнопок — всё задокументировано.

Преимущества дизайн-системы для Битрикс

Дизайн-система позволяет разработчикам быстрее внедрять новые страницы, используя готовые компоненты. Сравнение: с дизайн-системой время на вёрстку новой страницы сокращается на 50%, а количество ошибок при переносе макетов — на 30%.

Что входит в работу?

Важность UX/UI для интернет-магазина

Плохой UX заставляет пользователей уходить — 73% не доходят до кнопки «В корзину» (согласно исследованию Baymard Institute). Правильное проектирование сценариев и адаптивная вёрстка увеличивают время на странице и снижают количество звонков «помогите выбрать». Экономия бюджета на переделках — до 30% от стоимости проекта.

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

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

Реализованное решение:

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

Результат: время на странице товара выросло, количество звонков «помогите выбрать» снизилось — клиенты стали самостоятельно оформлять заказ. Средний чек на проектирование UX/UI для интернет-магазина — от 200 000 до 500 000 руб. в зависимости от сложности.

Сроки проектирования дизайна

Сроки зависят от объёма и сложности. Малый сайт (до 20 страниц): аудит + wireframes — 3-5 дней, визуальный дизайн — 1-2 недели. Средний (20-80 страниц): 1-2 недели и 3-5 недель соответственно. Крупный (80+ страниц): 2-4 недели и 6-12 недель. Точную оценку даём после аудита.

Процесс работы

1. Аналитика — аудит текущего сайта, сбор данных из Метрики, интервью со стейкхолдерами.
2. Проектирование — wireframes, user flow, согласование сценариев.
3. Визуальный дизайн — макеты в Figma, дизайн-система.
4. Тестирование — проверка на реализуемость, юзабилити-тесты (опционально).
5. Передача — полный пакет документации разработчикам.

Мы также оказываем постпроектную поддержку: доработки по результатам A/B-тестов, обновление дизайн-системы под новые версии Битрикс. Закажите аудит UX/UI — мы предложим оптимальное решение для вашего проекта. Получите консультацию бесплатно.

Сроки

Стоимость рассчитывается индивидуально, исходя из количества страниц, сложности компонентов и требуемой глубины прототипирования. Свяжитесь с нами для консультации — мы оценим ваш проект.

Вступление

Первое, что мы делаем, получив макет от «чистого» дизайнера — смотрим, как он ляжет на bitrix:catalog.section и bitrix:catalog.element. В половине случаев нестандартный фильтр на макете означает переписывание bitrix:catalog.smart.filter с нуля. А это не 2 часа — это неделя. Поэтому мы проектируем интерфейс сразу под компонентную архитектуру Битрикс, а не адаптируем после. С нами вы получаете дизайн, который разработчик соберёт без костылей и переделок.

Редизайн на Битрикс часто упирается в одно и то же: данные приходят из 1С через CommerceML, а дизайнер этого не учитывает. Мы закладываем в макеты реальную структуру торгового каталога — свойства инфоблоков, типы цен, остатки по складам. Тогда карточка товара не ломается, когда появляется 15 характеристик и 4 цены. Это сокращает итерации согласования на 30% и экономит бюджет заказчика — в среднем на 50–80 тыс. руб на одном проекте.

Почему UX/UI для Битрикс требует особого подхода?

Дизайнер нарисовал карточку товара с тремя вкладками, кастомным конфигуратором и аккордеоном характеристик. Красиво. Потом разработчик открывает шаблон catalog.element и понимает: данные приходят из свойств инфоблока плоским списком, а связанные товары тянутся через CATALOG_ELEMENT_ID. Половину макета нужно перерисовать. Мы это знаем — поэтому рисуем то, что можно собрать без костылей.

Вот что мы закладываем на этапе дизайна:

• Компонентная сетка — интерфейс строится из реальных компонентов Битрикс: bitrix:catalog, bitrix:sale.basket.basket, bitrix:sale.order.ajax, bitrix:system.auth.form. Дизайнер знает, какие данные отдаёт каждый компонент и какие параметры у него есть. Это позволяет избежать доработок на стадии вёрстки. Как отмечает документация платформы, «Компонентная модель 1С-Битрикс позволяет строить интерфейсы из готовых блоков без дублирования логики».
• Визуальный редактор — контент-менеджер будет править контент через административную панель. Блочная структура, гибкие секции, управляемые баннеры — всё это продумывается до Figma.
• Данные из 1С — товары, цены типа BASE, RETAIL, остатки со складов приходят через CommerceML. Карточка товара учитывает реальный объём данных: 15 характеристик, 4 типа цен, остатки по 3 складам — а не идеальные три строчки из макета.
• Семантическая вёрстка — иерархия H1–H6, микроразметка Product/Offer, alt-тексты. Всё закладывается на этапе дизайна, потому что «допилить SEO потом» означает перевёрстывать шаблоны.

Типичные проблемы дизайна и их решения

Исследования до открытия Figma

Прежде чем рисовать — копаем в данные.

Мы формируем персоны и сценарии на основе Яндекс.Метрики (Вебвизор, тепловые карты), GA4 и интервью. Не абстрактные «мужчина 25-45 лет», а конкретные: «закупщик, который формирует заказ по артикулам из Excel за 10 минут». Это позволяет точнее проектировать прототипы.

При редизайне проводим UX-аудит текущего сайта: воронки конверсий, записи сессий, точки оттока. На одном проекте обнаружили, что 40% пользователей бросали корзину на шаге выбора доставки — потому что компонент sale.order.ajax рендерил 12 служб доставки без группировки. Переделали — конверсия выросла на 18% (это дало дополнительно 200 тыс. руб в месяц). Конкурентный разбор — не «посмотрели красивые сайты», а структурный анализ: навигация каталога, количество шагов до чекаута, работа фильтра на мобильных.

Прототипирование

Прототип проверяет логику до расхода бюджета на визуал.

• Wireframes — схемы ключевых страниц: главная, каталог (catalog.section), карточка (catalog.element), корзина (sale.basket.basket), чекаут (sale.order.ajax), личный кабинет. Определяем приоритет информации.
• Кликабельные прототипы — Figma с переходами, модалками, работой фильтров. Заказчик «трогает» сайт до начала разработки.
• Тесты с пользователями — модерируемые сессии с представителями ЦА. Проблему навигации дешевле поймать здесь, чем после вёрстки 40 шаблонов компонентов.

Пошаговый процесс проектирования UX/UI для Битрикс

1. Дизайн-аналитика — сбор данных Метрики, интервью, аудит текущего интерфейса. Выявляем точки оттока (если конверсия падает на этапе выбора доставки — видим это в воронке).
2. Прототипирование — wireframes + кликабельный прототип. Проверяем сценарии: поиск товара, добавление в корзину, оформление заказа. Итерации до утверждения.
3. Создание дизайн-системы — типографика, цвета, UI-компоненты, модульная сетка. Всё завязываем на компонентную модель Битрикс.
4. Дизайн ключевых страниц — макеты под все breakpoints (320–2560px). Учитываем реальные данные: свойства инфоблоков, типы цен, остатки.
5. Передача в разработку — Figma с Dev Mode, экспорт SVG/WebP/AVIF, документация по компонентам. Помогаем разработчику адаптировать шаблоны под новый дизайн.

Дизайн-система

Для каждого проекта собираем масштабируемую систему — единый словарь для дизайнеров и фронтенда.

• Типографика — шрифтовые пары, оптимизированные под кириллицу и веб-рендеринг. Размерная шкала, интерлиньяж, иерархия заголовков.
• Цвета — основные, акцентные, состояния (hover, active, disabled, error). Контрастность по WCAG 2.1 AA минимум.
• Модульная сетка — фиксированные отступы, консистентность от 320px до 2560px.
• UI-компоненты — кнопки, формы, карточки, таблицы, уведомления, иконки. Каждый — с вариантами состояний и адаптивными версиями.
• Документация — правила применения, чтобы новый дизайнер не «изобретал» стили. На практике без неё через полгода в проекте 4 оттенка серого и 3 варианта кнопки «Купить».

Что даёт дизайн-система для Битрикс?

Она ускоряет разработку интерфейса в 2–3 раза, потому что верстальщик получает готовые классы и отступы, а не угадывает их по макету. На одном проекте после внедрения дизайн-системы время на вёрстку новой страницы каталога сократилось с 5 дней до 1,5.

Что входит в работу

На выходе вы получаете:

• Figma-файл с дизайн-системой и макетами всех страниц (включая мобильные и планшетные версии).
• Интерактивный прототип для согласования и тестирования.
• Документацию по компонентам (стили, отступы, поведения).
• Доступы к файлам и финальные экспорты в SVG/WebP/AVIF.
• Рекомендации по доработке шаблонов Битрикс под новый дизайн.
• Пост-релизную поддержку (до 2 недель) — помогаем разработчику разобраться в макетах.

Мы — сертифицированные партнёры 1С-Битрикс с 15+ лет опыта. Гарантируем, что дизайн будет реализуем на вашей версии платформы. С нами работали более 50 интернет-магазинов и корпоративных порталов — от лендингов до маркетплейсов.

Mobile-first: не формальность, а порядок работы

Проектируем сначала мобильную версию, потом расширяем.

• Touch-friendly — минимум 44x44px для интерактивных элементов, достаточные отступы. Свайп для галереи, pull-to-refresh для каталога.
• Формы — автотип клавиатуры (inputmode="numeric" для телефона, type="email" для почты), маски ввода через IMask, автозаполнение через DaData. Каждое лишнее поле — минус к конверсии, это не теория, а то, что видно в воронках Метрики.
• Адаптивные изображения — разные ресайзы и кропы для мобильных/десктопных через <picture> и srcset. Art direction для баннеров — на мобильном не уменьшаем, а показываем другой кроп.

Как мы работаем в Figma?

• Структура файла — страницы: исследования, wireframes, UI-kit, макеты по breakpoints, анимации. Не каша, а навигируемый проект.
• Auto Layout — компоненты на Flexbox-логике, корректно тянутся при изменении контента. Разработчик видит в макете ту же модель, что будет в CSS.
• Variables и Variants — переменные для цветов и отступов, компоненты с вариантами состояний. Смена темы — переключение одной коллекции.
• Dev Mode — точные значения, экспорт SVG/WebP/AVIF, инспектирование CSS. Разработчик получает всё без «угадывания по пикселям».

Usability testing

Как мы измеряем эффективность дизайна?

• Модерируемые тесты — реальные пользователи выполняют задачи: найти товар, добавить в корзину, оформить заказ. Фиксируем, где спотыкаются.
• A/B-тесты — два варианта на живом трафике. Побеждает конверсия, а не мнение арт-директора.
• Эвристический аудит — по принципам Нильсена: видимость статуса, соответствие ожиданиям, единообразие, предотвращение ошибок.
• Доступность — контраст, клавиатурная навигация, alt-тексты, aria-метки. Не факультатив, а требование.

Конверсионный дизайн

• Визуальная иерархия — CTA, цены, акции выделены через размер, цвет, контраст. Взгляд идёт туда, куда нужно бизнесу — проверяется через eye-tracking или тепловые карты.
• Минимальное трение — сокращаем шаги до целевого действия. На одном проекте убрали обязательную регистрацию при чекауте — конверсия в заказ поднялась на 18%.
• Социальные доказательства — рейтинги, отзывы, кейсы, логотипы партнёров. Интегрированы в дизайн, а не прилеплены внизу страницы.
• Микроанимации — товар летит в корзину, форма подтверждает отправку. Направляют внимание и снижают тревожность при совершении действия.

Сроки и результаты

Оценим ваш проект за 1 рабочий день. Получите консультацию — свяжитесь с нами. Закажите проектирование интерфейса под ключ: от исследований до финальных макетов.