Developing a Design Studio Website on 1C-Bitrix

A visitor lands on a design studio's website. They evaluate the portfolio within 3–7 seconds. If loading is slow and animations stutter, the client leaves for a competitor. One interior design studio lost 40% of leads due to slow portfolio loading. We migrated their site to 1C-Bitrix. Now loading takes 0.4 seconds, and project filtering happens without reload. Our web development studio delivers turnkey projects, guaranteeing performance and ease of management. We specialize in design studio site Bitrix development, creating the perfect website for designers. Cost for a basic site starts at $2,500, saving up to 40% on lead generation time.

We focus on development on Bitrix for design studios. Our engineers have many years of experience with Bitrix development and have completed over 50 projects for design studios. Each solution is built on tag-based caching, image optimization, and CRM integration.

How We Develop a Design Studio Website on 1C-Bitrix

Development starts with task and brand analysis. We design the information architecture, create a design concept, and get client approval. Then comes markup, Bitrix integration, caching setup, and SEO. We finish with testing and production deployment. The entire process takes 30 to 60 working days. Get a consultation with a specialist to discuss your project.

Portfolio Architecture on Information Blocks

Filtering Portfolio Without Reload

Filtering by project type works via AJAX. We use the bitrix:catalog.section component with pagination disabled. When a category is clicked, JavaScript sends a request to ajax.php with filter parameters. The component returns an HTML fragment that is inserted into the portfolio container.

Filter parameters are passed via $arFilter: PROPERTY_TYPE, >=PROPERTY_YEAR, <=PROPERTY_YEAR, PROPERTY_TAGS (logical OR). Caching is tag-based, tied to the information block. According to the 1C-Bitrix documentation, tag-based cache automatically resets when information block elements are changed. When a new project is added, the cache is cleared via the OnAfterIBlockElementUpdate event handler.

Brief Form with File Upload

The form is created using the form module. Fields: name, email, phone, project type, description, file upload (up to 5 files, up to 20 MB each, formats PDF, JPG, PNG, AI, PSD). The submission creates a lead in Bitrix24 CRM via REST API. The manager receives a Telegram notification. Order development and we will prepare a custom proposal.

Work Process

Deliverables

• Documentation: technical specifications, architecture diagram, data flow description.
• Accesses: admin panel with full permissions, source code via Git, hosting credentials.
• Training: 2 hours of video training for content managers covering portfolio updates, blog management, and form settings.
• Support: 30 days of free support after launch (bug fixes, minor edits). Paid maintenance support available for $200/month.

Design Team and Blog

The "Team" section is implemented via the "Employees" information block, linked to projects. Each card includes: photo, specialization, experience, links to Behance/Dribbble, and thumbnails of the last three projects. The "Articles" information block contains SEO properties: META_TITLE, META_DESCRIPTION, author. We use the news.detail component with Article and Open Graph microdata.

Why CSS Grid Is Better Than JS Libraries for Masonry

Classic masonry with JavaScript (Masonry.js, Isotope) adds an unnecessary dependency and requires recalculation on every DOM change. The modern approach is CSS Grid with grid-template-rows: masonry (Firefox support) or a fallback to column-count for other browsers. This is 2–3 times faster on mobile devices.

For 1C-Bitrix, the bitrix:news.list component template generates a container with class .portfolio-grid. Styles define a column layout: Desktop (1200px+) — 3 columns with gap: 24px, Tablet (768–1199px) — 2 columns with gap: 16px, Mobile (<768px) — 1 column. Each card gets class .portfolio-card with break-inside: avoid. Varying card heights create the masonry effect.

IntersectionObserver for Element Appearance

Card appearance animation on scroll is implemented via IntersectionObserver, not the scroll event. Algorithm:

1. All cards initially get class .portfolio-card--hidden with opacity: 0 and transform: translateY(40px).
2. Observer with threshold: 0.15 and rootMargin: "0px 0px -50px 0px" tracks intersection.
3. When entering the viewport, the card gets class .portfolio-card--visible, triggering CSS-transition: opacity 0.6s ease-out, transform 0.6s ease-out.
4. transition-delay is calculated dynamically: (index % columnsCount) * 0.1s — creates a cascade effect from left to right.

Critically: Observer is created once, and after triggering for a specific card, observer.unobserve(entry.target) is called.

CSS Transitions During Filtering

When changing a category, the transition happens in three phases:

1. Fade-out: the container .portfolio-grid gets opacity: 0 via CSS-transition of 200ms.
2. Content replacement: on transitionend event, the HTML from the AJAX response is inserted into the container.
3. Fade-in: after DOM insertion via requestAnimationFrame, the container returns opacity: 1.

Additionally: the URL updates via history.pushState() with parameter ?type=interior, allowing sharing links to filtered portfolios.

Image Optimization

For rich-media portfolios, optimization is critical. We use loading="lazy" in the template for lazy loading. Covers are generated in three sizes via CFile::ResizeImageGet(): Thumbnail (400×300) for grid, Medium (800×600) for hover preview, Full (1920×auto) for detail page. WebP format is generated by the "Image Optimization" module or via an OnBeforeIBlockElementUpdate handler with GD/Imagick conversion.

Bitrix Edition Comparison for a Design Studio Website

Contact us to discuss the right edition for your project.

How to properly design infoblocks?

When developing a 1C-Bitrix website, we see dozens of projects where poor infoblock structure slows down the site. Typical scenario: the client asks for a "product catalog." The developer creates one infoblock catalog, puts 15 properties in it. Six months later – 40 properties, 8 of which are used only for one category. The filter lags, the b_iblock_element_property table grows to millions of rows, CIBlockElement::GetList runs for 3 seconds. Consequences – conversion drop, loss of customers, additional optimization costs. In one project after catalog refactoring, page generation time dropped from 4.2 to 0.8 seconds, and annual support costs were reduced by over $10,000 through eliminated redundant queries and agents.

Our approach: design infoblocks before writing a single line of code. Separate infoblocks for entities (products, categories, brands), dictionary properties via highload blocks, trade offers for SKUs. This builds performance for years. If you want a preliminary audit of your infoblock schema, contact us for a free review of common mistakes and recommendations.

Why 1C-Bitrix outperforms most CMS for business

The choice of CMS is dictated by business needs, not preferences. Native 1C exchange via catalog.import.1c provides two-way synchronization of products, prices, balances, and orders through CommerceML without third-party modules — five times faster than developing custom exchange on OpenCart or WordPress, saving hundreds of thousands of rubles. Proactive security module includes WAF, file integrity control, SQL injection protection, and two-factor authentication; it's certified for FSTEK requirements. Modular architecture lets you enable only needed modules — iblock, catalog, sale, search — reducing DB queries per hit. Regular patches close vulnerabilities faster than open-source projects (average CVE fix time two weeks). Official documentation is maintained on the vendor's site.

What highload blocks are and how they speed up the catalog

Highload blocks are an alternative to extended infoblock properties when the list of values can grow to thousands of entries. Typical example: manufacturers, countries, colors. If stored as list properties in an infoblock, each filter triggers a full scan of b_iblock_property_enum table. With HL-blocks, selection uses indexes – filter response time drops from 1–2 seconds to 50 ms. We use HLB component and custom queries via Bitrix\Highloadblock\DataManager. This is critical for catalogs with 100,000+ items.

From our practice: an online store with 500,000 items. Standard filter by brand took 4 seconds. The server couldn't handle 50 concurrent requests – pages crashed. We moved the brand directory to an HL-block, added tagged caching for 15 minutes, and set up an agent to clear cache on change. After optimization, filter time was 120 ms, average LCP was 1.8 seconds. The project runs stable without failures.

What integrations are critical for 1C-Bitrix stores

Each e‑commerce project requires reliable connections with payments, fiscalization, logistics, and CRM. We integrate YooKassa, CloudPayments, Tinkoff, Apple Pay, Google Pay for payments; ATOL and OrangeData for 54-FZ compliance via sale.cashbox; CDEK, Boxberry, PEC, Russian Post, Yandex.Delivery for logistics; Bitrix24, amoCRM, Roistat, Calltouch, Mindbox for analytics and CRM. All integrations are configured with proper error handling and fallback logic.

What's included in 1C-Bitrix website development

Each project includes a full set of documentation and artifacts to prevent knowledge loss after handover.

• Technical specification – user stories, infoblock diagrams, integration schemas.
• Source code in Git – with commit history, release tags, branching rules.
• Administrative documentation – description of custom components, deployment instructions, list of agents and events.
• Staff training – up to a 3-hour webinar: admin panel, order management, price settings. Recorded for later review.
• Access to staging during development – test before production deployment.
• Warranty support – bug fixes for 30 days after launch. Post-warranty support packages with SLA (response 2 hours, resolution 8 hours).

Our process and technologies

Tech stack: mobile-first markup, tested on physical devices (iPhone, iPad, Android). Use BrowserStack for Safari on iOS. Performance goals: LCP < 2.5 s, FID < 100 ms, CLS < 0.1. Enable composite site (composite module), CDN, tagged caching, WebP/AVIF, lazy loading. SEO: Schema.org via JSON-LD, auto-generation of sitemap.xml via seo module, canonical and hreflang for multilingual versions. robots.txt blocks /bitrix/ from indexing. CI/CD: Git, auto-deploy via GitLab CI, staging. DB migrations: sprint.migration module with versioning.

Process:

1. Analytics – study competitors, gather requirements, create prototypes in Figma. Output: technical specification with user stories.
2. Design – UI/UX with design system. Components are reusable.
3. Development – write components with custom templates in local/templates/. Business logic in local/modules/.
4. Testing – functional, cross-browser, load testing (up to 1000 requests). Critical bugs fixed before launch.
5. Launch – deploy to production, monitoring via UptimeRobot, alerts in Telegram. Fixes for first 48 hours.

Multilingual support and redesign

Full localization via language files lang/ and SITE_ID mechanism. hreflang for each version. Regional versions with different prices and content – IP detection (main.geo) or manual selection. Multidomain – unified management of multiple domains.

Redesign without losing rankings: performance audit (PageSpeed, WebPageTest), SEO (Screaming Frog). New template in local/templates/ with preserved URL structure. 301 redirects only if URL changes significantly. Kernel update, migration to D7 ORM, infoblock restructuring, migration via sprint.migration with Git.

Guarantee and support

We have been working with 1C-Bitrix for 12+ years, completed 500+ projects. Certified developers on staff. Fixed price in contract – no surprises. Warranty period covers code errors. After warranty, subscription packages with SLA (response time 2 hours, resolution 8 hours). 24/7 availability monitoring, alerts in Telegram. Get a consultation and preliminary estimate: contact us via the form on the website or chat – we'll respond within an hour. Order turnkey development – we'll design infoblocks, integrate 1C, and speed up the catalog. If you already have a site on another CMS, order a performance audit and migration to Bitrix.