Редизайн сайта для индустриального девелопера: как мы превратили сложный B2B-проект в понятный digital-инструмент

#1 Предварительная аналитика и поиск визуального направления

• На старте команда провела аналитику российских и зарубежных сайтов в смежных для заказчика сегментах: логистических парков, технопарков, строительных компаний и light industrial-проектов. Целью было не просто собрать красивые референсы, а выявить удачные практики навигации, подачи материала, контентной структуры, передачи экспертности и интерфейсных решений.

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

#2 Контентная концепция и смысловая упаковка

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

• При этом для пользователя нужно было донести 3 базовых посыла.
  • Во-первых, качество зданий и качество исполнения built-to-suit решений.
  • Во-вторых, прозрачность условий аренды или покупки — с понятными цифрами, без лишних барьеров на первом касании.
  • В-третьих, транспортную доступность как одно из ключевых преимуществ проекта. Эти смыслы стали основой не только для текстов, но и для компоновки блоков на главной странице.

#3 Проектирование структуры сайта

• На основе аналитики мы собрали брендбук и подробную структура проекта.
  В нее вошли:
  • главная страница,
  • типовые информационные страницы,
  • карточка здания,
  • карточка помещения,
  • каталог новостей и событий,
  • отдельная страница новости,
  • контакты,
  • технические страницы,
  • а также блоки с 3D-картой территории и рендерами на главной странице.

• Такой набор страниц позволил показать проект сразу на нескольких уровнях: как крупный индустриальный кластер, как набор конкретных объектов и как набор доступных помещений с отдельными параметрами.

#4 Разработка дизайна и UI-kit

• Визуальная система проекта проектировалась не как набор отдельных макетов, а как единый интерфейсный конструктор. В ТЗ мы отдельно прописывали требования к UI-kit: нужно было собрать все используемые цвета с назначением по категориям, систематизировать типографику для десктопа и мобильной версии, стандартизировать кнопки и поля ввода во всех состояниях, собрать иконки, проверить систему отступов и привести размеры кнопок к единому стандарту.

• Отдельные требования касались и самого дизайна. Макеты должны были создаваться в ширине 1440 px, но безопасно масштабироваться под Full HD, 2K и 4K. Для сверхшироких экранов допускалось увеличение за счет белых полей по краям.

• При этом изображения нужно было готовить в высоком разрешении, чтобы избежать размытия на больших мониторах, а мобильная версия отдельно проектировалась под 360 px. По сути, это был не просто desktop-first, а полноценный multiscreen подход с продуманной адаптацией.

#5 Проектирование интерактивных сценариев на главной странице

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

• Отдельно продумали разводящий блок по типам объектов. При наведении на зону раздела пользователь должен видеть подсветку и изменение направления иконки. Мини-анонс для блока должен подтягиваться из краткого описания категории или задаваться в коде. При клике пользователь переходит в каталог уже с примененным фильтром по выбранному типу зданий. То есть этот блок выполняет не только визуальную, но и навигационную функцию.

#6 Пул работ по 3D-визуализациям

• Отдельным большим блоком стала 3D-визуализация территории. В ТЗ мы фиксировали, что для главной страницы нужно создать общий вид складского комплекса с высоты птичьего полета. Заказчик передавал модели зданий, а команда дорабатывала их, выстраивала композицию, свет, тени и направления движения вдоль дорог. 3D здесь работало не как декоративный фон, а как навигационный слой, который помогает пользователю воспринимать весь проект как единую территорию.

• Кроме того, для блока мы продумали и интерактивность. На рендере размещаются пины по каждому зданию. При наведении на пин пользователь видит краткий текст и кнопку перехода, а сам текст берется из карточки объекта. При клике происходит переход в соответствующую карточку здания. Для мобильной версии эта карта тоже адаптирована.

#7 Проектирование каталога объектов и карточек

• Каталог объектов в проекте задумывался как структура с разными типами карточек. В системе должны поддерживаться как самостоятельные объекты, так и здания с вложенными помещениями.

• Каждая карточка здания или помещения спроектирована как отдельная страница со своим URL, а сами данные поступают из внешнего сервиса. Через него же регулируется и вывод карточек на сайт.

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

• Если какого-то параметра нет, соответствующий блок не должен ломать страницу: он скрывается или остается пустым. Такой подход важен для живого каталога, где состав данных может отличаться от объекта к объекту.

• Также отдельно заложили логику связи зданий и помещений. Если у здания есть помещения, в карточке помещения указывается, к какому зданию оно относится. После этой привязки карточка помещения автоматически попадает в карточку здания, а порядок вывода помещений можно регулировать сортировкой.

• Плюс, добавили логику типов сделки: если выбран формат аренды, раздел «Земля» не активен; если продажа — доступны все разделы. Минимальные и максимальные площади формируются автоматически на основе данных по всем карточкам зданий.

#8 Новости, контентные разделы и форма обратной связи

• Блок новостей тоже проектировался как рабочий инструмент, а не декоративный. На главной странице видны 3 последние новости. Для каждой предусмотрена картинка мини-анонса, заголовок, подзаголовок и дата. По умолчанию новости должны идти от самой свежей даты.

• Для карточек помещений добавили и связку с новостями: в админке можно привязывать новости к конкретному зданию. Это добавляет проекту важный слой связности, когда пользователь может не просто посмотреть объект, но и увидеть релевантные обновления по нему.

• Для формы обратной связи заложили валидацию вводимых данных: в имени не должно быть цифр, e-mail должен быть корректным и содержать символ @. После отправки данные уходят на e-mail заказчика и дополнительно в систему Calltouch через подключение скрипта. После успешной отправки форма очищается, а пользователю показывается уведомление.

#9 Микроанимации и поведение интерфейса

• В основном мы добавляли взаимодействия с блоками и элементами на главной странице: анимациях при наведении, интерактивных состояниях карточек и поведении кнопок. Для них была прописана логика hover-состояния: при наведении кнопка немного расширяется вправо, а стрелка меняет цвет. Аналогичный подход предполагается для новостных карточек и блока преимуществ. Это даёь сайту ощущение динамики без перегруза визуальными эффектами.

#10 Front-end реализация и технические требования к верстке

• Сайт был реализован как адаптивный full-width проект. Макеты и рендеры были рассчитаны до Full HD, при этом отдельно учитывалось отображение на больших и сверхшироких экранах: интерфейс должен был сохранять аккуратную композицию, не растягиваться неестественно и визуально оставаться собранным.

• Для сверхшироких экранов предусмотрели дополнительные поля по краям, чтобы сохранить баланс макета. Часть графических элементов была заменена CSS-аналогами, что упростило поддержку интерфейса и снизило зависимость от отдельных изображений.