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

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

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

Специфика дизайна под Битрикс

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

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

• Компонентная сетка — интерфейс строится из реальных компонентов Битрикс: bitrix:catalog, bitrix:sale.basket.basket, bitrix:sale.order.ajax, bitrix:system.auth.form. Дизайнер знает, какие данные отдаёт каждый компонент и какие параметры у него есть — рисует то, что можно собрать без костылей
• Визуальный редактор — контент-менеджер будет править контент через административную панель. Блочная структура, гибкие секции, управляемые баннеры — всё это продумывается до 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 служб доставки без группировки. Переделали — конверсия выросла
• Конкурентный разбор — не «посмотрели красивые сайты», а структурный анализ: как устроена навигация каталога, сколько шагов до чекаута, как работает фильтр на мобильных

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

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

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

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

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

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

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%
• Социальные доказательства — рейтинги, отзывы, кейсы, логотипы партнёров. Интегрированы в дизайн, а не прилеплены внизу страницы
• Микроанимации — товар летит в корзину, форма подтверждает отправку. Направляют внимание и снижают тревожность при совершении действия

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

На выходе: Figma-файл с дизайн-системой и макетами всех страниц, интерактивный прототип, документация по компонентам. Разработчик открывает файл — и верстает, а не переспрашивает «а тут какой отступ?».