Розробка сайту архітектурного бюро на 1С-Бітрікс

Розробка сайту архітектурного бюро на 1С-Bitrix

Архітектурне бюро продає експертизу, та сайт повинен цю експертизу транслювати. Потенційний замовник — девелопер, приватний інвестор або муніципалітет — оцінює портфоліо реалізованих проектів, компетенції команди та масштаб робіт. Шаблонний сайт з трьома слайдами та формою зворотного зв'язку не працює. Потрібна структурована база проектів з фільтрацією, інтерактивні 3D-тури та візуально чистої подачи, де архітектура говорить сама за себе. На 1С-Bitrix це збирається через інфоблоки з розвитою типізацією, інтеграції з платформами 3D-візуалізації та продуманий фронтенд.

Послуги бюро

Інфоблок «Послуги» з елементами:

• Архітектурне проектування (житлові, комерційні, громадські будівлі)
• Дизайн інтер'єру
• Авторський нагляд
• Градобудівне проектування
• Реконструкція та реставрація
• Консалтинг та експертиза

Властивості: опис, перелік етапів роботи (текстове поле), приклади проектів (привязка до портфоліо), іконка для карточки. На фронтенді — плитка послуг з переходом на детальну сторінку, де описаний процес роботи та показані релевантні проекти.

Команда архітекторів

Розділ «Команда» — не формальність. В архітектурному бюро замовник часто вибирає конкретного архітектора, побачивши його проекти. Інфоблок «Команда»:

• Фото — професійний портрет
• Посада — головний архітектор, ведучий архітектор, архітектор-дизайнер
• Спеціалізація — житлові комплекси, громадські простори, інтер'єри
• Привязка до проектів — зв'язок з портфоліо
• Освіта та награди — текстове поле
• Публікації — привязка до інфоблока преси

На детальній сторінці архітектора — його портфоліо (проекти з фільтром «тільки цей автор»), біографія та публікації. По суті — персональна посадочна сторінка всередині сайту бюро.

Публікації у пресі та награди

Два окремих інфоблока:

«Преса» — публікації у профільних виданнях (Архітектурний вісник, AD, ПРОЕКТ International). Властивості: видання, дата, посилання на оригінал, скан/PDF, привязка до проекту. На фронтенді — лента з логотипами видань, працює як соціальний доказ.

«Награди» — конкурси та премії (Золотий Тредзіні, Зодчество, WAF). Властивості: назва конкурсу, рік, номінація, результат (переможець / фіналіст / шорт-ліст), привязка до проекту. Виводяться на головній — блок «Визнання» з логотипами конкурсів та роками.

Структура портфоліо проектів

Портфоліо — основний інструмент продажу. Інфоблок «Проекти» з розвитою системою властивостей:

• Тип об'єкта — список: житловий комплекс, приватний будинок, офісна будівля, торговий центр, громадське простір, культурний об'єкт
• Статус — список: концепція, проектування, будівництво, реалізований
• Площа — числова (м²)
• Рік завершення — числова
• Локація — строка (місто, країна)
• Архітектор — привязка до інфоблока «Команда»
• Послуги — привязка до інфоблока «Послуги» (що саме робило бюро)
• Фотогалерея — множинна файлова властивість
• 3D-тур — строка (URL iframe для Matterport) або HTML
• Відео — посилання на YouTube/Vimeo
• Опис проекту — детальне текстове поле з розбивкою на блоки (задача, рішення, матеріали, конструктив)
• Награди — привязка до інфоблока наград

Фільтрація на фронтенді: за типом об'єкта, статусом, роком, архітектором. Реалізується через smart-фільтр модуля каталога або користувацький AJAX-фільтр з фасетною індексацією. Для портфоліо з 50–200 проектів фасетний індекс надлишковий, але працює стабільно та не потребує користувацького коду.

Карточка проекту в каталозі: обкладинка на весь блок, назва, тип, рік, площа. При наведенні — затемнення та краткий опис. Мініналістично — архітектурні бюра цінять простір.

Детальна сторінка проекту — довга сторінка з секціями:

1. Hero-блок з головною фотографією на весь екран
2. Опис проекту (задача замовника, рішення, особливості)
3. Фотогалерея — masonry або горизонтальний скролл
4. 3D-тур (якщо є) — iframe з Matterport або Pannellum.js
5. Технічні характеристики (площа, кількість поверхів, матеріали) — таблиця
6. Команда проекту — мініатюри архітекторів з привязкою
7. Награди — якщо проект відзначений

3D-візуалізації та інтерактивні тури

3D-візуалізації та віртуальні тури — те, що перетворює сайт бюра з каталога фотографій в інтерактивний інструмент презентації. Два підходи з принципово різною архітектурою.

Matterport та зовнішні платформи. Matterport, Kuula, 3DVista — хмарні сервіси, у яких створюються 3D-тури на базі панорамних знімків або лідарного сканування. Інтеграція з сайтом — через <iframe>. Технічно це просто: властивість елемента інфоблока зберігає URL, шаблон компонента рендерить iframe з нужними розмірами. Переваги: якість візуалізації, готовий плеєр з навігацією, мобільна підтримка. Обмеження: залежність від стороннього сервісу, платна підписка, немає контролю над зовнішнім виглядом плеєра.

Настройки iframe для Matterport:

• allow="fullscreen; vr" — підтримка повноекранного режиму та VR-пристроїв
• loading="lazy" — відложена завантаження тура (він важкий, не потрібно грузити при відкритті сторінки)
• Параметри URL: &play=1 (автозапуск), &qs=1 (швидкий старт), &brand=0 (приховати логотип Matterport — платна опція)

Pannellum.js — self-hosted рішення. Open-source бібліотека для панорамних турів. Фотограф знімає сферичні панорами (equirectangular), завантажує на сервер, Pannellum рендерить їх в інтерактивний тур з переходами між точками.

Переваги: повний контроль, жодних підписок, кастомізація інтерфейсу. Обмеження: немає автоматичного 3D-моделювання (тільки панорами), потрібно самостійно настраювати hotspot-и (точки переходу).

Реалізація Pannellum на Bitrix:

Інфоблок «3D-тури» з елементами-турами. Кожен тур — елемент з привязкою до проекту. Властивості:

• Панорами — множинна файлова властивість (equirectangular JPEG)
• Конфігурація — текстова властивість з JSON-описом тура (сцени, hotspot-и, початкова точка)

JSON-конфігурація генерується користувацькою адміністративною сторінкою: менеджер завантажує панорами, розставляє точки переходу через візуальний редактор (координати pitch/yaw), зберігає результат. На фронтенді Pannellum.js інічіалізується з цією конфігурацією.

Оптимізація панорам. Equirectangular-зображення для якісного тура важить 15–30 МБ. Рішення:

• Мультиразрізняння (multires) — Pannellum підтримує тайлові піраміди. Утиліта generate.py (з комплекту Pannellum) нарізає панораму на тайли різних рівнів деталізації. Браузер завантажує тільки видиму частину у нужному розрізняння — як Google Maps.
• Передзавантаження наступної сцени — при наближенні курсора до hotspot починається фонова завантаження наступної панорами.
• Progressive JPEG — панорами зберігаються у progressive-форматі, відображення починається до повної завантаження.

BIM-моделі. Відображення BIM-моделей (IFC, Revit) у браузері — задача окремого рівня складності. Повнофункціональні BIM-вьюери (Autodesk Viewer, xeokit) важкі та потребують конвертації. Для сайту-портфоліо достатньо експортувати ключові вид з BIM у формат glTF/GLB та відображати через <model-viewer> від Google або Three.js. Це дає інтерактивне обертання 3D-моделі без повного BIM-функціоналу. Конвертація IFC → glTF виконується на етапі підготовки контенту, не автоматично.

Технічна архітектура фронтенду

Сайт архітектурного бюро візуально мініналістичний, але технічно насичений: важкі зображення, iframe з 3D-турами, можливі WebGL-елементи. Ключові рішення:

• Відложена завантаження всіх важких елементів — iframe, відео, галереї нижче fold завантажуються через Intersection Observer
• Skeleton-екрани — замість спіннерів при завантаженні галереї та тура
• Адаптація для мобільних — на телефонах 3D-тур замінюється на статичну панораму з можливістю запустити тур по натисканню (економія трафіку та батареї)
• Типографіка — один шрифт, два начертання, локальне підключення

Етапи розробки

Разом: 10–12 тижнів. Якщо 3D-тури на Matterport — мінус 1.5 тижня на фронтенді та контенті. Якщо потрібен Pannellum з користувацьким адмін-інтерфейсом — плюс тиждень.