Розробка сайту дизайн-студії на 1С-Бітрікс починається зі швидкості. Відвідувач заходить на сайт дизайн-студії. Він оцінює портфоліо за 3–7 секунд. Якщо завантаження повільне, а анімації смикаються, клієнт іде до конкурентів. Одна студія інтер'єрів втрачала 40% заявок через довге завантаження портфоліо. Ми перенесли їхній сайт на 1С-Бітрікс. Тепер завантаження займає 0.4 секунди, фільтрація проєктів відбувається без перезавантаження.
Ми реалізуємо проєкти під ключ, гарантуючи продуктивність. Наші інженери мають 10+ років досвіду в розробці сайтів дизайн-студій на 1С-Бітрікс та реалізували понад 50 проєктів. В основі кожного рішення — теговане кешування, оптимізація зображень, інтеграція з CRM.
Як ми розробляємо сайт дизайн-студії на 1С-Бітрікс
Розробка починається з аналізу завдань і бренду. Ми проєктуємо інформаційну архітектуру, створюємо дизайн-концепцію та затверджуємо її з клієнтом. Потім — верстка, інтеграція з Бітрікс, налаштування кешування та SEO. Завершуємо тестуванням і перенесенням на продакшн. Весь процес займає від 30 до 60 робочих днів. Вартість розробки від 200 000 грн залежно від складності. Отримайте консультацію спеціаліста, щоб обговорити ваш проєкт.
Архітектура портфоліо на інфоблоках
Структура інфоблоку портфоліо
Портфоліо будується на окремому інфоблоці з типом «Проєкти». Кожен елемент містить властивості: Тип проєкту (прив'язка до довідника: інтер'єрний дизайн, графічний дизайн, веб-дизайн, промисловий дизайн), Клієнт (рядок з прив'язкою до CRM-контакту), Рік реалізації (число для хронологічного сортування), Обкладинка (файл з авторесайзом через CFile::ResizeImageGet()), Галерея (множинний файл для rich-медіа), Опис проєкту (HTML-редактор), Теги (множинна прив'язка до довідника для перехресної фільтрації). Категоризація — дворівнева структура розділів.Фільтрація портфоліо без перезавантаження
Фільтрація за типом проєкту працює через 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. Замовте розробку, і ми підготуємо індивідуальну пропозицію.
Процес роботи
| Етап | Зміст | Результат |
|---|---|---|
| Бриф | Заповнення брифу на сайті, дзвінок з менеджером | Технічне завдання |
| Концепція | Мудборд, кольорова палітра, референси | Затверджена концепція |
| Дизайн | Макети ключових сторінок, UI-kit | Figma-файл з коментарями |
| Погодження | Ітерації правок (до 3 раундів) | Фінальні макети |
| Реалізація | Верстка, інтеграція з Бітрікс | Робочий сайт на тестовому сервері |
| Запуск | Перенесення на продакшн, SEO-аудит | Сайт в роботі |
Команда дизайнерів та блог
Розділ «Команда» реалізується через інфоблок «Співробітники» з прив'язкою до проєктів. На картці: фото, спеціалізація, стаж, посилання на 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. Алгоритм:
- Всі картки при завантаженні отримують клас
.portfolio-card--hiddenз opacity: 0 та transform: translateY(40px). - Observer з threshold: 0.15 та rootMargin: "0px 0px -50px 0px" відстежує перетин.
- При потраплянні у viewport картка отримує клас
.portfolio-card--visible, що запускає CSS-transition: opacity 0.6s ease-out, transform 0.6s ease-out. - transition-delay розраховується динамічно: (index % columnsCount) * 0.1s — створює каскадний ефект зліва направо.
Критично важливо: Observer створюється один раз, а після спрацювання для конкретної картки викликається observer.unobserve(entry.target). IntersectionObserver в 5 разів ефективніше за обробники scroll.
CSS-переходи при фільтрації
При зміні категорії перехід виконується в три фази:
- Fade-out: контейнер
.portfolio-gridотримує opacity: 0 через CSS-transition тривалістю 200ms. - Заміна контенту: по події transitionend у контейнер підставляється HTML з AJAX-відповіді.
- Fade-in: після вставки DOM через requestAnimationFrame контейнер повертає opacity: 1.
Додатково: при фільтрації URL оновлюється через history.pushState() з параметром ?type=interior, що дозволяє ділитися посиланням на відфільтроване портфоліо.
Як оптимізувати зображення для портфоліо?
Для rich-медіа портфоліо критична оптимізація. У шаблоні використовується loading="lazy" для лінивого завантаження. Обкладинки генеруються в трьох розмірах через CFile::ResizeImageGet(): Thumbnail (400×300) для сітки, Medium (800×600) для прев'ю при hover, Full (1920×auto) для детальної сторінки. Формат WebP генерується модулем «Оптимізація зображень» або через обробник OnBeforeIBlockElementUpdate з конвертацією через GD/Imagick. Економія на хостингу до 40% завдяки кешуванню.
Порівняння редакцій Бітрікс для сайту дизайн-студії
| Редакція | Можливості | Коли обрати |
|---|---|---|
| Старт | Інфоблоки, новини, кешування | Простий сайт-візитка з портфоліо |
| Стандарт | Всі модулі Старт + HL-блоки, REST API | Повноцінний сайт з інтеграцією CRM |
| Малий бізнес | Всі модулі Стандарт + Bizproc, 1С-обмін | Автоматизація бізнес-процесів студії |
| Бізнес | Повний функціонал, включаючи хмарний кеш | Високонавантажені проєкти з десятками тисяч проєктів |
Доставка проєкту
В результаті співпраці ви отримуєте: технічну документацію (структура інфоблоків, інструкції для редакторів), доступ до адмін-панелі та хостингу, навчання редакторів (до 2 годин), технічну підтримку протягом 30 днів після запуску, гарантію сумісності з оновленнями Бітрікс.
Наша компанія
10+ років на ринку, понад 50 реалізованих проєктів для дизайн-студій, сертифіковані спеціалісти 1С-Бітрікс. Зв'яжіться з нами, щоб обговорити відповідну редакцію для вашого проєкту.