Meandre

2026

Редизайн сайта архитектурного бюро

Computer monitor displays office interior project for Crocs with reception and workspace photos.
(01)

О студии

Meandre — архитектурная студия полного цикла, основана в Москве в 2011 году. За 14 лет работы — больше 200 реализованных объектов и клиенты вроде Avito, Bloomberg, DHL, Samsung, Google, H&M. Студия проектирует офисы, пространства общепита и жилые интерьеры. Главная особенность: архитекторы и инженеры работают как единая команда. Клиент не ищет двух подрядчиков — он работает с одним.

Website page showing architectural and engineering office design services with project photos and service overview.Computer screen showing a website with a project for Avito office in a business center.
(02)

Задача

Существующий сайт устарел технически и визуально и больше не отражал уровень студии. Нужно было переосмыслить подачу: вывести на первый план ключевые проекты, упростить навигацию и показать инженерную экспертизу команды. При этом важно было сохранить баланс между сдержанным минималистичным стилем архитектурного бюро и понятной структурой для заказчиков, которые приходят с конкретной задачей — найти подрядчика для проектирования офисных интерьеров.

Office and commercial space architectural and engineering design homepage with project images and service list.Black text on white background about architectural and engineering design for offices and commercial spaces.
(03)

Отправная точка

Начали с детального технического задания — зафиксировали УТП, аудиторию, визуальные ориентиры, конкурентов. Детальное ТЗ в начале работы экономит правки в конце. Два созвона с заказчиком — и направление стало понятным. Провели конкурентный анализ трёх студий со схожим профилем: это сразу показало, где есть возможности выделиться, а где достаточно сделать просто хорошо.

Website layout with text sections on architecture firm, services, projects, key specialists, and contact form.Architectural and engineering design of offices and commercial spaces with principles text.Four web page sections about architecture studio, project conflicts, clients, and job recruitment.
(04)

Метафора проекта

Meandre — не только про красивые интерьеры. Студия самостоятельно ведёт инженерные разделы, без сторонних подрядчиков. Это редкость на рынке, и об этом важно было говорить не словами, а формой. Технические шрифты, архитектурные линии, элементы вёрстки с отсылкой к чертежам. Сайт должен считываться как точный рабочий инструмент — и одновременно оставаться понятным для заказчика, который впервые ищет студию для проектирования офиса.

Diagram with text describing design goals to improve daily reality and create new spaces and interfaces.Computer monitor on desk displaying a project list webpage with office interior photos and text in Russian.
(05)

Страница проектов

Работу начали именно с этой страницы. Нужно было решить две задачи одновременно: показать избранные проекты крупно и выразительно, и открыть доступ к полному архиву из 200+ объектов. Архивные работы без отдельной страницы отображаются как карточки: площадь, тип помещения, год. Фильтрация по категориям реализована так, что одинаково удобно работает и на большом экране, и на телефоне.

Two project pages showing office interior photos and a list of project names with locations.Three black and white photos of modern office interiors with seating areas, reception, and workstations.
(06)

Страница проекта

Каждый проект у студии разный: разный объём фотографий, разный состав информации. Жёсткий шаблон здесь не работает. Сделали модульную систему — заказчик сам собирает страницу через CMS из готовых блоков: чертежи, спецификация, слайдер с переменным количеством изображений, текстовые блоки. Каждый модуль можно включить или убрать. При любой раскладке страница выглядит цельно.

Office project page showing the Avito office layout in the White Gardens business center with team and tasks.Open office interior with yellow desks, chairs, and a wooden swing chair under an industrial ceiling.
(07)

Блог

У студии большой архив статей с собственной графикой, накопленной за годы. Задача — вписать этот разнородный контент в новую стилистику без потерь. Страница блога получила фильтрацию по темам, время чтения и счётчик просмотров. Страница самой статьи разработана отдельно: строчный шрифт 17px, выверенные межстрочные расстояния, логика отступов между заголовками и изображениями.

Blog page showing article titles and a detailed post about resolving conflicts in project design with a hammer image.Smartphone displaying a webpage about becoming a professional with colorful illustration.
(08)

Студия и люди

Раздел «Студия» — семь внутренних страниц: о студии, меморандум, команда, клиенты, упоминания, вакансии и раздел для прессы. Каждая держится в общей стилистике, но использует свой визуальный приём — пользователь не скучает, но не теряется. Контент намеренно вёрстан в узкой колонке: легче читать, быстрее найти нужное.

Collage of text documents and a mobile phone screen showing a studio's web interface and client logos.Office-themed collage with text about teamwork and company values and four workspace photos at corners.Eight smartphone screens showing a studio's website pages in with company info and job offers.
(09)

Тёмная тема

Проект реализован в двух цветовых версиях — светлой и тёмной. Это не инверсия цветов: акценты, состояния форм, иконки пересмотрены отдельно под каждый фон. То, что читается на светлом, на тёмном может потеряться. Каждый элемент проверен в обеих темах до передачи в разработку. В итоге обе версии работают одинаково — ни одна не выглядит второстепенной.

Dark-themed website layout showing architectural and engineering office design projects with photos and text.Two smartphones with dark mode screens showing recruitment and company info with colorful illustration.
(10)

Дизайн-система

Проект потребовал полноценной дизайн-системы. Система цветов, система шрифтов, иконки, базовые компоненты — кнопки, поля форм, составные блоки, модули, попапы. Отдельно выстроена система отступов Spacing: каждое значение берётся из единой шкалы, ни одного произвольного расстояния. Это сокращает время разработки и делает код чище — разработчик работает с системой, а не расшифровывает макеты.

Two smartphones showing a dark-themed app interface with text forms and a gallery of images.
(11)

Итог

25 уникальных страниц, две цветовые темы, авторский контроль Pixel Perfect на финальном этапе. Готовые HTML/CSS/JS файлы переданы backend-разработчику для интеграции в собственную CMS на Django. Отдельная благодарность основателю бюро Андрею Гаврилову. Человек, который понимает: творческий процесс иногда живёт по своему расписанию и требует времени. Работать с такими людьми — редкость.

Website layout screenshots showing team, project process, office area form, contact info, and Moscow map.Three sections: project description in Russian left, circle with 'Changes' center, and personal project approach right.