Ova — бренд очков премиум-класса
Темный, кинематографичный одностраничный сайт для концептуального бренда очков: сцены с фиксированной прокруткой, коллекция из четырёх цветов и шрифт с эффектом перспективы, разработанный на заказ.
Задача
Ova — это концептуальный бренд очков премиум-класса: прозрачный кобальтовый ацетат, шарниры из полированной стали и линзы медового оттенка. Целевая страница должна была выглядеть так же дорого, как и сам продукт — минималистично, в тёмных тонах, при этом каждый экран должен был работать как страница в модном лукбуке — и при этом продавать: демонстрировать оправу, коллекцию и вести к списку ожидания.
Идея
Страница построена на контрасте: глубокий чёрный, один яркий кобальтово-синий и крупный белый шрифт. Каждый экран — это отдельная сцена, которая привязана к области просмотра и меняется при прокрутке, поэтому страница воспринимается скорее как короткометражный фильм, чем как длинная прокрутка. Цвет используется сдержанно и всегда имеет своё обоснование: синий, оранжевый, белый и зелёный — это четыре цвета коллекции.
Первый экран
Портрет, занимающий половину экрана: вертикально расположенный слоган бренда, выполненный в стиле кастомного шрифта, и две кнопки. Страница открывается с уже отображённой фотографией; затем на лице появляются очки, на фоне разливается мягкое голубое сияние, и каждые несколько секунд по изображению пробегает короткий глюк.
Дизайн
Оправа поворачивается перед вами по мере прокрутки: спереди, в три четверти, в профиль, а за ней огромным шрифтом выделяется слово «кобальт». Затем камера переходит к деталям — пятишарнирному соединению и стальному сердечнику дужки — с медленным эффектом параллакса внутри каждого изображения.
Коллекция
Четыре оправы в четырёх цветах на боковой рейке. Каждый шаг меняет фон всего экрана: синий, оранжевый, белый, зелёный. Нажатие на карточку открывает всплывающее окно с полным описанием товара, характеристиками с пиктограммами, размерами и ценой.
Настроение
Слоган «Wear your light» выполнен перспективным шрифтом. Строки появляются по одной по мере прокрутки и меняют цвет в соответствии с четырьмя цветами коллекции, а оправа располагается поверх текста.
История
История одной оправы — от верстака до коробки и магазина — рассказывается на горизонтальной полосе, прокручиваемой по вертикали. Меню следует за вами и выделяет раздел, в котором вы находитесь.
Список ожидания
Последний экран объединяет форму и нижний колонтитул: выберите цвет, оставьте адрес электронной почты, а под ним расположится полный нижний колонтитул со ссылками. Портрет с первого экрана завершает страницу.
Мобильная версия
На телефоне каждый экран сохраняет свою композицию: нажатие на иконку «бургер» открывает полноэкранное меню, коллекция помещается на одном экране даже на iPhone SE, а шрифт масштабируется в соответствии с высотой экрана.
Результат
Премиальный одностраничный сайт бренда, где продукт остаётся главным героем: один акцентный цвет на каждом экране, крупный шрифт и анимация, которая демонстрирует композицию, а не просто украшает страницу.
