YENNI
Усі проєкти

01 / 05

TIVER

Категорія
Масажна студія · Сайт
Мова сайту
Українська
Статус
Незалежний концептуальний проєкт

Ясний, спокійний сайт масажної студії: послуги, ціни й запис в одній зрозумілій структурі.

Відкрити сайт наживо
Fig. 01Головний екран — композиція малюється під час завантаження

Питання

Як мало потрібно сайту студії, щоб він відчувався завершеним?

Задача

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

Візуальна мова

Крем, еспресо й оливка; тонкий логотип. Сайт створено з використанням SVG-графіки — свічка, камені, арки, орбіти — та інших намальованих елементів інтерфейсу. Заокруглені панелі м’яко стають на місце, коли з’являються на екрані.

Fig. 03Філософія — третій етап послідовності, «Відновлення»

01

Одна думка на екран

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

02

Ціни без тертя

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

Fig. 04Послуги й ціни — повний список
Fig. 05Відкрита послуга: тривалість, ціна й кнопка запису

03

Той самий порядок на телефоні

На мобільному структура не змінюється, лише складається в колонку: послуги, простір і запис ідуть у тій самій послідовності, що й на десктопі.

Fig. 06Мобільна версія — філософія
Fig. 07Мобільна версія — послуги й ціни
Fig. 08Мобільна версія — простір

04

Простір намальований, а не сфотографований

Кімната, матеріали й деталі складені з SVG-форм у заокруглених панелях — цілісна візуальна система без стокових фото.

Fig. 09Простір — SVG-композиції в заокруглених панелях
Fig. 10Простір — матеріали й деталі сіткою панелей
Fig. 11Про студію — принципи в трьох коротких мітках

05

Підпис наприкінці

Логотип у футері прокреслюється прокруткою — тихе завершення, що повторює тонку лінію знака.

Fig. 12Логотип у футері, прокреслений прокруткою

Деталі дизайну

  1. 01Акцидентна антиква з курсивом поруч зі спокійним гротеском
  2. 02SVG-система бренду: логотип, арки, орбіти, складки
  3. 03М’які заокруглені панелі, що плавно масштабуються під час прокрутки

Взаємодія

  1. 01Вибір послуги відкриває форму запису вже з нею
  2. 02Форма запису з валідацією, що чесно працює як демо
  3. 03Повний доступ із клавіатури та підтримка зменшення руху

Технології

  • React 18
  • Tailwind CSS
  • Framer Motion
  • Vite
  • SVG
Відкрити сайт наживо
Усі проєкти
Наступний проєкт — 02 / 05FRESH SALTМода · Редакційний досвід← Попередній: NŌCTIL

1 / 1