Консервативный и дерзкий — как мы помогли дочке ПИК заявить о себе
Parametr вышли на рынок коммерческой недвижимости с нестандартным предложением. Мы помогли им сформулировать концепт и сделали запоминающийся и практичный сайт, который вызвал восторг у лидеров креативной индустрии — взял приз ADCR Awards 2024 за визуальное мастерство.
Кто мы
Мы — Vide Infra, занимаемся дизайном и разработкой диджитал-продуктов, которые регулярно собирают награды. Делаем бесподобные мобильные и веб-приложения, маркетплейсы и большие корпоративные сайты. Входим в топ-10 Рейтинга Рунета по креативности и топ-40 мирового рейтинга Awwwards. О наших проектах и новостях, читайте на videinfra.ru
Клиент и задача
Parametr — новая компания в структуре ПИК, крупнейшего девелопера России. Она строит помещения для бизнеса разных масштабов.
У Parametr новый для рынка подход, они предлагают кастомные решения. Клиенты могут внутри одной территории располагать помещения разных форматов: производство, логистический центр, офисы, склады и шоу-румы. У традиционных девелоперов коммерческой недвижимости такого нет. Обычно они специализируются на каком-то одном формате и не очень-то умеют адаптироваться под клиента.
Parametr искали, как объяснить свой подход, чтобы выделиться, но не распугать строгих клиентов. Нам нужно было сделать сайт, который решает сразу три задачи:
- Производит впечатление надежного партнера.
- Объясняет нестандартное предложение.
- Ведет клиентов к сделке.
Месседж и контент
Вот у Parametr есть крутое и необычное предложение — как о нем рассказать? Мы четко знали, что делать. Начали с того, что помогли структурировать сообщение по правилам сторителлинга. Получился контент для главной — хребет, на котором держится весь сайт.
- Выстраивание доверия. Parametr — молодой бренд. Нужно было показать клиентам, что он стоит на плечах гигантов, опирается на опыт и ресурсы ПИК. Показали цифрами и фактами.
- Презентация продукта. Объясняем, что Parametr предлагает не просто полки на складе, а комплексные решения: форматы Big box, Light Industrial, Built-to-suit. Знакомим с тем, что это такое.
- Демонстрация конкретных проектов. Даем представление о масштабах компании и локациях. Где находится помещение — ключевой вопрос для клиентов Parametr.
- Ценности. Раскрываем смысл бренда: Parametr — это параметры эффективности.
- Решения под разные запросы. Клиенты узнают себя и видят, что их понимают.
Концепция дизайна
Parametr пришли с готовым брендом. Бренд не скучный, с характером: грубые рубленые формы, брутализм, строгость. Нам он понравился. Из брендбука взяли логотип, цвета, шрифты и фирменные скосы. Все это доработали и дополнили элементами, которых не хватало.
Чтобы синхронизироваться с Parametr, мы полностью проработали дизайн главной. По стилю попадание было стопроцентное. Выдержали его во всех деталях — от взвешенной композиции до специально сделанных иконок. Нам удалось найти цельное решение, которое вызывает нужные ассоциации: основательная компания с отличным управлением и масштабными проектами, но при этом энергичная, новаторская, технологичная.
Работа над дизайном
Следующий большой этап — поиск баланса между консервативностью и новаторством. С одной стороны, хотелось сделать поразительный сайт, реализовать весь потенциал яркого бренда Parametr. С другой, учесть потребности и ожидания их клиентов, чтобы сайт был понятен и удобен.
Композиция
Было: Много смелых решений: нестандартное расположение элементов, тексты во всю ширину страницы, вертикальные тексты.
Стало: Сделали более привычную пользователям приглаженную сетку. Убрали некоторые вызывающе крупные элементы, например гигантские кавычки. Выбрали классические решения слайдеров. Но много всего сохранили: разорванную по разным сторонам страницы нумерацию, контраст крупных и мелких элементов и другие детали. Получился тот же суровый индустриальный стиль, но более понятный.
Заголовок
Было: Использовали для фона характерную форму буквы R из логотипа.
Стало: R убрали — используем ее в других разделах сайта. Крупное лого оставили. В таком размере оно выглядит фундаментально и задает тон всему сайту. Анимировали его как бегущую строку — выглядит необычно и сразу запоминается.
Анимация
Было: Взяли из брендбука сетку, построенную по золотому сечению. Обыграли ее с помощью динамичных карточек, которые под курсором перестраиваются, как пятнашки.
Стало: Оставили только сдержанную анимацию, которая не перетягивает на себя внимание. Сохранили нестандартные решения, которые задают плавный ритм продвижения по сайту, например выезжающие из-за блоков цифры.
Визуальный контент
Было: Мы предлагали сделать на WebGL объемную модель склада в разрезе, которая реагирует на движение мыши. Был бы очень эффектный постер.
Стало: Используем крупный красочный визуал, который перебивает бело-серую палитру главной. Выглядит вдохновляюще — чтобы клиенты грезили о своем будущем бизнесе. Вместе с тем все вполне информативно. По просьбе Parametr добавили возможность менять все изображения через админку сайта. Обычно мы так не делаем, но им удобнее, а нам несложно.
Первый вариант был дерзким и трендовым — в духе конкурсных сайтов. Выкрутили индивидуальность на максимум — каждая деталь была про Parametr. Но выходило слишком радикально для бизнес-среды. Конечный вариант более понятный, причесанный и упорядоченный. Стало меньше брутализма и больше воздуха. Получилось очень эффектно, точно и удобно.
Работа над функционалом
Главный вопрос клиентов Parametr — где? Локация критически важна для коммерческого помещения. Тем более, если производство, склад и офисы находятся в одном месте.
Мы постарались, чтобы ответ был максимально наглядным. Сделали отдельную страницу для каждого проекта (сейчас это три парка) и насытили их визуалом: видео, эпичными рендерами и фото. Клиенты могут и оценить логистику, и вдохновиться масштабом. А главное — придумали очень удобный выборщик.
Интерфейс выборщика
Выборщик помогает ориентироваться среди проектов и форматов. Сценарий у него, как у выборщиков жилых квартир (мы на таких собаку съели):
- Пользователь настраивает параметры для фильтра.
- Выбирает из вариантов подходящий.
- Получает подробности о конкретном помещении.
- Связывается с менеджером.
Мы нашли классное решение, чтобы локация всегда была на виду: совместили на одном экране карту и таблицу с характеристиками помещений. Точка на карте и объект в списке связаны ховер-анимацией — сразу понятно, что где находится.
В мобильной версии выборщик напоминает навигатор — так не надо привыкать к интерфейсу.
Parametr хотели максимально сухой, прагматичный и информативный выборщик. Мы этого добились, не пожертвовав эстетикой. Маленькие кнопки и поля ввода на контрасте с крупными формами добавляют сайту мягкости.
Бэк выборщика
У нас есть готовый бандл, который мы обычно используем для подобных выборщиков. Но у Parametr ситуация отличалась от сайтов жилой недвижимости, с которыми мы чаще работаем:
- На сайте представлены сразу несколько проектов, а помещения разделены по форматам — это два новых уровня фильтрации. Их можно было добавить в стандартный выборщик, но это точно замедлило бы его. И мы не были уверены в том, какие ошибки это может вызвать.
- Импорт данных о проектах и помещениях тоже устроен не так, как обычно — мы подстраивались под то, как они хранятся у Parametr.
Поэтому мы взяли и переписали выборщик с нуля — чтобы быть уверенными, что он надежно работает.
Что получилось
Мы очень довольны сайтом. Он понятный и убедительный для корпоративных клиентов, отвечает их ожиданиям. Но дерзкий характер бренда сильно выделяется на фоне безликих сайтов коммерческой недвижимости. Parametr точно запомнится — и это не только наше мнение. Сайт получил приз ADCR AWARDS 2024 за визуальное мастерство от Клуба Арт-директоров России. Это ценное подтверждение того, к каким высоким результатам приводит наш креативный подход.
Подпишитесь на нас, чтобы не пропустить новые детальные разборы кейсов, обсуждения трендов индустрии и взрывных идей. Также следите за нами в Telegram-канале и на сайте Vide Infra.
На связи!
Отличная работа! Выглядит солидно и интересно
Спасибо!
Понимаю про поиск оптимального решения, но местами первые варианты дизайна — вообще бомба!
Неплохая работа. Мне нравится, когда компании обращаются за помощью, за новым свежим взглядом и рефрешем. На днях такой кейс видел про одночленный сайт Звука, тоже глаз порадовался
Спасибо!
Ого купленные отзывы)))