Разработка сайта дизайн-студии на 1С-Битрикс

Посетитель заходит на сайт дизайн-студии. Он оценивает портфолио за 3–7 секунд. Если загрузка медленная, а анимации дёргаются, клиент уходит к конкурентам. Одна студия интерьеров теряла 40% заявок из-за долгой загрузки портфолио. Мы перенесли их сайт на 1С-Битрикс. Теперь загрузка занимает 0.4 секунды, фильтрация проектов происходит без перезагрузки.

Мы реализуем проекты под ключ, гарантируя производительность и удобство управления. Наши инженеры имеют многолетний опыт работы с Битрикс и реализовали более 50 проектов для дизайн-студий. В основе каждого решения — тегированное кэширование, оптимизация изображений, интеграция с CRM.

Как мы разрабатываем сайт дизайн-студии на 1С-Битрикс

Разработка начинается с анализа задач и бренда. Мы проектируем информационную архитектуру, создаём дизайн-концепцию и утверждаем её с клиентом. Затем — вёрстка, интеграция с Битрикс, настройка кэширования и SEO. Завершаем тестированием и переносом на продакшн. Весь процесс занимает от 30 до 60 рабочих дней. Получите консультацию специалиста, чтобы обсудить ваш проект.

Архитектура портфолио на инфоблоках

Фильтрация портфолио без перезагрузки

Фильтрация по типу проекта работает через AJAX. Используется компонент bitrix:catalog.section с отключённой постраничной навигацией. При клике на категорию JavaScript отправляет запрос к ajax.php с параметрами фильтра. Компонент возвращает HTML-фрагмент, который подставляется в контейнер портфолио.

Параметры фильтрации передаются через $arFilter: PROPERTY_TYPE, >=PROPERTY_YEAR, <=PROPERTY_YEAR, PROPERTY_TAGS (логическое ИЛИ). Кэширование настраивается тегированным, привязанным к инфоблоку. Согласно документации 1С-Битрикс, тегированный кэш автоматически сбрасывается при изменении элементов инфоблока. При добавлении нового проекта кэш сбрасывается через обработчик события OnAfterIBlockElementUpdate.

Бриф-форма с загрузкой файлов

Форма создаётся через модуль form. Поля: имя, email, телефон, тип проекта, описание, загрузка файлов (до 5 файлов, до 20 МБ каждый, форматы PDF, JPG, PNG, AI, PSD). Заявка создаёт лид в CRM Битрикс24 через REST API. Менеджер получает уведомление в Telegram. Закажите разработку, и мы подготовим индивидуальное предложение.

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

Команда дизайнеров и блог

Раздел «Команда» реализуется через инфоблок «Сотрудники» с привязкой к проектам. На карточке: фото, специализация, стаж, ссылки на Behance/Dribbble и миниатюры последних трёх проектов. Инфоблок «Статьи» содержит SEO-свойства: META_TITLE, META_DESCRIPTION, автор. Используется компонент news.detail с микроразметкой Article и Open Graph.

Почему CSS Grid лучше JS-библиотек для масонри?

Классический masonry на JavaScript (Masonry.js, Isotope) создаёт лишнюю зависимость и требует пересчёта при каждом изменении DOM. Современный подход — CSS Grid с grid-template-rows: masonry (поддержка Firefox) или fallback на column-count для остальных браузеров. Это в 2-3 раза быстрее загрузки на мобильных устройствах.

Для 1С-Битрикс шаблон компонента bitrix:news.list генерирует контейнер с классом .portfolio-grid. Стили задают колоночную раскладку: Desktop (1200px+) — 3 колонки с gap: 24px, Tablet (768–1199px) — 2 колонки с gap: 16px, Mobile (<768px) — 1 колонка. Каждая карточка получает класс .portfolio-card с break-inside: avoid. Высота карточек варьируется — это создаёт эффект masonry.

IntersectionObserver для появления элементов

Анимация появления карточек при скролле реализуется через IntersectionObserver, а не через событие scroll. Алгоритм:

1. Все карточки при загрузке получают класс .portfolio-card--hidden с opacity: 0 и transform: translateY(40px).
2. Observer с threshold: 0.15 и rootMargin: "0px 0px -50px 0px" отслеживает пересечение.
3. При попадании в viewport карточка получает класс .portfolio-card--visible, запускающий CSS-transition: opacity 0.6s ease-out, transform 0.6s ease-out.
4. transition-delay рассчитывается динамически: (index % columnsCount) * 0.1s — создаёт каскадный эффект слева направо.

Критически важно: Observer создаётся один раз, а после срабатывания для конкретной карточки вызывается observer.unobserve(entry.target).

CSS-переходы при фильтрации

При смене категории переход выполняется в три фазы:

1. Fade-out: контейнер .portfolio-grid получает opacity: 0 через CSS-transition длительностью 200ms.
2. Замена контента: по событию transitionend в контейнер подставляется HTML из AJAX-ответа.
3. Fade-in: после вставки DOM через requestAnimationFrame контейнер возвращает opacity: 1.

Дополнительно: при фильтрации URL обновляется через history.pushState() с параметром ?type=interior, что позволяет делиться ссылкой на отфильтрованное портфолио.

Оптимизация изображений

Для rich-media портфолио критична оптимизация. В шаблоне используется loading="lazy" для ленивой загрузки. Обложки генерируются в трёх размерах через CFile::ResizeImageGet(): Thumbnail (400×300) для сетки, Medium (800×600) для превью при hover, Full (1920×auto) для детальной страницы. Формат WebP генерируется модулем «Оптимизация изображений» или через обработчик OnBeforeIBlockElementUpdate с конвертацией через GD/Imagick.

Сравнение редакций Битрикс для сайта дизайн-студии

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

Как правильно проектировать инфоблоки?

Мы видим десятки проектов, где неправильная структура инфоблоков превращает сайт в тормоз. Типичный сценарий: заказчик просит «каталог товаров». Разработчик создаёт один инфоблок catalog, закидывает туда 15 свойств. Через полгода — 40 свойств, 8 из которых используются только для одной категории. Фильтр тормозит, таблица b_iblock_element_property разрослась до миллионов строк, CIBlockElement::GetList выполняется 3 секунды. Последствия — падение конверсии, потеря клиентов, дополнительные затраты на оптимизацию. В одном проекте после рефакторинга каталога время генерации страницы снизилось с 4,2 до 0,8 секунды, а стоимость поддержки сократилась на 250 000 рублей в год — за счёт устранения избыточных запросов и агентов.

Наш подход: проектируем инфоблоки до первой строки кода. Отдельные инфоблоки под сущности (товары, категории, бренды), свойства-справочники через highload-блоки, торговые предложения для SKU. Это закладывает производительность на годы вперёд. Если хотите получить предварительный аудит вашей схемы инфоблоков — свяжитесь с нами, разберём типовые ошибки и дадим рекомендации бесплатно.

Почему 1С-Битрикс выгоднее альтернатив?

Выбор CMS диктуется не предпочтениями, а бизнес-задачами. Вот ключевые аргументы:

• Нативный обмен с 1С — модуль catalog.import.1c обеспечивает двусторонний обмен товарами, ценами, остатками и заказами через CommerceML. Без сторонних модулей. Это в 5 раз быстрее, чем разработка собственного обмена на OpenCart или WordPress. Подробнее о формате — в Wikipedia. Экономия на интеграции составляет в среднем 150 000–300 000 рублей по сравнению с кастомными решениями.
• Проактивная защита — модуль security включает WAF, контроль целостности файлов, защиту от SQL-инъекций, двухфакторную аутентификацию. Для проектов с требованиями ФСТЭК — сертифицированное решение.
• Модульная архитектура — подключаем только нужные модули: iblock, catalog, sale, search. Меньше модулей — меньше запросов к БД на каждый хит.
• Регулярные патчи — вендор выпускает security-патчи, закрывая уязвимости быстрее, чем open-source проекты (среднее время исправления CVE — 2 недели). Официальная документация по модулям — dev.1c-bitrix.ru.

Что дают HL-блоки и как мы ускоряем каталог

Highload-блоки — это альтернатива расширенным свойствам инфоблоков, когда список значений может расти до тысяч записей. Типичный пример: производители, страны, цвета. Если хранить их как свойства-списки в инфоблоке, каждая фильтрация вызывает полное сканирование таблицы b_iblock_property_enum. С HL-блоками выборка идёт по индексу — время ответа фильтра снижается с 1–2 секунд до 50 мс. Мы используем HLB компонент и кастомные запросы через Bitrix\Highloadblock\DataManager. Это особенно критично для каталогов с 100 000+ товарами.

Из нашей практики — проект интернет-магазина с 500 000 товаров. Стандартный фильтр по бренду выполнялся 4 секунды. Сервер не выдерживал нагрузку в 50 одновременных запросов — страницы падали. Мы перевели справочник брендов в HL-блок, добавили тегированное кэширование на 15 минут и настроили агент для сброса кэша при изменении. После доработки время фильтрации составило 120 мс, средний LCP страницы — 1,8 секунды. Проект работает стабильно без сбоев.

Что входит в разработку сайта на 1С-Битрикс

Каждый проект включает полный комплект документации и артефактов, исключающий потерю знаний после передачи.

• Техническое задание — user stories, диаграммы инфоблоков, схемы интеграций.
• Исходный код в Git — с историей коммитов, тегами релизов, правилами ветвления.
• Административная документация — описание кастомных компонентов, инструкции по разворачиванию, перечень агентов и событий.
• Обучение сотрудников — до 3 часов вебинара: панель управления, работа с заказами, настройка цен. Записываем, чтобы можно было пересмотреть.
• Доступ к staging на время разработки — тестируете сами до деплоя на продуктив.
• Гарантийная поддержка — исправление ошибок кода в течение 30 дней после запуска. Постгарантийные абонентские пакеты с SLA (реакция 2 часа, решение 8 часов).

Наш процесс и технологии

Стек: вёрстка mobile-first, тестируем на физических устройствах (iPhone, iPad, Android). Используем BrowserStack для Safari на iOS. Производительность — LCP < 2,5 с, FID < 100 мс, CLS < 0,1. Включаем композитный сайт (composite), CDN, тегированное кэширование, WebP/AVIF, lazy loading. SEO — Schema.org через JSON-LD, автогенерация sitemap.xml модулем seo, canonical и hreflang для мультиязычных версий. robots.txt закрываем /bitrix/ от индексации. CI/CD — Git, автодеплой через GitLab CI, staging. Миграции базы — модуль sprint.migration с версионированием.

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

1. Аналитика — изучаем конкурентов, собираем требования, рисуем прототипы в Figma. На выходе — ТЗ с user stories.
2. Дизайн — UI/UX с дизайн-системой. Компоненты переиспользуются.
3. Разработка — пишем компоненты с кастомными шаблонами в local/templates/. Бизнес-логику выносим в модули local/modules/.
4. Тестирование — функциональное, кроссбраузерное, нагрузочное (до 1000 запросов). Критичные баги исправляем до запуска.
5. Запуск — деплой на прод, мониторинг через UptimeRobot, алерты в Telegram. Устраняем первые 48 часов.

Интеграции, мультиязычность и редизайн

• Полная локализация через языковые файлы lang/ и механизм SITE_ID. hreflang для каждой версии. Региональные версии с разными ценами и контентом — определение по IP (main.geo) или ручной выбор. Мультидоменность — единое управление несколькими доменами.

• Редизайн без потери позиций: аудит производительности (PageSpeed, WebPageTest), SEO (Screaming Frog). Новый шаблон в local/templates/ с сохранением URL-структуры. 301-редиректы только если URL меняется существенно. Обновление ядра, переход на D7 ORM, реструктуризация инфоблоков, миграция через sprint.migration с Git.

Гарантия и поддержка

Мы работаем с 1С-Битрикс 12+ лет, реализовали 500+ проектов. В штате сертифицированные разработчики. Фиксированная стоимость в договоре — без сюрпризов. Гарантийный период покрывает ошибки кода. После — абонентские пакеты с SLA (время реакции — 2 часа, решение — 8 часов). Мониторинг доступности 24/7, алерты в Telegram. Получите консультацию и предварительный расчёт: свяжитесь с нами через форму на сайте или напишите в чат — ответим в течение часа. Закажите разработку под ключ — мы спроектируем инфоблоки, интегрируем 1С и разгоним каталог. Если уже есть сайт на другой CMS — закажите аудит производительности и миграцию на Битрикс.