Концепт сайта для бренда украшений — STL Lab
Кольца показаны 3D-моделями и сменяются по прокрутке, а каталог на 87 изделий открывается тут же.
Запись прокрутки сайта от первого экрана до подвала, 0:46. Вживую сайт отвечает на прокрутку и курсор — откройте живую версию.
Что это за сайт
Сайт бренда параметрических украшений: формы рассчитаны алгоритмами и напечатаны на 3D-принтере в металле. Главная устроена как одна непрерывная 3D-сцена, которая по прокрутке ведёт от ленты колец на первом экране к пяти моделям, материалам и каталогу. Каталог на 87 изделий фильтруется по типу и материалу, у каждого изделия своя страница с размерами и ценой, а покупка оформляется письмом.
Оформление
Светло-серый фон, чёрный сверхжирный гротеск в заголовках, рядом — курсивная антиква и кобальтовый синий акцент. Подписи набраны моноширинным шрифтом. Главные изображения — 3D-кольца из полированного металла, предметные фото появляются в карточках изделий, а в середине страницы сцена темнеет.
Кому подойдёт такой подход
- Ювелирные бренды и авторские украшения
- Предметный дизайн: посуда, свет, аксессуары
- Небольшие магазины, где форму вещи важно рассмотреть вблизи
Что внутри
Лента колец на первом экране
Через весь экран по диагонали идёт лента из 3D-колец с синей прядью анодированного титана, поверх неё — крупный заголовок и кнопка «Смотреть изделия».
Переход сквозь надпись
Фон темнеет, камера уходит вглубь сцены, а строка «Стать вещью» растёт, пока её светлые буквы не заполнят экран и не откроют галерею.
Галерея из пяти 3D-колец
Прокрутка или перетаскивание по очереди выводят пять форм, а нажатие на кольцо открывает карточку с фотографией, ценой, размерами и ссылкой на страницу изделия.
Четыре материала
Названия металлов — сталь, титан, бронза и сплав — по одному летят на зрителя и рассыпаются на буквы, рядом коротко сказано про цвета анодирования.
Физика колец и каталог
Перед входом в каталог кольца падают в кучу: курсор их толкает, клик разбрасывает. Сам каталог фильтруется по типу и материалу и сортируется по цене.
