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

Мархаба, православные! Ловите новую статью Cedro. Рассказываем, как мы сделали суперартовый сайт под ЦА, которая ценит искусство.

Cedro — международное диджитал-агентство. Создаём цифровые продукты и сервисы для web 3.0, недвижки и e-commerce. Среди клиентов — Сбер, Самолет, Skillbox, GeekBrains, Hochland и завод, который выкупил производство IKEA в России. Ведём телеграм-канал на приколе и развиваем своё реалити-шоу для молодых студий.

Monet — это брокер недвижки в Дубае. Потенциальные клиенты ценят живопись, скульптуру и архитектуру, поэтому в планах компании не только подбирать квартиры, но ещё и наполнять их предметами искусства.

Задача: разработать брендинг, отрисовать дизайн и сверстать всё. Звучит обычно, но есть нюанс: заказчик сразу сказал, что «просто сайт» — не для них. Нужно что-то артовое с отсылкой к импрессионистам, которая уже есть в названии.

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

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

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

Обычно мы параллелим процессы, которые совсем или почти не зависят друг от друга. Например, дизайн и тексты. Тут мы разом взялись за этапы, где один вытекает из другого. Наш графический дизайнер на парт-тайме занимался брендингом, а штатный дизайнер — взялся за концепцию, как только были готовы самые сырые драфты по фирстилю.

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

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

Первый выглядел самостоятельно — там крутая буква О. Чем-то напоминает раму от картины, так что в наш проект вписалась идеально.

Второй шрифт — более простой, поэтому мы дополнили его иконкой — домиком в рамке от картины.

В этом виде иконка в лого клиенту не зашла, поэтому мы стали крутить её ещё. И ещё. И ещё. Делали рамку более реалистичной. Домик — в виде буквы М. И даже отсылались к импрессионизму (это про отражение в воде на последних вариантах).

Monet не понравился ни один из вариантов, но они всё равно попросили нас отрисовать лого целиком. Тут нашего графдизайнера Рому Кузнецова осенило — и он закинул ещё вариант. Букву М (Monet) в букве О (рамке от картины).

И тут мы наконец-то попали. На презентации клиент даже сказал, что чуть не заплакал от красоты. Честно-честно. Прям так и сказал.

Остальные элементы фирстиля всё время были примерно в одном направлении: природные мотивы, отсылки к импрессионизму и музейная эстетика. Фон нагенерили в Midjourney, и вариантов была тонна.

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

Если суммировать, то на этапе с брендингом мы чутка занервничали. Но всё получилось. Возможно, потому что наш графдизайнер Рома и дизайнер Паша всё это время были физически в одном месте — в Батуми (у нас распределённая команда). И могли синхрониться где-нибудь на пляже под холодный кофе.

Интерфейсный

Такой, чтобы удобно было навигировать. Без сложного дизайна, монохромный и с понятными элементами, которые прозрачно доносят смысл.

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

Дружелюбный

С плавными линиями и скруглёнными элементами, чтобы располагать к себе через мягкость и заботу.

Артовый и яркий

Чтобы через искусство максимально выделяться на фоне конкурентов. С яркими контрастными цветами и необычными формами.

Артовый, но в минимализме

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

Подготовили видео для прелоудера.

И придумали, как оформить страницы объектов

Как картины в музее — с карточками в нижнем правом углу. Только вместо имени художника, названия картины и техники — хар-ки объекта.

В процессе какие-то решения из дизайн-концепции пришлось менять. Например, в превью квартиры Monet захотели уместить больше характеристик. Поэтому мы отказались от небольшой плашки в правом нижнем углу и заменили её слайдером.

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

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

Каталог сделали нестандартным

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

И отрисовали множество иконок

Все с опорой на брендинг, поэтому каждую иконку поместили в рамку — такую же, как у логотипа.

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

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

А вот от второй интеграции разрабам до сих пор больно. Что хорошего сказать про сервис — не придумали, поэтому называть его не будем. Но это база недвижки в Эмиратах. Сервис молодой и непуганый. Интеграция по API, но работает только если помолиться. В любой момент могут отвалиться данные, потому что сервис переименовал какие-то сущности у себя на стороне.

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

Круто. С их стороны был отзывчивый ЛПР, который шёл навстречу, позитивно принимал предложение и в хорошем темпе согласовывал промежуточные результаты. Да и в целом было приятно сделать что-то необычное и идейное. Не юиксом единым, нужны и такие проекты, чтобы кто-то просто сказал «вау».