Задача
Сайти галерей зазвичай однакові: біла сторінка, тонкий шрифт і сітка квадратних мініатюр, у якій картина виглядає як товар у магазині. Я хотів показати сайт, який памʼятаєш після одного візиту, де виставка відчувається як місце. Це зразковий проєкт: галерея, будівля, митці й роботи вигадані. Роботи згенеровані кодом, у кожного митця свої правила, а голос аудіогіду синтезований.
Роль
Концепт, арт-дирекція, дизайн, розробка, 3D, аудіогід
Що зроблено
- Концепт від будівлі: галерея живе в закинутій трансформаторній підстанції. Виставка — це коридор підстанції, зали й роботи пронумеровані як поля розподільчого щита, а карта сайту у футері намальована як схема підстанції.
- 3D-коридор на головній: скрол — це крок. Лічильник показує поле й пройдені метри, величезний номер поля позначає кожен новий розділ, а клік по роботі «вирощує» її зі стіни у власну сторінку.
- Сторінки робіт з аудіогідом німецькою й англійською: картина наближається до деталі, про яку говорить голос, поточний рядок тексту підсвічується, а лінія поруч показує людину 175 см у тому самому масштабі.
- Демо квитків із часовими слотами й заповненістю, архів десяти виставок у вигляді графіка навантаження й лампочка «відчинено», що йде за справжнім часом у Німеччині.
- Арт-дирекція до коду: чесний розбір кліше сайтів галерей, мудборд із двома палітрами й трьома парами шрифтів, три сміливі перші екрани на вибір. Німецька й англійська, читається з «Зменшити рух» (коридор стає списком), перевірено в Safari і на уповільненому телефоні.
Результат
Демо працює: пройдіться коридором самі й послухайте аудіогід до «Lastgang 07». Так само музей, галерея чи шоурум можуть показати себе на власному сайті.
Інструменти
Astro, Three.js, View Transitions · Cloudflare Workers · ElevenLabs (voice) · Fira Sans Extra Condensed, IBM Plex