Математическая разработка и визитки из металла: как мы создавали дизайн для магазина премиальных часов

Привет! Это Chipsa. Хотим рассказать о том, как мы делали сайт для магазина люксовых часов и премиальных украшений Rotormine. Казалось бы, задача тривиальная, но мы подошли к ней со всей душой и массой креативных идей, превращая привычные измерительные системы в изометрические интерактивные объекты. Так, как умеем и любим.

Это магазин дорогих наручных часов, ювелирных изделий и аксессуаров. И когда мы говорим «дорогих», то имеем в виду «ВАЩЕ ЖЕСТЬ КАКИХ ДОРОГИХ». Например, там можно купить часы Vacheron Constantin Traditionnelle за 50 миллионов, Patek Philippe за 35, а на сдачу захватить, скажем, браслет Van Cleef & Arpels за 3. Ну, вы поняли.

Хотелось подчеркнуть не только премиальность, но и создать вау-эффект у пользователя. С таким запросом к нам и пришёл клиент, имея на руках лишь старый сайт. В процессе, конечно же, многое изменилось – так бывает, когда заказчик готов на эксперименты и не сильно привязан к бюджету.

Еще больше наших работ и экспериментов можно найти в телеграм-канале студии. Подписывайтесь, мы там рассказываем много интересного.

Клиент уже был знаком с нашими работами и знал, что мы умеем в 3D, поэтому хотел видеть трёхмерную графику. Но так как сайт предполагал в первую очередь продажу товаров и 3D отвлекало бы покупателя, решили использовать «псевдо3D», сделанное с помощью изометрии.

Начали с простого, перерисовывая разные виды наручных часов. В итоге пришли к более абстрактным формам, напоминающим прямоугольные советские циферблаты. Это помогло воплотить в дизайне узнаваемый образ и сохранить за ним элегантность, соответствующую бренду.

При создании ключевого визуала вдохновлялись тематикой, которая так или иначе связана с измерительной системой: звёздное небо, пражские куранты, парад планет и лунный календарь. Каждый из этих элементов стал интерактивным – планеты движутся, ротор внутри часов крутится, секундная стрелка бежит с неумолимой скоростью.

Во время работы над дизайн-концепцией заказчик захотел обособить раздел с продажей ювелирных изделий и аксессуаров, поэтому для него тоже предстояло придумать свой визуал. Чтобы он перекликался с «часовым», прыгнули к звёздам и построили его на красивых и минималистичных абстракциях, которые повторяют очертания продаваемого товара. В общем, занялись астрономией и открыли новое созвездие с бриллиантом в центре (наверняка на несколько сотен каратов).

А ещё фон некоторых блоков – звёздное небо. Клиент сказал, что он похож на крышу «Роллс-Ройса» и будет знаком людям, готовым к роскоши.

Таким образом мы подчеркнули главные тезисы компании и представили «дороговизну» в нетипичном свете, а одна концепция фактически объединила в себе два сайта. У нас получилось две главных страницы: для часов и для украшений.

Клиент хотел, чтобы мы задействовали тяжёлые механики, но, как уже писали, сложный визуал для сайта, цель которого – продавать, не подходит. Так что искали баланс между базовым функционалом и визуалом.

Ещё было не очень понятно, как реализовывать звёзды и подвижность объектов, учитывая, что они должны иметь параллакс-эффект при движении мыши и анимации, завязанные на скролле. В итоге отказались от HTML-элементов и решили рисовать на «Канвасе», чтобы использовать математику и избежать проблем с производительностью.

Пожалуй, главная фишка – это часы, у которых движутся внутренние механизмы и секундная стрелка. Для их создания пришлось работать с радианами, а не привычными градусами, потому что на «Канвасе» повороты ведут себя по-другому. Из-за «резиновых» значений не получалось разместить шестерёнки примерно в одном положении. Решение оказалось на удивление простым – нужно было отдалить их центр от края внутреннего круга на радиус одной шестерёнки.

В процессе тестировщик заметил, что секундная стрелка описывает круг не за 60 секунд, а за 48. Это не баг как таковой, ведь идеальная минута в сделку не входила, но мы всё же подкрутили значения, чтобы время настоящее и время на виртуальных часах совпадало.

«Канвас» с украшениями оказался сложнее. Если присмотреться, можно увидеть, что все линии связаны с углами бриллианта и точками на внутреннем круге. Получается много треугольников, но если часть линий статична, то часть, связанная с вершинами, анимируется вместе с бриллиантом.

Из-за этого пришлось выписывать координаты вершин у линий бриллианта и рисовать между ними дополнительные линии на круге. Чтобы они смещались при движении мыши и обладали анимацией парения, в координаты линий добавили смещение параллакса и самих анимаций.

Но и с анимацией парения возникла загвоздка – её нельзя взять и задать как в CSS, поэтому пришлось передать формулы для координат X и Y. Вот, например, как выглядел X по формуле cos(angle) * (x - centerX) - sin(angle) * (y - centerY) * center, где:

Забавно, что заказчику не понравились прямые линии, он захотел канаты, которые как будто бы провисают бы под силой гравитации. С этим сложностей не возникло.

При рисовании «Канваса» солнечной системы помогла математика и вычисление координат точки на эллипсе, который должен был наклоняться при движении мыши – в итоге планеты двигались по орбите. Хотелось сделать, чтобы они не просто двигались с одной скоростью, а проходили полный круг так же, как его проходят настоящие планеты: Меркурий за 88 суток, Венера за 225, Земля за 365, Марс за 687, Юпитер за 4331. Мы замедляли их относительно друг друга, пытаясь высчитать парад планет, но ничего и не получилось. Возможно, пока что.

На основе дизайна сайта мы разработали визитки. Для придания визуальной роскоши использовали тиснение золотом и прорезание изделия по фигурному контуру. Это улучшает тактильные ощущения, делая визитку более запоминающейся, и позволяет интересно играть с пространством и слоями.

С тиснением всё понятно – оно создаёт ассоциации с высоким качеством и престижем. Обычно с помощью такого метода подчёркивают логотип, название или другие ключевые моменты. А ещё мы сделали специальный чехол для визитки, он тоже добавляет статусности.

Первоначальная идея заключалась в том, что это не будет визиткой в классическом понимании, а, скорее, металлической табличкой с выгравированными линиями и изометрией, которые используются на сайте. Выглядело бы дорого-богато – под стать самому бренду. Без иронии. Это бы точно произвело вау-эффект и рука бы не поднялась подобную «визитку» выбросить или убрать к другим. Но в итоге остановились на бумажном варианте.

Мы захотели представить интернет-магазин не таким, каким его привыкли видеть люди, и не забыть об удобстве использования. Для этого создали оригинальные ключевые визуалы для каждого раздела, которые встречают пользователя перед изучением товарных позиций и лаконично дополняют тот или иной экран сайта декоративными элементами. И у нас получилось.

Хотя история на этом не заканчивается. После запуска мы добавили огромное количество новых фич и добавляем их до сих пор. Возможно, через год сайт Rotormine будет выглядеть совсем по-другому. Но всё так же круто.

Мы активно ведем телеграм-канал, куда ждем не менее активных гостей. Приходите, пообщаемся на тему креативного дизайна и разработки.

Команда проекта:

Дизайн – Артем Передков, Марина Куклина

Арт-дирекшен – Александр Педченко

Фронтенд – Роман Баранов

Бэкенд – Александр Готфрид

Менеджмент – Никита Грузиненко