Создание прототипа интерфейса для 1С-Битрикс: сокращаем переделки

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

Прототип для 1С-Битрикс отличается от обычного UI-прототипа: он учитывает специфику платформы — какие сценарии реализуются стандартными компонентами (bitrix:catalog, bitrix:breadcrumb), а какие требуют кастомной разработки. Без прототипа команда тратит на 30% больше времени на согласование, а переделки на этапе вёрстки обходятся в 2–3 раза дороже. Прототипирование до дизайна снижает затраты на переделки в 3 раза по сравнению с традиционным подходом.

Зачем прототип интерфейса для 1С-Битрикс?

Типичная ошибка — закладывать стандартный умный фильтр, не проверив зависимости между параметрами. В одном из наших кейсов (интернет-магазин промышленных фильтров) заказчик планировал bitrix:catalog.smart.filter, но после прототипирования выяснилось: нужен зависимый выбор — тип фильтра сужает значения типоразмера. Стандартный компонент это не умеет. Прототип помог принять решение: либо UX хуже, либо Vue.js-компонент поверх API Битрикса. Заказчик выбрал второй вариант осознанно и сэкономил 2 недели переделок.

Типичные ошибки без прототипа

Как прототип помогает избежать переделок?

Битрикс — платформа с сильными архитектурными ограничениями. Комплексный компонент bitrix:catalog реализует каталог строго определённым образом: иерархия разделов → список элементов → детальная страница. Отойти от этой логики можно, но это кастомная разработка с соответствующей стоимостью.

Прототип фиксирует, какие интерфейсные паттерны реализуются стандартными компонентами Битрикса, а какие требуют кастомной разработки. Это влияет на смету и сроки. По нашим данным, прототипирование улучшает точность сметы на 25%.

Второй аспект — CMS-зависимые зоны интерфейса. Хлебные крошки генерирует bitrix:breadcrumb. Постраничная навигация — bitrix:main.pagenavigation. Форма обратной связи — bitrix:main.feedback или bitrix:form.result.new. Прототип отражает, где в макете живут эти компоненты, какие данные они отображают, как выглядят их состояния. Это экономит до 40% времени на вёрстке, так как дизайнер не рисует нереализуемые элементы.

Почему прототип стоит делать до дизайна?

Прототип для стандартного интернет-магазина на Битриксе (7–10 типов страниц, мобильная версия) — 10–18 рабочих дней. Сложные проекты с нестандартными сценариями (подборщик, конфигуратор, личный кабинет с расширенными функциями) — 20–35 дней.

Мы — компания с опытом более 5 лет, 50+ проектов на Битриксе. Закажите прототип — получите прозрачную смету и гарантию, что дизайн не противоречит архитектуре платформы. Свяжитесь с нами для предварительной оценки вашего проекта — мы проанализируем сценарии и предложим оптимальный уровень детализации.

По данным исследования IBM, прототипирование сокращает количество изменений на этапе разработки на 30%. Подробнее о прототипировании читайте в Wikipedia.

Уровни детализации прототипа

Процесс разработки прототипа

1. Анализ сценариев. Для каждого типа страниц фиксируем пользовательские сценарии. Главная — 2–3 сценария, каталог — 5–8: просмотр разделов, фильтрация, поиск, добавление в корзину, сравнение.
2. Инвентаризация шаблонов. Типовой набор Битрикс: главная, раздел каталога, карточка товара, результаты поиска, корзина, оформление заказа, статичная страница, личный кабинет.
3. Компонентная разметка. На вайрфрейме прямо указываем, какой компонент Битрикса обеспечивает данный блок и какие параметры ему нужны.
4. Состояния интерфейса. Пустое состояние, загрузка, ошибка, успех — для каждого интерактивного элемента.
5. Мобильная версия. Отдельный прототип для мобильных breakpoint'ов: фильтр (выезжающая панель или страница?), навигация по каталогу, форма оформления заказа.

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

• Вайрфреймы и/или интерактивный прототип в Figma
• Компонентная разметка с указанием параметров Битрикса
• Сценарии всех состояний интерфейса
• Мобильная версия
• Аннотации для дизайнера и разработчика
• Обучение команды заказчика работе с прототипом (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 рабочий день. Получите консультацию — свяжитесь с нами. Закажите проектирование интерфейса под ключ: от исследований до финальных макетов.