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

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

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

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

Портфолио строится на отдельном инфоблоке с типом «Проекты». Каждый элемент содержит свойства:

• Тип проекта — привязка к справочнику (список): интерьерный дизайн, графический дизайн, веб-дизайн, промышленный дизайн
• Клиент — строковое свойство с возможностью привязки к CRM-контакту
• Год реализации — числовое свойство для хронологической сортировки
• Обложка — свойство типа «Файл» с автоматической генерацией ресайзов через CFile::ResizeImageGet()
• Галерея — множественное свойство «Файл» для rich-media контента (фото, видео-превью)
• Описание проекта — HTML-редактор для развёрнутого кейса
• Теги — множественная привязка к справочнику для перекрёстной фильтрации

Для категоризации используется привязка к разделам инфоблока с двухуровневой структурой: первый уровень — тип дизайна, второй — подкатегории (например, «Интерьер → Жилые помещения», «Интерьер → Коммерческие объекты»).

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

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

Параметры фильтрации передаются через $arFilter компонента:

• PROPERTY_TYPE — тип проекта
• >=PROPERTY_YEAR / <=PROPERTY_YEAR — диапазон годов
• PROPERTY_TAGS — теги через логическое ИЛИ

Кэширование настраивается на уровне компонента с тегированным кэшем (cache_tag), привязанным к инфоблоку. При добавлении нового проекта кэш сбрасывается автоматически через обработчик события OnAfterIBlockElementUpdate.

Deep-dive: портфолио с анимациями и интерактивными элементами

Визуальная подача портфолио — ключевой дифференциатор сайта дизайн-студии. Статичная сетка из карточек не передаёт уровень мастерства команды. Нужны масонри-раскладка, плавные появления элементов при скролле и CSS-переходы при фильтрации. При этом всё должно работать без просадок FPS на мобильных устройствах.

Масонри-сетка на CSS Grid

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

Для 1С-Битрикс это означает, что шаблон компонента bitrix:news.list генерирует контейнер с CSS-классом .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 (которое блокирует main thread). Алгоритм:

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-переходы при фильтрации

При смене категории нельзя просто заменить HTML — пользователь увидит мерцание. Переход выполняется в три фазы:

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.

Процесс работы: timeline-компонент

Раздел «Как мы работаем» строится на компоненте, отображающем этапы в виде вертикального таймлайна. Данные хранятся в отдельном инфоблоке «Этапы» с сортировкой по полю SORT.

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

Раздел «Команда» реализуется через инфоблок «Сотрудники» с привязкой к проектам из портфолио через свойство типа «Привязка к элементам». На карточке дизайнера выводятся: фото, специализация, стаж, ссылки на Behance/Dribbble и миниатюры последних трёх проектов из привязанного инфоблока.

Блог о дизайне и трендах

Блог — основной инструмент SEO-продвижения. Инфоблок «Статьи» содержит свойства для работы с поисковой оптимизацией:

• META_TITLE, META_DESCRIPTION — через стандартные SEO-поля элемента инфоблока
• Каноническая ссылка — свойство типа «Строка», подставляется в <link rel="canonical">
• Автор — привязка к инфоблоку «Сотрудники» для формирования E-E-A-T сигналов
• Категория — привязка к разделам: тренды, кейсы, инструменты, вдохновение

Для статей используется компонент bitrix:news.detail с шаблоном, включающим микроразметку Article (Schema.org) и Open Graph разметку для корректного отображения при расшаривании.

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

Форма запроса на проект создаётся через модуль «Веб-формы» (form) с полями:

• Имя, email, телефон — обязательные поля с валидацией
• Тип проекта — выпадающий список (синхронизирован со справочником типов из портфолио)
• Описание задачи — textarea с лимитом 2000 символов
• Загрузка файлов — множественное поле типа «Файл» с ограничением: PDF, JPG, PNG, AI, PSD; до 5 файлов, до 20 МБ каждый

Отправленная заявка создаёт лид в CRM Битрикс24 через REST API с передачей вложений. Менеджер получает уведомление в Telegram через вебхук.

Техническая база

Сайт разворачивается на редакции «Стандарт» или «Малый бизнес» — зависит от необходимости интеграции с CRM. Композитный кэш включается для всех публичных страниц, исключая формы. CDN для статики настраивается через модуль CDN или внешний сервис (Cloudflare).