Іміджевий сайт для забудовника
Індустрія:
Real Estate, Construction
Клієнт:
Міжнародний забудовник Teus Group
Мета
Іміджевий сайт
Рік реалізації:
2025
Передумови
Ми познайомились з клієнтом за кілька місяців до початку робіт. Тоді на етапі відбору підрядників ми дуже свідомо і відповідально підійшли до опрацювання детального тз замовника, що і стало головною причиною прийняття рішення на нашу користь
Початковим запитом клієнта була послідовна реалізація двох незалежних проєктів: власне, стриманого корпоративного сайту компанії забудовника та спокусливого іміджевого лендінгу готельного комплексу на Балі, будівництво якого клієнт завершує. Проєкти були непов’язаними між собою, а терміни (як це буває часто) підтискали. Тому під кожен вебсайт була залучена окрема команда дизайну/розробки.
Ключові задачі
сайт під ключ
Послуги:
UX/UI design, Webflow Development
Іструменти і технології:
Figma, Photosop, Webflow, Javascript, GSAP, Splide, Lenis, jQuery
Задача
Розробка корпаративного сайту та іміджевого лендінгу готельного комплексу на Балі в рамках одного сайту на 4 різних мовах
- Багатосторінковий корпоративний сайт зі стриманим інтерактивом та розширеною маркетинговою функціональністю: CMS для новин зі зручною фільтрацією та динамічним каталогом об’єктів нерухомості на продаж.
- Захоплюючий іміджевий лендінг під промо преміального готельного комплексу. Повітряний, оригінальний і насичений сучасною анімацією.
- Забезпечення функціональності збору, обробки та передачі даних в CRM-систему клієнта
- Локалізація на 3 додаткові мови з можливістю локалізації зображень, url та автовизначенням версії в залежності від мови браузера користувача
- Повнофункціональний Cookie Consent (GDPR Compliance)
- Підключення аналітичних систем та налаштування подій для основних рекламних і аналітичних майданчиків.
- Адаптація під широкоформатні монітори, планшети та мобільні пристрої
- Кросбраузерне та кросдевайсне тестування
Етап №1
UX, структура, wireframe
Ми завжди розпочинаємо роботу з цих базових етапів. Замовник надав текстовий контент для головної сторінки і ми почали роботу над wireframe, паралельно опрацьовуючи загальну структуру всього проєкту
В студії ми завжди робимо деталізовані варферйми, щоб замовник мав змогу побачити максимально наближений до фінального результату прототип і зрозуміти чи всі сенси, які він хотів донести до користувачів враховані


Wireframe для головної сторінки
Етап №2
Дизайн концепція
Клієнт мав вже працюючу дизайн систему і візуальну айдентику. Тож нам було необхідно слідувати тим правилам, що були створені. але намагатись внести якісь цікаві рішення
На базі варфрейму та референсів ми розробили дві дизайн-концепції і презентували клієнту. Клієнт обрав ту, що на темному фоні і ми почали процес огранки макету до ідеального стану


Дві запропоновані концепції
Етап №3
Дизайн всього сайту
Затверджена концепція в процесі роботи отримувала невеликі зміни, але з часом весь макет був завершений, разом зі всіма необхідними складовими: меню для планшету і мобілки, 404 сторінка, попапи, OG image, favicon, webclip тощо. Також були опрацьовані різні стани для всіх інтерактивних елементів











Етап №4
Дизайн окремого лендінгу для новобудови
Цей проєкт мав мати захоплюючий дизайн. Повітряний, оригінальний і насичений сучасною анімацією. Ми робили його у кілька ітерацій. Спершу був промальований концептуальний дизайн. На цьому етапі дизайнер мав повну свободу дій.
Перша несподіванка:
У клієнта з’явилась несподівана потреба запустити проєкт лендінгу в продакшн в підтримку власної маркетингової кампанії в рамках міжнародної презентації. На все про все у нас було 4 дні:
- Створити повноцінний дизайн за концептом
- Адаптувати або згенерувати тимчасові рендери
- Заверстати лендінг довжиною майже 30к пікселів
- Підключити збір даних в CRM-систему
- “Посадити” на хостинг і підключити домен
Тиждень був насиченим. Звісно, ми і клієнт усвідомлювали, що це - тимчасове рішення. Проте, ми встигли і клієнт зміг отримати з лендінгу вже реальну користь. Ми були задоволені, адже працюємо в першу чергу для цього.

Частина макету головної сторінки
Етап №5
Архітектура проєкту
Розробку ми розпочали з ретельного проєктування архітектури корпоративного вебсайту. Визначили стек технологій для реалізації функціональних модулів та обрали методологію найменування класів. Створили вичерпний style guide, який містив усі службові класи для заголовків, текстових блоків, кнопок та зображень. Базові та вторинні кольори були імплементовані через CSS-змінні, а тип верстки визначено як гумовий із мобільною адаптацією.
В той же час:
Був затверджений дизайн-концепт лендінгу готельного комплексу. Він вийшов дійсно нестандартним, повітряним і надихаючим. І абсолютно несхожим на корпоративний вебсайт забудовника. Так і мало бути.

Робоча область проєкту
Продовження робіт
Роботи рухались в плановому руслі.
Корпоративний вебсайт був на завершальній стадії. Ми вже здали верстку з адаптивами. Тривала робота над функціональними модулями:
— міжнародний формат введення номерів з автовизначенням країни користувача за ip
— валідація даних / перевірка на валідність даних інпутів / ui інвалідних станів
— генерація та обробка додаткових параметрів
— інтеграція з CRM
— локалізація
— налаштування аналітики
— впровадження Cookie Consent
Друга несподіванка:
Клієнтом було прийняте рішення об’єднати корпоративний вебсайт та лендінг готельного комплексу в єдиному проєкті. Насправді, задача дуже нетривіальна, якщо лейаути категорично різні, а підтримуватись мають з однієї адмінки. Плюс перебування на єдиному домені все ж таки зобов’язує нас дотримуватись до певної міри консистентності. В іншому випадку, така неузгодженість буде сприйматись не як фіча, а як баг.
Проте, ми любимо нестандартні задачі і взялися за цю одразу і з натхненням. Нам довелось:
- Внести зміни в дизайн базових компонентів корпоративного вебсайту і лендінгу (header, footer, language panel, мобільне меню, модальні вікна та форми) з метою часткового узгодження їх між собою
- При цьому ми відчували потребу все ж таки до певної міри унікалізації цих компонентів, тому для лендінгу використовували трошки змінені варіанти компонентів. При цьому, всі зміни, що впроваджувались в ці компоненти на корпоративному вебсайті, автоматично імплементувались і на лендінгу.
- Вся функціональність корпоративного вебсайту також була інтегрована на лендінг
- Лейаути, брейкпоінти та стилі були також рамково узгоджені
- Всі бібліотеки для анімації на лендінгу підключались окремо для сторінки, щоб не впливати на загальний перформанс вебсайту
Мотивація
Майстер-клас з мотивації
Для корпоративного вебсайту і лендінгу були різні терміни здачі. Але вони, зважаючи на організовані процеси і к-сть робіт, були досить стислими. А вимоги до якості - на найвищому рівні. Тому клієнт гарантував команді ящик найкращого пива за чітке дотримання дати релізу.
В результаті ми забрали 2 ящика пива з пошти. Незважаючи на багато складнощів, сумісно з клієнтом ми виконали всі задачі своєчасно. наразі зберігаємо дружні теплі стосунки і тішимось безкомпромісним задоволенням клієнта від проєкта і співпраці