Послуги з 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-файл з дизайн-системою та макетами всіх сторінок, інтерактивний прототип, документація по компонентах. Розробник відкриває файл — і верстає, а не перепитує «а тут який відступ?».