YENNI
Усі проєкти

02 / 05

FRESH SALT

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

Колекція, розказана в семи сценах, — занурення від поверхні до 11 000 метрів.

Відкрити сайт наживо
Fig. 01Головний екран — FRESH SALT на поверхні

Питання

Чи можна показати колекцію як глибину, а не як каталог?

Ідея

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

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

Жодної звичайної прокрутки: сім повноекранних сцен зсуваються горизонтально й вертикально, шкала глибини йде від 0 до 11 000 м, а п’ять пальт постають процедурними 3D-скульптурами — без фотографій і моделей.

01

П’ять образів, п’ять глибин

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

Fig. 03Образ I — Surface Coat
Fig. 04Образ II — Thermocline Gown
Fig. 05Образ III — Brine Cape
Fig. 06Образ IV — Trench Column
Fig. 07Образ V — Abyss Dress

02

Під великий палець

На телефоні сцени стають вертикальними й перемикаються свайпом. Типографіка та елементи керування зберігають свій порядок — колекція читається так само.

Fig. 08Мобільна версія — образ II
Fig. 09Мобільна версія — образ IV
Fig. 10Мобільна версія — фінал

03

Безодня

Остання сцена завершує занурення на 11 000 метрах — заявою колекції та шляхом назад, на поверхню.

Fig. 11Фінал — Abyss, 11 000 м

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

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

Взаємодія

  1. 01Сцени змінюються прокруткою, свайпом, стрілками, Page Up/Down, Home і End
  2. 02Наведення чи дотик до конструкцій за образом відкриває нотатки про тканину й посадку
  3. 03Полегшений режим рендерингу для повільніших пристроїв

Технології

  • HTML
  • CSS
  • JavaScript
  • Three.js
  • Single file
Відкрити сайт наживо
Усі проєкти
Наступний проєкт — 03 / 05MONOLITHАрхітектура · 3D-вебдосвід← Попередній: TIVER

1 / 1