Как атомарная система в дизайне сэкономила 3 месяца переделок сайта под новый брендинг

Рассказываем, как использование атомарной дизайн‑системы помогло без потерь адаптировать готовый сайт под кардинально новый брендинг — и почему этот подход выгоден любому бизнесу, который планирует развивать сайт.

О клиенте и задаче

Паритет — тюменский застройщик. В 2024 году мы уже работали над их сайтом, потом на стороне клиента случились пертурбации: часть команды отделилась и ушла делать другую компанию — Люди. Прежний сайт достался им. В 2025 году Паритет снова пришёл к нам, чтобы довести дело до конца и разработать уже свой сайт — с другими смыслами, дизайном, уровнем погружения в детали и с учётом новой целевой аудитории. Мы стартовали работы с нуля — с анализа рынка и проектирования.

Анализ рынка и проектирование структуры

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

Взяли за основу классические рабочие вещи вроде визуального и параметрического выборщика, быстрых фильтров или генплана. И усилили их подробными страницами проектов, которые фактурно подсвечивают преимущества: паркинг, зелёное окружение, отделки и другое.

А ещё заложили при проектировании нестандартный инструмент подбора — квиз. Он формирует предложение исходя из ответов пользователя.

Мудборды и дизайн‑концепция

Прежде чем рисовать макеты, мы сначала договариваемся с клиентом о визуальном языке. Лучше разойтись во вкусах на мудборде, чем после двух недель работы над дизайн‑концепцией.

На этапе мудбордов выбрали три направления.

В стилистике советского авангарда. Строгие линии, массивные блоки, грубые текстуры и контрастная палитра. Визуальный язык опирается на контраст: брутальная типографика и акцентные элементы сочетаются с чистыми сетками, нейтральным пространством и умеренной анимацией.

Человечный и экологичный. В визуале — атмосферные уютные фото людей, спокойная типографика и много воздуха. Этот вариант клиент и выбрал.

Сервисный с акцентом на контент. Простой, понятный интерфейс, который не напрягает пользователя и помогает легко навигироваться по сайту.

Итоговый вариант — середина между сервисностью и уютным контентом. Универсальный и спокойный стиль: уходим от сухой презентации цифр и создаём эффект присутствия через уютный визуальный нарратив — показываем закрытый двор, игровые площадки и зоны для отдыха. Ориентируемся на потенциальную целевую аудиторию — молодые семьи с детьми.

Акценты: ритм, который задают блоки разного масштаба, и контрастные элементы вроде кнопок и баннеров. Кроме классических рендеров использовали генеративный визуал — для атмосферных фото и абстрактных 3D‑иллюстраций, например на странице «О компании».

Макеты всего сайта

База каталога — классические паттерны сайтов недвижимости, которые мы дополнили быстрыми фильтрами с популярными запросами: «с террасой», «с двумя санузлами», «2‑комн. квартиры» и другое.

Избранное без регистрации и личного кабинета. С возможностью поделиться подборкой по ссылке, отфильтровать по типу недвижимости и отсортировать по цене и площади.

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

Продуманная карточка объекта. Добавили план в векторе, чтобы пользователь мог оценить метражи и положение объекта относительно сторон света. А ещё реализовали 3D‑тур, который позволяет представить, как помещение может выглядеть с отделкой и мебелью. Здесь же можно выбрать отделку и рассчитать цену с её учётом, добавить объект в избранное и заказать звонок.

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

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

Генплан. Два варианта визуализации: генплан и 3D‑тур. При клике на пины на генплане пользователь видит количество свободных объектов и цены. На 3D‑туре — приближает локации, чтобы изучить детали.

Интерактивная карта инфраструктуры. Настроили интеграцию с Яндекс Картами и сделали фильтрацию по типу инфраструктуры: школы, больницы, транспорт и другое.

Дополнительные механики. Например, заказ такси до офиса прямо со страницы контактов. Функционал не необходимый, но улучшает пользовательский опыт и удовлетворённость от работы с сайтом.

Управление контентом

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

Интеграция с Profitbase. Из Profitbase на сайт падает информация об объектах — характеристики и параметры. Чтобы не блокировать фронтенд в момент обновления данных, настроили фоновый импорт по расписанию или при ручном запуске.

Как атомарная система помогла быстро адаптировать сайт под новый брендинг

Атомарная система — это подход, когда дизайнер изначально создаёт модульные, повторяющиеся компоненты и на их основе собирает блоки и страницы. В основе — принцип как в химии: атомы (минимальные элементы в интерфейсе) объединяются в молекулы (экраны, блоки и страницы).

Мы изначально проработали все разрешения, состояния экранов и поведение элементов. Никакого хаоса в фигме, случайных цветов и шрифтов. Всё систематизировано, разбито на компоненты и стили.

К концу проекта у клиента появился финальный брендинг — и он сильно отличался от того, что мы ожидали. Вместо ненавязчивого сервисного интерфейса и уютного визуала — акцентный красный, характерные шрифты и немного даже агрессивно‑модные сгенерированные изображения. Что‑то между стилем МТС и советским авангардом, который мы предлагали в одном из вариантов мудбордов.

В итоге мы просто взяли макеты на основе атомарной системы и накатили на них новый брендинг. Да, изображения в новой стилистике меняли вручную, но если они повторялись в нескольких местах на сайте — картинка обновлялась сразу везде.

Почему бизнесу важно, чтобы подрядчик использовал атомарную систему

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

Риск ошибок и несостыковок — минимальный. Или вообще равен нулю. При ручных правках нельзя не учитывать человеческий фактор. В случае с атомарной системой дизайнер не проглядит неактуальную кнопку или форму.

Сайт проще масштабировать. Макеты новых страниц не придётся создавать с нуля. Даже без интуитивно понятной админки дизайнер возьмёт за основу преднастроенные стили и компоненты — и в разы быстрее соберёт новый лендинг.

Нет привязки к одному подрядчику. Даже если поддерживать сайт будет другая команда или инхаус‑дизайнер — ему не придётся разбираться в чужой запутанной системе. Атомарность — это общий язык дизайна.

Не обязательно заказывать дизайн и разработку у одного подрядчика. Проработка стилей, состояний и компонентов, а как результат UI‑kit — сильно упрощают и ускоряют разработку. Дизайнерам и разработчикам необязательно быть в тесной коммуникации: с атомарной системой прозрачно понятно, как переносить макеты в код.

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

Что говорит о проекте клиент

«Как руководитель проекта, я вижу, что основные метрики сайта растут с каждым месяцем. Есть обращения и продажи. Предполагаю, что сайт окупит себя в сентябре — то есть через 7 месяцев после запуска».