Шаблонні сайти не розкривають експертизу архітектурного бюро
Архітектурне бюро продає експертизу, і сайт має її транслювати. Потенційний замовник — девелопер, інвестор або муніципалітет — оцінює портфоліо, компетенції команди та масштаб робіт. Шаблонний сайт із трьома слайдами та формою зворотного зв'язку не конвертує. Ми будуємо сайти на 1С-Бітрікс, де структурована база проектів із фільтрацією, інтерактивні 3D-тури та візуально чиста подача — стандарт. Наша команда використовує інфоблоки v2.0 з типізацією, теговане кешування та REST API для безшовної інтеграції з CRM і 1С. Оцінюємо проект за два дні, а фінальний результат здаємо під ключ. Отримайте консультацію зі структури портфоліо та вибору 3D-рішення.
Типові технічні проблеми
Слабка структура портфоліо. Інфоблок «Проекти» без системи фільтрації — замовник не знайде потрібний кейс. Ми реалізуємо розумний фільтр із фасетною індексацією: пошук за типом об'єкта, статусом, роком і архітектором займає 0.3 секунди на 200 проектах.
Повільне завантаження 3D-панорам. Типова панорама в equirectangular важить 15–30 МБ. Без оптимізації сторінка завантажується 10+ секунд. Рішення — мультироздільна здатність (тайлова піраміда) через Pannellum.js: завантажується лише видима область, що скорочує час до 2 секунд.
Складність оновлення контенту. Архітекторам потрібно часто додавати нові проекти та нагороди. Ми налаштовуємо адміністративний інтерфейс із візуальним редактором 3D-турів, де менеджер завантажує панорами та розставляє точки переходів без програміста.
Як організувати портфоліо, яке продає?
Портфоліо — основний інструмент продажу. Збираємо його через інфоблок «Проекти» з 12+ властивостями: тип об'єкта (житловий комплекс, приватний будинок, офіс), статус (концепція/реалізовано), площа, рік, локація, архітектор (прив'язка до розділу «Команда»), послуги (прив'язка до «Послуги»), фотогалерея, 3D-тур, відео, опис із блоками «Задача», «Рішення», «Матеріали». На фронті — фасетний фільтр та картки з анімацією при наведенні.
Детальна сторінка проекту містить hero-блок, фотогалерею в masonry, iframe із туром, таблицю характеристик, команду проекту та список нагород. Усе це генерується через компоненти 2.0 з тегованим кешуванням.
Як впровадити 3D-тури на Бітрікс?
Використовуємо два підходи з різною архітектурою:
- Matterport, Kuula — хмарні сервіси. Інтеграція через iframe. Технічно просто: властивість елемента інфоблоку зберігає URL, шаблон рендерить
<iframe>з параметрамиallow="fullscreen; vr"таloading="lazy". Обмеження: платна підписка (від $99/міс) та залежність від інфраструктури вендора. - Pannellum.js Pannellum.js — self-hosted open-source бібліотека. Повний контроль, жодних підписок. Створюємо інфоблок «3D-тури» з властивостями: панорами (множинне файлове), конфігурація (JSON). Менеджер завантажує панорами та налаштовує hotspots через візуальний редактор.
Для оптимізації використовуємо мультироздільну здатність (утиліта generate.py з бібліотеки) та прогресивний JPEG. Приклад: середня панорама після нарізки завантажується за 1.8 с замість 20 с. Self-hosted рішення знижує щомісячні витрати в 10 разів порівняно з хмарними сервісами: замість $99 ви платите $0 за ліцензію, лише за хостинг.
Технічні деталі налаштування Pannellum.js
Для мультироздільної здатності використовуємо утиліту generate.py, тайли зберігаємо у форматі JPEG з прогресивним завантаженням. Файли конфігурації зберігаємо в інфоблоці в JSON-полі. Hotspots задаються у форматі YAML і конвертуються в JSON на етапі рендерингу.Порівняння хмарних та self-hosted 3D-рішень
| Параметр | Matterport (хмарний) | Pannellum.js (self-hosted) |
|---|---|---|
| Вартість | Підписка від $99/міс | Безкоштовно (open source) |
| Контроль даних | Дані на серверах вендора | Повний контроль, свої сервери |
| Кастомізація | Обмежена | Повна (CSS, JS, hotspots) |
| Інтеграція з Бітрікс | iframe | Пряма через REST API, інфоблоки |
| Продуктивність | Залежить від CDN вендора | Налаштовувана, тайлова піраміда |
Процес роботи
| Етап | Що робимо | Термін |
|---|---|---|
| Аналітика | Аудит контенту, вибір платформи 3D, структура портфоліо | 1.5 тиж |
| Дизайн | Концепція, макети ключових сторінок, прототип галереї | 2 тиж |
| Верстка та фронтенд | Адаптив, Pannellum/Matterport, фільтрація, skeleton-екрани | 3 тиж |
| Бекенд | Інфоблоки, компоненти, адмінка для турів | 2 тиж |
| Контент | Завантаження проектів, конвертація панорам, налаштування турів | 1.5 тиж |
| Тестування та запуск | Перевірка на десктопі/мобільних, продуктивність, деплой | 1 тиж |
Разом: 10–12 тижнів. Якщо використовуємо Matterport — мінус 1.5 тижня, якщо кастомний Pannellum — плюс тиждень.
Що входить у роботу (deliverables)
- Повністю налаштований сайт на 1С-Бітрікс
- Інфоблоки для портфоліо, команди, послуг, преси, нагород
- Система фільтрації проектів
- Інтеграція 3D-турів (Matterport або Pannellum)
- Адміністративний інтерфейс для управління панорамами
- Документація з наповнення
- Навчання редакторів (2 години)
- Гарантійна підтримка 6 місяців
Типові помилки при розробці
- Забагато типів об'єктів — краще обмежитися 6–8 категоріями, інакше фільтр стає марним.
- Панорами без мультироздільної здатності — сторінка завантажуватиметься 30 секунд; завжди використовуйте тайлові піраміди.
- Ігнорування мобільних — на телефоні 3D-тур має замінюватися на статичну панораму з кнопкою запуску.
Зв'яжіться з нами для оцінки вашого проекту. Отримайте консультацію зі структури портфоліо та вибору 3D-рішення.