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

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

Сайт дизайн-студії — вітрина компетенцій, де кожний піксель працює на репутацію. Відвідувач приймає рішення про співпрацю за 3–7 секунд перегляду портфоліо. Якщо роботи завантажуються повільно, анімації дергаються, а фільтрація перезавантажує сторінку — студія втрачає клієнта. 1С-Bitrix дозволяє побудувати технічно виважений сайт з інтерактивним портфоліо, при цьому зберігаючи зручність управління контентом для менеджерів без навичок вёрстки.

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

Портфоліо будується на окремому інфоблоці типу «Проекти». Кожен елемент містить властивості:

• Тип проекту — привязка до довідника (список): інтер'єрний дизайн, графічний дизайн, веб-дизайн, промислловий дизайн
• Клієнт — строкова властивість з можливістю привязки до 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: Портфоліо з анімаціями та інтерактивними елементами

Візуальна подача портфоліо — ключовий дифференціатор сайту дизайн-студії. Статична сітка карток не передає рівень мастерства команди. Потрібні masonry-раскладка, плавні появи елементів при скролі та CSS-переходи при фільтрації. При цьому все повинно працювати без просадок FPS на мобільних пристроях.

Masonry-сітка на CSS Grid

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

Для 1С-Bitrix це означає, що шаблон компонента 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 Bitrix24 через REST API з передачею вкладень. Менеджер отримує сповіщення в Telegram через вебхук.

Технічна база

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