Концепт сайта для бренда механических клавиатур — IO Custom 68
Клавиатура собрана в 3D и по прокрутке разбирается на слои, показывает свитч изнутри и меняет расцветку.
Запись прокрутки сайта от первого экрана до подвала, 0:58. Вживую сайт отвечает на прокрутку и курсор — откройте живую версию.
Что это за сайт
Одностраничный сайт одной модели — алюминиевой клавиатуры на 68 клавиш. Вся страница построена вокруг 3D-модели: в десяти главах прокрутка по очереди показывает сборку, свитч, раскладку, кейкапы, строение корпуса, расцветки и звук. Кнопка «Купить» с ценой видна с первого экрана, а финал сводит характеристики, комплект и ссылки на магазины, где продаются обе расцветки.
Оформление
Тёмная гамма: почти чёрный фон с шестиугольной сеткой, светлый текст и голубой цвет каркасной модели. Заголовки и характеристики набраны моноширинным шрифтом прописными, кнопки — гротеском. Вместо фотографий — 3D-модель клавиатуры, которая рисуется прямо в браузере.
Кому подойдёт такой подход
- Бренды электроники и компьютерной периферии
- Производители техники, которую важно показать изнутри
- Запуск одной флагманской модели с продажей через маркетплейсы
Что внутри
Первый экран с 3D-клавиатурой
Модель проступает из голубого каркаса и на глазах становится металлом и пластиком, рядом — заголовок, короткие характеристики и кнопка с ценой.
Сборка по слоям
Клавиатура расходится на пять слоёв — от низа корпуса до кейкапов, а список рядом подсвечивает каждый отделившийся слой и называет его материал.
Свитч крупным планом
Одна клавиша поднимается из корпуса, свитч под ней разбирается на детали, а счётчик хода меняется вместе с прокруткой и показывает точку срабатывания.
Раскладка и кейкапы
Группы клавиш по очереди загораются на виде сверху, затем кадр делится пополам: слева каркас модели, справа те же кейкапы в материале.
Расцветки и покупка
Корпус перекрашивается из тёмного в светло-серебристый прямо в кадре, а последний экран собирает характеристики, комплект и ссылки на магазины.
