ПГС — компания в сфере архитектуры, проектирования и строительства. Уже 16 лет команда работает со сложными объектами недвижимости: от жилых комплексов и клубных домов до промышленных и оздоровительных объектов. За плечами компании более 220 реализованных проектов и команда из 150+ специалистов.
ПГС работает с проектом комплексно: занимается предпроектными работами, проектированием, инженерными изысканиями, подготовкой документации, техническим заказчиком и управлением строительством.
В рамках проекта разработали UX-структуру и UI-дизайн корпоративного сайта ПГС.
Провели бенчмаркинг сайтов компаний из сферы строительства, архитектуры и девелопмента. В качестве референсов изучили подходы KPLN, Arch1, Самолёта и ПИК. Проанализировали предыдущую версию сайта, социальные сети, презентации и прочие материалы, чтобы сохранить полезный контент и переосмыслить его под новую архитектуру.
Разработали верхнеуровневые прототипы и согласовали структуру. Каждая страница построена как самостоятельный landing page с последовательным раскрытием информации. Заложили три основных пользовательских сценария:
Главная Знакомство с компанией → экспертиза и ценности → реализованные проекты → дальнейший переход в профильное направление.
Девелопмент Знакомство с направлением → проекты → преимущества → визуальная презентация объектов → контакты.
Проектирование Компетенции → география → услуги → преимущества → реализованные проекты → контакт с компанией.
У ПГС уже был фирменный стиль, поэтому не создавали новую айдентику, а адаптировали существующую систему под digital-среду.
Подготовили мудборд и несколько вариантов дизайн-концепции. Показали разные направления визуальной подачи, чтобы вместе с клиентом определить подходящее настроение, композицию и характер будущего сайта.
В основе дизайн-концепции — фирменный жёлтый, чёрный и белый. Контраст используется для формирования иерархии, выделения CTA и навигационных элементов.
Графическую систему дополнили геометрическими формами, построенным вокруг идеи строительных блоков. Модульность стала не только визуальным приёмом, но и принципом композиции интерфейса.
Добавили систему плавных анимаций и микровзаимодействий. Движение используется для: акцентирования ключевых элементов, раскрытия контента, создания связи между отдельными блоками, усиления визуальной подачи проектов. Эффекты намеренно сделаны сдержанными — поддерживают структуру, а не конкурируют с контентом.
На первом экране сразу обозначили специализацию ПГС, а дальше последовательно раскрыли масштаб компании через показатели, реализованные проекты и принципы работы.
Крупная типографика, контрастные акценты и динамичная подача изображений помогают удерживать внимание и задают ритм страницы.
Страница «Девелопмент» выстроена вокруг ключевого преимущества ПГС: от идеи и инвестиционных решений до строительства и контроля качества. Услуги собраны в последовательный сценарий, а проекты вынесли в отдельный визуальный сценарий с быстрым переходом к деталям.
Визуально страницу поддерживает типографика и акцентная графика, которые разделяют смысловые блоки и упрощают навигацию по большому объёму информации.
Вместо длинного описания компетенций показали масштаб через 220+ проектов, состав команды, географию и конкретный перечень услуг.
Проработана асимметричная композиция, которая создаёт динамику и визуальный баланс за счёт неравномерного распределения элементов.
Одна из задач дизайна — сделать реализованные проекты заметной частью пользовательского сценария.
Для них разработали отдельные визуальные блоки с крупной подачей изображений и минимальным количеством текста. Это позволяет сначала считывать объект визуально, а затем переходить к деталям. Так портфолио работает не как архив работ, а как инструмент демонстрации компетенций ПГС.
Фильтры помогают сегментировать проекты по типу, году и другим характеристикам, сокращая путь от общего каталога к нужному объекту.
Превратили карточку проекта в полноценную презентацию объекта. В первом экране собрали ключевые характеристики: год, локацию, площади и виды работ, чтобы пользователь сразу получил основные факты. Далее раскрыли концепцию и особенности проекта, а крупные изображения работают на визуальную демонстрацию объекта. Внизу страницы оставили переход к следующим проектам и CTA, сохранив непрерывный сценарий просмотра портфолио.
Руководитель проекта 3 ● Менеджер проекта 2 ● Бизнес-аналитик ● Арт-директор ● Ux/Ui-дизайнер 2
Front-end разработчик 3 ● Back-end разработчик 3 ● SEO-специалист
