УСІ КЕЙСИ2025
ЛЕНДІНГ SAAS-ПРОДУКТУPRODUCT LANDINGMOTIONDARK UI

REFLECT

Лендінг застосунку для нотаток: інтерфейс показано в русі просто під заголовком

КЛІЄНТ
Reflect — застосунок для нотаток
ТЕРМІН
4 тижні
РІК
2025
ПОСЛУГИ
Дизайн-концепція · Motion-дизайн · Frontend · Оптимізація
[ 01 ]ЗАВДАННЯ

З чим прийшов клієнт

Reflect продає те, чого не видно на скриншоті: звʼязки між нотатками. Цінність «другого мозку» — не в окремому екрані, а в тому, як записи чіпляються один за одного. Статична картинка тут не працює: вона показує текстовий редактор, яких сотні.

Друга складність — щільність продукту. Швидкість, граф зворотних посилань, застосунок для iOS, наскрізне шифрування, календар, публікація, AI на GPT-4 і Whisper. Перерахувати все на першому екрані означає не сказати нічого.

[ 02 ]РІШЕННЯ

Що зробила студія

Перший екран показує продукт у роботі. Під заголовком «Think better with Reflect» одразу грає зациклене відео інтерфейсу на пʼять секунд: нотатка пишеться, зворотні посилання підхоплюються, граф добудовується сам. Пояснювати вже не треба — видно.

Решта сторінки розкладає щільність на ритм: вісім коротких блоків можливостей, окремі секції під AI, граф звʼязків, збереження з браузера й Kindle, зустрічі з календарем. Темна майже чорна палітра прибирає все зайве, лишаючи на екрані тільки інтерфейс і одну кнопку дії.

[ 03 ]СКЛАД РОБІТ

З чого склався результат

01

Продукт замість обіцянки

Замість ілюстрації — записаний інтерфейс. Відео без звуку, автопрогравання, коротка петля: користувач бачить реальний сценарій роботи, не запускаючи застосунок.

02

Темна сцена під інтерфейс

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

03

Щільність, розкладена на ритм

Вісім можливостей подано короткими картками, а складне — AI, граф, інтеграції — винесено в окремі секції з власною демонстрацією.

04

Вага першого екрана

Відео замість важкого JavaScript: петля вантажиться разом із постером і не блокує показ заголовка.

[ 04 ]ІНТЕРФЕЙС · DESKTOP / MOBILE
DESKTOP · 1440ЖИВИЙ ІНТЕРФЕЙС, А НЕ КАРТИНКА
MOBILE-FIRST · 390
[ 05 ]РЕЗУЛЬТАТ
5 с
петля відео інтерфейсу замість статичного скриншота
E2EE
наскрізне шифрування — окремий блок довіри
GPT-4
AI-асистент на GPT-4 і Whisper у власній секції
СТЕК:Next.jsTypeScriptMotionWebM videoTailwind CSS

Потрібен схожий результат для вашого бізнесу?

Розберемо ваше завдання так само, як цей кейс: структура, візуальний напрям і кошторис — за один день.