Услуги по UX/UI дизайну для 1С-Битрикс

Вступление

Первое, что мы делаем, получив макет от «чистого» дизайнера — смотрим, как он ляжет на 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 рабочий день. Получите консультацию — свяжитесь с нами. Закажите проектирование интерфейса под ключ: от исследований до финальных макетов.