Розробка сайту дизайн-студії на 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С-Бітрікс. Зв'яжіться з нами, щоб обговорити відповідну редакцію для вашого проєкту.
Як правильно проектувати інфоблоки?
Ми бачимо десятки проєктів, де неправильна структура інфоблоків перетворює сайт на гальмо. Типовий сценарій: замовник просить «каталог товарів». Розробник створює один інфоблок catalog, закидає туди 15 властивостей. Через півроку — 40 властивостей, 8 з яких використовуються лише для однієї категорії. Фільтр гальмує, таблиця b_iblock_element_property розрослася до мільйонів рядків, CIBlockElement::GetList виконується 3 секунди. Наслідки — падіння конверсії, втрата клієнтів, додаткові витрати на оптимізацію. В одному проєкті після рефакторингу каталогу час генерації сторінки знизився з 4,2 до 0,8 секунди, а вартість підтримки значно скоротилася — за рахунок усунення надлишкових запитів та агентів.
Наш підхід: проектуємо інфоблоки до першого рядка коду. Окремі інфоблоки під сутності (товари, категорії, бренди), властивості-довідники через HL-блоки, торгові пропозиції для SKU. Це закладає продуктивність на роки вперед. Якщо хочете отримати попередній аудит вашої схеми інфоблоків — зв'яжіться з нами, розберемо типові помилки та надамо рекомендації.
Чому 1С-Бітрікс вигідніший за альтернативи?
Вибір CMS диктується не уподобаннями, а бізнес-завданнями. Ось ключові аргументи:
- Нативний обмін з 1С — модуль
catalog.import.1c забезпечує двосторонній обмін товарами, цінами, залишками та замовленнями через CommerceML. Без сторонніх модулів. Це в 5 разів швидше, ніж розробка власного обміну на OpenCart або WordPress. Економія на інтеграції — до 200 000 грн порівняно з кастомними рішеннями.
- Проактивний захист — модуль
security включає WAF, контроль цілісності файлів, захист від SQL-ін'єкцій, двофакторну автентифікацію. Для проєктів з вимогами ФСТЭК — сертифіковане рішення (згідно з Wikipedia, це стандарт для корпоративних систем).
- Модульна архітектура — підключаємо лише потрібні модулі:
iblock, catalog, sale, search. Менше модулів — менше запитів до БД на кожен хіт.
- Регулярні патчі — вендор випускає security-патчі, закриваючи вразливості швидше, ніж open-source проєкти (середній час виправлення CVE — 2 тижні). Офіційна документація по модулях доступна на сайті розробника.
Що дають HL-блоки і як ми прискорюємо каталог
Highload-блоки — це альтернатива розширеним властивостям інфоблоків, коли список значень може зростати до тисяч записів. Типовий приклад: виробники, країни, кольори. Якщо зберігати їх як властивості-списки в інфоблоці, кожна фільтрація викликає повне сканування таблиці b_iblock_property_enum. З HL-блоками вибірка йде по індексу — час відповіді фільтра знижується з 1–2 секунд до 50 мс. Продуктивність HL-блоків у 8 разів вища за властивості-списки інфоблоків. Ми використовуємо 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 годин).
Наш процес і технології
| Тип проєкту |
Терміни |
Складність |
Ключові особливості |
| Корпоративний сайт |
від 1 місяця |
Середня |
Каталог, новини, форми, CRM-інтеграція |
| Інтернет-магазин |
від 2 місяців |
Висока |
54-ФЗ, маркетплейси, обмін з 1С, SKU |
| B2B-портал |
від 3 місяців |
Дуже висока |
Персональні ціни, документообіг, Bizproc |
| Лендінг |
від 2 тижнів |
Низька |
LCP < 2с, композитний кеш, статика |
| Багатосайтова структура |
від 1,5 місяців |
Висока |
Роздільний контент, спільний каталог, hreflang |
Стек: верстка 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 з версіонуванням.
Процес роботи:
- Аналітика — вивчаємо конкурентів, збираємо вимоги, малюємо прототипи в Figma. На виході — ТЗ з user stories.
- Дизайн — UI/UX з дизайн-системою. Компоненти перевикористовуються.
- Розробка — пишемо компоненти з кастомними шаблонами в
local/templates/. Бізнес-логіку виносимо в модулі local/modules/.
- Тестування — функціональне, кросбраузерне, навантажувальне (до 1000 запитів). Критичні баги виправляємо до запуску.
- Запуск — деплой на прод, моніторинг через UptimeRobot, алерти в Telegram. Усуваємо перші 48 годин.
Інтеграції, мультимовність і редизайн
| Напрямок |
Сервіси |
| CRM та аналітика |
Бітрікс24 (нативна), amoCRM, Roistat, Calltouch, Mindbox |
| Платежі |
ЮKassa, CloudPayments, Тінькофф, Apple Pay, Google Pay |
| Фіскалізація 54-ФЗ |
АТОЛ, OrangeData — налаштування через sale.cashbox |
| Логістика |
СДЕК, Boxberry, ПЕК, Укрпошта, Яндекс.Доставка |
| Комунікації |
JivoSite, Carrot Quest, SendPulse |
-
Повна локалізація через мовні файли lang/ і механізм SITE_ID. hreflang для кожної версії. Регіональні версії з різними цінами та контентом — визначення за IP (main.geo) або ручний вибір. Мультидоменність — єдине управління кількома доменами.
-
Редизайн без втрати позицій: аудит продуктивності (PageSpeed, WebPageTest), SEO (Screaming Frog). Новий шаблон у local/templates/ із збереженням URL-структури. 301-редиректи лише якщо URL змінюється суттєво. Оновлення ядра, перехід на D7 ORM, реструктуризація інфоблоків, міграція через sprint.migration з Git.
Типові помилки при проектуванні інфоблоків
- Один інфоблок на всі сутності замість окремих під товари, категорії, бренди.
- Використання властивостей-списків замість HL-блоків для довідників з великою кількістю записів.
- Відсутність індексів на полях, що використовуються у фільтрації каталогу.
- Нехтування тегованим кешуванням — призводить до скидання всього кешу при зміні одного елемента.
Гарантія та підтримка
Ми працюємо з 1С-Бітрікс 12+ років, реалізували 500+ проєктів. У штаті сертифіковані розробники. Фіксована вартість у договорі — без сюрпризів. Гарантійний період покриває помилки коду. Після — абонентські пакети з SLA (час реакції — 2 години, рішення — 8 годин). Моніторинг доступності 24/7, алерти в Telegram. За потреби отримайте попередній аудит — зв'яжіться з нами через форму на сайті або напишіть у чат, відповімо протягом години. Замовте розробку під ключ — ми спроєктуємо інфоблоки, інтегруємо 1С і розженимо каталог. Якщо вже є сайт на іншій CMS — замовте аудит продуктивності та міграцію на Бітрікс.
