Тильда выкрученная на максимум? Как мы создали фестивальный сайт для недвижки за 600к, с 3D туром, блэк-джеком и вау-дизайном

Подробно рассказываю про то, как моя команда создавала сайт на Тильде стоимостью 600 тыс. руб. с впечатляющим дизайном, нестандартной структурой, крутыми анимациями и 3D туром по поселку. Показываю внутреннюю кухню и то как мы это смогли сделать в сжатые сроки.

Привет VC, я Артур Ткаченко, основатель и арт-директор веб-студии Alt Design. Мы дизайним бренды и создаем впечатляющие сайты основанные на маркетинговой аналитике. Наши проекты получают награды, а клиенты бизнес-результаты. Очень сильны в недвижке, eCommerce, производстве, сфере услуг. Умеем работать с большим бизнесом и госсектором.

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

История берет свое начало еще в 2021 году. Клиент - довольно крупная в Сочи, производственно-строительная компания "Pegas", которая построила и готовила к продаже поселок таунхаусов.

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

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

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

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

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

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

Если вы не верстальщик и это не ваш хлеб, я думаю выбор в сторону no-code конструктора тут очевиден) Естественно эту мысль мы и стараемся донести нашим клиентам, когда требуется принимать одно из решений.

В данном проекте пришлось принимать решения "Либо-либо" только из-за ограниченного бюджета, но если как следует подшаманить с Тильдой, можно получить довольно интересные результаты, вот ее мы и выбрали.

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

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

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

Понимая будущую структуру сайта, мы запросили у клиента фото и видео материалы, которые будут использоваться на сайте.

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

Получили вот такой результат в десктопной версии:

Не забыли конечно и про мобильную версию, чтобы все наши фишки перенести в маленькое разрешение, пришлось немного похитрить, но у нас получилось. Вот так получилось:

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

Тут задача показать пользователю куда он попал и подвести к нужным нам целевым действиям. В нашем случае это "Выбрать дом" или "Смотреть 3D Тур"

Здесь мы добавили кнопку, которая позволяет переключиться между 2-мя режимами отображения "Днем" и "Ночью", меняя вид поселка в зависимости от выбранного режима.

Здесь мы сделали акцент на локации и сама городе Сочи, показав его узнаваемую достопримечательность "Центральный морской порт". Добились объема, зациклив движение нескольких слоев слайда от движения мыши. При движении мышью фоновое изображение плавно смещается относительно облаков.

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

Тут также мы создали объем и постарались донести ощущение "Птичьего полета", сделав движение облаков зависимым от движения мышью.

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

При наведении на кнопку "Хочу купить" происходит анимация рук, где ключи передаются покупателю.
P.S. это реальные руки специалистов из отдела продаж, сфотографированные для данного слайда)

В процессе работы было принято решение отснять весь поселок с помощью 3Д камер и сверстать полноценный тур. С учетом технических особенностей и ограничений Тильды, нам пришлось сам тур разместить и запустить на отдельном хостинге, а в наш сайт на Тильде интегрировать "трансляцию" тура с другого источника.

Нарисовали элементы интерфейса для управления туром и его перемещением в стиле сайта и вот такой результат получили на выходе.

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

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

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

Также мы создали свои странички описывающие характеристики к каждому из 30-и домой и там же добавили возможность оставить заявку на бронь.

Нашу работу можно посмотреть по ссылке:

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

Сайту уже 3-й год и он до сих пор не теряет актуальность, объект распродан на 95%, а клиент нас уже неоднократно рекомендовал как крутых исполнителей и мы до сих пор поддерживаем теплые отношения со всей командой со стороны клиента.

А как вам результат нашей работы? Напишите свое мнение в комментариях.