Дизайн сайта
Harmony Group
О проекте
Harmony Group — застройщик элитной недвижимости в Таиланде. Общая концепция их проектов — строительство качественных, комфортных кондоминиумов для жизни и инвестиций. На текущий момент у застройщика 6 реализованных проектов на территории острова Пхукет.
Вся работа заняла 59 часов в рамках 2 недель. Обеспечить подобную скорость работы позволил максимально конкретный запрос от клиента, подробный брифинг и быстрая обратная связь. После передачи макетов в разработку правки были минимальные.
Задачи

  • Сборка дизайн-системы для эффективной работы над дизайном сайта и последующими обновлениями
  • Полный редизайн сайта с особым вниманием к структуре, навигации и «‎воздуху»‎ в композиции. Одно из пожеланий — сохранить минималистичный стиль и сделать акцент на крупные фотографии экстерьеров и интерьеров.
Объем работ
Навигация
Меню навигации выполнено в минималистичном стиле, обеспечивая чистоту интерфейса. Оно включает разделы, такие как «О компании», «Проекты», «Доходность», что удобно для пользователей, ищущих информацию по конкретным категориям.
Выпадающее меню для выбора проектов добавляет интерактивности, позволяя пользователю быстро ознакомиться с доступными проектами (например, Bamboo Forest, Essence и другие) и увидеть срок сдачи, цены на разные типы кондоминиумов, перейти на страницу проекта или сразу к выбору апартамента.
Динамические баннеры
Смена баннеров на главном экране позволяет пользователям с первого взгляда увидеть актуальные жилые комплексы, такие как Essence, Harmony, и Bamboo Forest, с краткой информацией о каждом проекте и кнопкой для перехода к выбору апартаментов. В этом блоке мы показываем только те комплексы, в которых еще можно приобрести апартаменты.
Смена баннеров предоставляет пользователю возможность выбора конкретного проекта без необходимости прокрутки или навигации в глубину сайта. Это облегчает пользовательский путь, предлагая сразу несколько вариантов на одном экране, что помогает улучшить пользовательский опыт.
Выборщик
Визуальный выборщик с наглядным изображением корпусов позволяет пользователю ориентироваться на проект с трехмерной визуализацией. Это очень удобно, особенно для потенциальных инвесторов и покупателей, которым важно иметь полное представление о расположении объектов и их окружении.

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

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

Цена апартамента выделена крупным шрифтом и может быть отображена в двух валютах — доллары и баты, что также удобно для покупателей из-за границы. Дополнительно имеется кнопка с текстом «Hot Deal», чтобы обозначить: на апартамент действует специальная цена — скидки часто стимулируют к действию.

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

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

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

  • Упрощает переключение между зонами;
  • Позволяет быстро получить представление о структуре интерьера.
  • Такой подход снижает когнитивную нагрузку и повышает вовлечённость — пользователь не теряется в длинной прокрутке и не перегружается текстовой информацией.
Выбор типа квартиры:

  • В правом верхнем углу — выпадающий список с выбором типа апартамента (например, «Дуплекс»). Это решение, позволяет переключаться между различными вариантами в рамках одной визуальной среды.
  • Выпадающий список не занимает лишнего пространства и не нагружает интерфейс.
Пользовательский сценарий. Интерфейс построен вокруг ключевого действия — начать 3D-тур. Это делается по кнопке, доступной и интуитивной. Пользователь может:

  • Сначала быстро «осмотреться» с помощью превью;
  • Затем включить полноценную интерактивную экскурсию, что особенно эффективно в премиальном сегменте недвижимости.
Умный дом
Интерактивные маркеры (hover/tooltip):

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

  • Позволяет переключаться между комнатами (спальня, гостиная и т. д.), сохраняя единый сценарий взаимодействия.
  • Чёткая логика: один экран — одна зона + набор функций.
Карта
Цель карты — показать:

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

Переключатели фильтров (слева):

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

  • Маркеры на карте единообразные, но иконки внутри — разные, что поддерживает визуальную дифференциацию.
  • Центральная иконка здания указывает на локацию самого комплекса, создавая точку отсчёта.

Hover-интеракции и раскрытие информации:

  • При наведении на объект (пример — пляж Карон), появляется:
  • подпись-уточнение на карте (tooltip),
  • и правая карточка с фото и описанием, что даёт визуальное и содержательное раскрытие.

Это делает карту живой и интерактивной, вызывает эмоциональное вовлечение: пользователь «видит» пляж, бар, школу и т. п., а не просто точку. Подчёркивает преимущества локации — ведь недвижимость продаётся не только квадратными метрами, но и окружением.
Интерьеры
Цель экрана продемонстрировать интерьерные решения различных типов апартаментов (студии, 1-спальные и пр.) и позволить пользователю визуально сравнить планировки и стили, сформировать эмоциональную привязанность к продукту.

Главный слайдер (карточки с интерьерами):

  • Центральный кадр крупный, фокусируется на текущей планировке. Это позволяет передать детали: освещение, отделку, зонирование.
  • Название типа квартиры и её площадь вынесены в нижний левый угол. Крупный, лаконичный текст — легко читается.
  • Соседние слайды частично видны — это важный UX-приём, стимулирующий пользователя перелистывать («подсмотрел — захотел увидеть больше»).
Навигация:

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

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

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

Блок с преимуществами — сильный визуальный и маркетинговый инструмент:

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

Выбор параметров:

  • Два выпадающих списка: «Проект» и «Тип апартамента» — минимально необходимый набор данных, чтобы построить индивидуальный расчёт.
  • Простой интерфейс — без перегрузки деталями, идеально для первого касания с продуктом.
  • Подсказка под расчётом («Выплачиваем владельцу 70%…») добавляет прозрачности.
Крупное отображение суммы дохода (385 000 ฿):

  • Выделено визуально, сразу привлекает внимание;
  • Использован приём «один главный вывод = одна цифра», что соответствует ожиданиям инвестора;
  • Валюта (бат) и годовая перспектива — уточнены, но не перегружены.

Калькулятор помогает не просто рассчитать доход, но связать недвижимость с финансовой выгодой и доверием. Это важный инструмент для инвесторов, особенно когда он усилен лид-формой.
Заключение
При разработке сайта для Harmony Group я стремилась передать эстетику премиальной недвижимости через спокойный, чистый и уверенный визуальный язык. Основной задачей было не просто показать объекты, а создать ощущение доверия, прозрачности и эмоционального вовлечения — как для инвесторов, так и для будущих жителей.

Проект построен на архитектуре сценариев, где каждый экран — это часть пути пользователя: от первого знакомства до конкретного выбора апартаментов. Интерактивные элементы (карта, 3D-тур, визуальный выбор этажей, фильтры и калькулятор дохода) работают на вовлечение и принятие решения, а не просто на информирование.
В дизайне я сознательно использовала минимализм, крупную типографику и эмоциональные фотографии: они позволяют продукту «дышать» и фокусироваться на главном — архитектуре, интерьере, преимуществах локации и доходности.

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

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

8 (906) 814-47-55

sivkovanika@gmail.com