Кейс / 06

Лендинг ретриту

Клієнтка прийшла з дошкою в Pinterest, десятьма фото й планувальним документом, який сам собі суперечив. Першим результатом стала не сторінка, а бриф.

retreat · Sri Lanka

РольЗведення брифу, система текстів, дизайн-система, розробка, артдирекція, цикл рецензій

ПеріодЖивий, але не запущений · у процесі правок

HTML
CSS
Vanilla JS
Figma
Vercel

Задача

Не було брифу, з якого будувати.

Йога-студія продавала девʼятиденний ретрит і потребувала сторінки, яка витримає ціну. Прийшло інше: дошка в Pinterest, десять референс-фото, бриф у чаті й довгий планувальний документ, що суперечив сам собі у двох місцях.

Будувати просто з цього означало б випустити суперечності разом із дизайном. Тому першим зробили не сторінку.

Система

Одне джерело для слів, одна сторінка для системи.

Технологія навмисно проста — рукописний HTML, один стилевий файл, двадцять сім рядків JavaScript, без збірки й без бекенду, — щоб зусилля пішли туди, де клієнт їх справді побачить.

Канонічний файл текстів

Кожен рядок на сайті зводиться до одного документа, тож є одне місце, з яким можна сперечатися.
Поки його писали, спливли дві суперечності, яких клієнтка не помічала: у вартість обіцяно харчування двічі на день, а розклад містив три прийоми; текст казав, що вілла за кілька хвилин від океану.
Обидві повернулися до неї як питання, а не як тиха правка, разом із вісьмома відкритими пунктами, у кожного з яких є робочий запасний варіант.

Дизайн-система з власною сторінкою

Одинадцять кольорових токенів, дві гарнітури Garamond, спіраль із ледь тремтячою лінією, щоб читалась накресленою від руки, і плівкове зерно поверх усього.
Усе це виведено на внутрішню сторінку, щоб нетехнічна клієнтка рецензувала систему, а не лише макет.
Правила названі там, де їх можна порушити: золото декоративне й заборонене для дрібного тексту на кремовому.

Згенеровані кадри, названі своїм імʼям

Фотографій місця не було, тож кадри згенерували за письмовими промптами, які лежать у репозиторії чотирма версійними хендофами.
Два кадри забракували, і з цього народилося письмове правило: жодного крупного плану шкіри, людина лише здалеку й силуетом.
Дванадцять кадрів поїхали в продакшн на 1,5 МБ, і кожен скрізь називається згенерованим замінником.

Продакшн-сценарії

Як клієнт без ТЗ отримує ТЗ.

Цінність тут у циклі, а не в розмітці. Кожен крок перетворює розмите на те, на що клієнт може відповісти.

01Розсипані джерела → один документРозбіжності спливають рано, поки вони ще дешеві.

Звести дошку, фото, чат і планувальний документ в один канонічний файл текстів.
Прив'язати кожен рядок сторінки до нього, щоб на сайті не лишилося тексту без джерела.
Повернути суперечності як питання, а невідоме припаркувати поруч із запасним варіантом, щоб сторінка могла вийти, поки чекаємо відповідей.

02Палітра → система, яку можна рецензуватиКлієнт затверджує правила, а не один вдалий скриншот.

Назвати одинадцять токенів, дві гарнітури й міри верстки та вказати, де кожне можна й не можна вживати.
Опублікувати систему на окремій сторінці поруч із референсами, які обґрунтували кожне рішення.
Дати клієнтці реагувати на систему, щоб наступні сторінки лишалися цілісними без ще одного раунду.

03Пʼять правок → один документКлієнтка може відповідати номерами, а не текстом.

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

Інтерактивне превʼю

Система, а не сторінка.

Це відтворення внутрішньої сторінки рецензії: одинадцять токенів, типографічна шкала й стек поверхонь у власній палітрі проєкту.

Панель рецензії дизайн-системи

Оберіть токен, щоб побачити його роль і обмеження, а тоді перемкніть поверхню й переконайтесь, що «глина» — це стек із шести шарів, а не пласка заливка.

Справжні токени й шкала · зерно плівки як на сайтіТокени й значення шкали — ті самі, що в стилевому файлі. Саме це клієнтка рецензує, перш ніж затвердити будь-який макет.

Що зроблено

Маленький навмисно, задокументований усе одно.

Це сторінка девʼятиденної події, а не платформа. Цифри показують, куди пішли зусилля, і проєкт досі в роботі.

рядків власного коду: 1 385; 802 з них — стилевий файл
збірка / залежності / бекенд: 0 / 0 / 0; Ламатися нема чому
кольорових токенів / гарнітур: 11 / 2; Виведено на сторінку рецензії
суперечності, знайдені в брифі: 2; Повернуто як питання
згенерованих кадрів у роботі / відхилено: 12 / 2; З відмов народилося письмове правило

Що це доводить