Developing a website for an architectural bureau using 1C-Bitrix

Architectural Bureau Website Development on 1C-Bitrix

Architectural bureau sells expertise, and website must convey this expertise. Potential customer — developer, private investor, or municipality — evaluates completed project portfolio, team competencies, and work scale. Generic template with three slides and feedback form won't work. Structured project database with filtering, interactive 3D tours, and visually clean presentation needed, where architecture speaks for itself. On 1C-Bitrix this assembled via typed info blocks, 3D visualization platform integrations, and thoughtful frontend.

Bureau Services

"Services" info block with elements:

• Architectural Design (residential, commercial, public buildings)
• Interior Design
• Architectural Supervision
• Urban Planning
• Reconstruction and Restoration
• Consulting and Expertise

Properties: description, work stages list (text field), project examples (binding to portfolio), icon for card. On front — service tiles with detail page transition showing work process and relevant projects.

Architect Team

"Team" section — not formality. In architectural bureau, client often chooses specific architect seeing their projects. "Team" info block:

• Photo — professional portrait
• Position — chief architect, lead architect, architect-designer
• Specialization — residential complexes, public spaces, interiors
• Project Binding — link to portfolio
• Education and Awards — text field
• Publications — binding to press info block

Detail page — their portfolio (projects filtered by author), biography, publications. Essentially — personal landing page within bureau site.

Press and Awards

Two separate info blocks:

"Press" — profile publication mentions (Architectural Gazette, AD, PROJECT International). Properties: publication, date, original link, scan/PDF, project binding. On front — feed with publication logos, works as social proof.

"Awards" — competitions and prizes (Golden Trezini, Zodchestvo, WAF). Properties: competition name, year, nomination, result (winner / finalist / shortlist), project binding. Displayed on main — "Recognition" block with competition logos and years.

Project Portfolio Structure

Portfolio — main sales tool. "Projects" info block with rich property system:

• Object Type — list: residential complex, private house, office building, mall, public space, cultural site
• Status — list: concept, design, construction, realized
• Area — numeric (m²)
• Completion Year — numeric
• Location — string (city, country)
• Architect — binding to "Team"
• Services — binding to "Services" (what bureau did)
• Photo Gallery — multiple file property
• 3D Tour — string (Matterport iframe URL) or HTML
• Video — YouTube/Vimeo link
• Project Description — detailed text with sections (task, solution, materials, structure)
• Awards — binding to awards info block

Front Filtering: by object type, status, year, architect. Implemented via smart-filter or custom AJAX with faceted indexing. For 50–200 project portfolio faceted index overkill but stable and needs no custom code.

Portfolio Card: cover full block, name, type, year, area. On hover — darkening and brief description. Minimalist — architectural bureaus value space.

Detail Page — long page with sections:

1. Hero block with main photo full-screen
2. Project description (client task, solution, features)
3. Photo gallery — masonry or horizontal scroll
4. 3D tour (if exists) — Matterport iframe or Pannellum.js
5. Technical specs (area, floors, materials) — table
6. Project Team — architect thumbnails with binding
7. Awards — if project noted

3D Visualizations and Interactive Tours

3D visualizations and virtual tours transform bureau site from photo catalog to interactive presentation tool. Two approaches with different architecture.

Matterport and External Platforms. Matterport, Kuula, 3DVista — cloud services creating 3D tours from panoramic shots or lidar scanning. Integration via <iframe>. Technically simple: element property stores URL, component template renders iframe. Advantages: visualization quality, ready player with navigation, mobile support. Limitations: third-party dependency, paid subscription, no player appearance control.

Matterport iframe settings:

• allow="fullscreen; vr" — fullscreen and VR device support
• loading="lazy" — deferred tour load (heavy, don't load on page open)
• URL params: &play=1 (auto-start), &qs=1 (quick start), &brand=0 (hide Matterport logo — paid)

Pannellum.js — self-hosted solution. Open-source library for panoramic tours. Photographer shoots spherical panoramas (equirectangular), uploads to server, Pannellum renders interactive tour with transitions between points.

Advantages: full control, no subscriptions, interface customization. Limitations: no automatic 3D modeling (panoramas only), manual hotspot setup (transition points).

Pannellum Implementation on Bitrix:

"3D Tours" info block with tour elements. Binding to projects. Properties:

• Panoramas — multiple file property (equirectangular JPEG)
• Configuration — text property with JSON tour description (scenes, hotspots, start point)

JSON configuration generated by custom admin page: manager uploads panoramas, places transition points via visual editor (pitch/yaw coordinates), saves. Front Pannellum.js initializes with this config.

Panorama Optimization. Equirectangular image for quality tour weighs 15–30 MB. Solutions:

• Multi-resolution (multires) — Pannellum supports tile pyramids. generate.py utility (Pannellum kit) slices panorama to tiles of different detail levels. Browser loads only visible part in needed resolution — like Google Maps.
• Next Scene Preload — cursor approaching hotspot triggers background load of next panorama.
• Progressive JPEG — panoramas saved as progressive, display starts before full load.

BIM Models. BIM model display (IFC, Revit) in browser — separate complexity level. Full BIM viewers (Autodesk Viewer, xeokit) heavy and need conversion. For portfolio site, export key views from BIM to glTF/GLB and display via Google's <model-viewer> or Three.js. Gives interactive 3D rotation without full BIM functionality. IFC → glTF conversion at content prep stage, not automatic.

Frontend Technical Architecture

Bureau site minimalist visually, technically saturated: heavy images, 3D tour iframes, possible WebGL elements. Key solutions:

• Deferred loading of heavy elements — iframes, video, galleries below fold via Intersection Observer
• Skeleton screens instead of spinners during gallery/tour load
• Mobile adaptation — on phones 3D tour replaced with static panorama, launch on click (saves traffic/battery)
• Typography — one font, two weights, local connection

Development Stages

Total: 10–12 weeks. Matterport-based saves 1.5 weeks in frontend/content. Pannellum with custom admin adds a week.