Y · Y Gallery
Тёмная авторская галерея: 1 600 работ и 106 видео в собственном доме, пять ветвей вместо меню, квадратная лупа для мазка и страницы соавторов как отдельные входы.
Личная галерея художника с 16-летней практикой: около 1 600 работ, 106 видео и десять соавторов переехали с чужого конструктора в собственный дом. Роль студии: концепция, арт-дирекшн, структура, UX/UI, вёрстка и вся моторика взаимодействий.
Видео-прогулка по экранам: вход, главы-дисциплины, магазин и хранилище.
- Клиент
- Художник: цифровая живопись, фотография, видео-арт, NFT — 16 лет практики
- Объём
- ≈1 600 изображений, 106 видео, 10 приглашённых авторов
- Что было
- Портфолио на чужом конструкторе: плоский список галерей, чужой домен в путях
- Проблема
- Клик по проекту открывал не проект, а увеличенную картинку
- Задача
- Собственный дом для работ, ощущение галереи, сцена соавторам, мост в NFT
- Метрика успеха
- Время на странице, глубина просмотра, переходы «арт → коллекция»
Работы жили на чужом хостинге в виде ленты. Проект и одиночный кадр выглядели одинаково, имена соавторов были подписями, а не входными точками, NFT-часть существовала отдельно от искусства. Визуально — светлый нейтральный шаблон, одинаковый для тысяч других портфолио: ноль узнаваемости у автора с уникальным позиционированием.
Цели- 01Собственный дом для работ с полным контролем над файлами
- 02Ощущение галереи, а не ленты: работа должна дышать
- 03Внятная сцена для десяти коллабораторов
- 04Мост между арт-разделами и NFT-коллекциями
- 05Узнаваемый визуальный язык, который нельзя спутать с шаблоном
- 06Структура, где новая коллекция — это данные, а не новая вёрстка
Ограничения — не оправдание, а аргумент: они объясняют, почему решение выглядит именно так.
- Материал крайне разнородный: тонкая графика рядом с тёмным кино, глянцем и глитчем.
- ≈1 600 изображений и 106 видео — страница обязана оставаться лёгкой на мобильном.
- Часть работ принципиально без названий — лайтбокс должен работать без подписи.
- Десять соавторов с разным объёмом материала — нужен один масштабируемый шаблон.
- Мобильный трафик доминирует: проектируем от 390 px, десктоп — расширение.
- Проект будет расти: данные отделены от вёрстки.
«Neon Botany»: рука рисует стебель, машина поджигает его. Сайт устроен как живой организм — из одного тёмного корня растут пять ветвей: NFT, фотография, видео-арт, digital art и mixed media. Ботанические линии связывают залы, неон появляется только там, где есть интерактив.
Первый экран: одна работа и живая лоза
Тёмный вход с одной работой
- Задача
- За три секунды передать уровень автора.
- Ограничение
- Разнородная палитра работ: любой цветной фон спорит хотя бы с половиной архива.
- Решение
- Почти пустая тёмная сцена, крупный титул, одна акцентная работа, живая лоза и бегущая строка «At the Intersection of Physical and Imaginary». Тёмная база — физика зала: стены гасят свет, чтобы светилась работа.
- Эффект
- Отсутствие выбора на первом экране снимает когнитивную нагрузку: человек не сканирует меню, он входит.
Ветви разделов: превью и метаданные при наведении
Пять ветвей вместо меню
- Задача
- Показать пять направлений, которые нельзя выстроить в иерархию.
- Ограничение
- Обычное меню уравнивает разделы и ничего не рассказывает о содержимом.
- Решение
- Список ветвей с живым превью справа: наведение подсвечивает строку, меняет изображение и HUD-метаданные раздела.
- Эффект
- Содержимое зала видно до перехода — меньше слепых кликов, больше глубина просмотра.
Страница автора: медленное проявление блоков
Медленные появления, 1000–2400 мс
- Задача
- Задать ритм галереи, а не ленты соцсети.
- Ограничение
- Быстрые анимации-аттракционы разгоняют скролл и обесценивают работу.
- Решение
- Элементы проявляются медленно, при попадании в зону видимости, с разными задержками — RoomReveal.
- Эффект
- Скорость анимации задаёт скорость восприятия: взгляд физически задерживается на работе.
Лайтбокс: чёрный фон и лупа по фрагменту
Полноэкранный лайтбокс с квадратной лупой
- Задача
- Показать проработку мазка — то, что обосновывает цену.
- Ограничение
- На превью фактура не читается, часть работ вообще без названий.
- Решение
- Просмотр на чёрном во весь экран плюс квадратная лупа с увеличением фрагмента. Подпись рендерится только если она есть.
- Эффект
- Покупатель сам находит доказательство качества — возражение снимается до того, как прозвучит.
Страница проекта: концепция, серия, бэкстейдж
Проект как проект, а не как картинка
- Задача
- Перестать терять историю за одной обложкой.
- Ограничение
- Раньше клик по проекту открывал просто увеличенное фото.
- Решение
- Отдельные страницы проектов: концепция, полная серия, бэкстейдж-видео, хлебные крошки и переходы в соседние крылья.
- Эффект
- Вместо одного клика — сессия. История продаёт работу дороже, чем изображение.
Страница соавтора: био, работы, связи
Страницы коллабораторов
- Задача
- Превратить имена соавторов во входы, а не в подписи.
- Ограничение
- У десяти авторов очень разный объём материала — от четырёх работ до сорока.
- Решение
- Единый масштабируемый шаблон: био, работы, блок «другие проекты с …» с точечными ссылками, без дублей и тупиков.
- Эффект
- Десять дополнительных входов на сайт и десять поводов поделиться ссылкой — трафик без бюджета.
Бэкстейдж: видео в потоке страницы
Бэкстейдж-видео с ленивым запуском
- Задача
- Оживить залы движением, не убив мобильную загрузку.
- Ограничение
- 106 клипов, которые нельзя грузить одновременно.
- Решение
- Клип стартует без звука при попадании в кадр, ставится на паузу при уходе, звук — по кнопке; одновременно играет ровно один клип на странице.
- Эффект
- Движение есть, мобильный трафик цел, страница не проседает по весу.
Адаптив: 390–1920, одна и та же комната
Та же комната на любом экране
- Задача
- Сохранить ощущение зала на 390 px.
- Ограничение
- Мобильный трафик у арт-аудитории доминирует.
- Решение
- Проектирование от 390 px: та же композиция в колонку, лупа по касанию, тяжёлые эффекты отключаются при prefers-reduced-motion.
- Эффект
- Мобильный визит доходит до работы и до коллекции так же, как десктопный.
- ×Не делали светлую тему: она требует ретуши под каждый раздел и снижает восприятие цены.
- ×Не оставляли ботанику декором — линии работают как навигация.
- ×Не грузили видео разом и не включали автозвук.
- ×Не строили меню из пяти равных пунктов — залы не равнозначны по материалу.
- ×Не разводили искусство и NFT по разным сайтам.
- ×Не зашивали коллекции в вёрстку — только в данные.
#07090c
Тёмный корень
#111a22
Индиго-стена
#4ade80
Неоновый стебель
#f472b6
Розовая вспышка
#e8e4dd
Музейный свет
- Дисплей
- Antiqua / высокая антиква
- Служебное
- Monospace caps
- Текст
- Grotesque sans
- Акценты
- Italic antiqua
- Собственный дом для 1 600 работ и 106 видео без зависимости от чужой платформы
- Проект стал историей: концепция, серия и бэкстейдж вместо одной картинки
- Десять страниц соавторов — десять каналов трафика без рекламного бюджета
- Лупа и чёрный лайтбокс снимают главное возражение покупателя
- Мост «арт → коллекция» монетизирует уже прогретого зрителя
- Новая коллекция или автор добавляются одной записью в данных
Проект живёт в сети — можно посмотреть вживую
Смотреть сайт ↗