Кому нужен лендинг как у Apple, и как его сделать?

Многие из вас видели классные продуктовые лендинги, где телефон крутится, меняет масштаб, а код страницы не дает заскучать сначала фронтендеру, затем процессору ноутбука. Чтобы сделать такой сайт, нужна задача и сработанная команда.

Готовый сайт Petrovich Brothers

Обычно у нас заказывают сайты другого типа: корпоративный сайт, годовой отчет, или лендинг для сервиса. А там нет никаких физических объектов, показать нечего.

Так бы это все и осталось в планах, но тут звезды сошлись. Сначала мы придумали набор для Амперки, который нравится самим. Это идеальный продукт для такого сайта. Я в отдельной статье написал, как мы его делали. А потом наступил карантин, текущие проекты затормозились, запуск новых отложился на неопределенный срок. Появилась свободная команда. Мы поработали два месяца и сделали промо-сайт Cyber Bug.

А зачем так все сложно?

Или кому нужен лендинг как у Apple, если ты не Apple? Мы начали этот проект для себя, чтобы отработать технологии. В процессе работы я подумал, какому бизнесу это может быть нужно.

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

Если у вас технически сложный продукт, то можно разобрать и собрать его прямо на сайте. Можно показать дизайн лимитированной серии кроссовок или процесс производства. Идеально запускать заранее, назначать дату выхода, и, с помощью маркетинговых инструментов, собирать заявки. Тогда к моменту выхода продукта можно продать всю партию за несколько минут. Начинать лучше заранее, потому что на разработку такого лендинга надо заложить срок от трех месяцев.

Как делали?

Сложность такой работы — в совмещении нескольких технологий. Сценарий, трехмерная графика, анимация, монтаж и сложный фронтенд. И все это умножить на два, потому что десктопная и мобильная версии отличаются очень сильно. Поэтому мы решили, что нужно максимально быстро видеть результат в браузере, чтобы понимать туда мы идем или нет. Не шлифовать все последовательно — сначала модель, материалы, освещение, текстуры, положения анимации, CSS, JS, и тд., а быстро делать все в драфтовом виде и потом дорабатывать.

Первая версия анимации в браузере. От нее до финала еще месяц. Petrovich Brothers

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

А можно подробнее?

Мы сделали черновую модель и анимации в Cinema 4D и потом собрали в After Effects прототип сайта. AE — это программа для видеоэффектов, собирать там сайт непривычно, зато получается не унылый прототип, а классная видео-история.

Прикидываем модель, текстуры и ракурсы Petrovich Brothers

Сначала хотели собрать верстку в Webflow. Но быстро поняли, что такой сайт с кучей графики мы там если и соберем, то точно не настроим так как надо, и перешли на ручную разработку. Было два технически сложных момента — привязка к скроллу и загрузка графики большого размера.

Любая страница сайта выполняется браузером последовательно, сверху вниз. Чтобы при скролле сайт не зависал, если браузер просчитывает сложную графику, обработка сигналов от скролла вынесена в отдельный поток данных. Получалось что анимацию на странице можно было прокрутить до конца слишком быстро.

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

С большим количеством графики помогают справиться прелоадер вначале и мощные настройки тега picture. Пока вы читаете надписи в начале, браузер загружает все анимации. А чтобы не подтягивать в каждом случае изображение большого размера, перед загрузкой браузер проверяет размер экрана и разрешение. И подтягивает оптимизированную графику необходимого размера за счет тега picture, в который обернут стандартный img. А не просто img, как обычно.

В этом примере браузер загрузит big.jpg, только если ширина окна браузера больше 800 пикселей. Если меньше, то small.jpg.

Пока готовили каркас сайта, нужно было подготовить чистовую графику. Тут обнаружился существенный минус стартап-подхода к работе. Мы прорабатывали модель жука и материалы в одном файле синемы, а анимация была разбита на несколько файлов. То есть, после проработки нужно было все материалы, освещение и текстуры перенести в десять разных файлов. Конечно же, мы несколько раз забывали перенести какой-то материал или источник освещения и приходилось считать заново. Один чистовой кадр с тенями и хорошим освещением на ноутбуке рендерился около 10 минут, всего на сайте около 1000 кадров. То есть вся анимация на одном компе считалась бы около недели, с учетом настройки.

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

Когда мы разобрались с графикой и подготовили чистовые секвенции начали разбираться с версткой. Чтобы верстать было удобно мы, конечно, перенесли экраны из AE в Figma. Но на первом варианте сайта увидели проблемы с адаптивностью, пришлось вернуться в Webflow, сверстать там экраны, проверить адаптивность и уже в виде кода отдать программисту.

На работу с этим проектом мы потратили месяц плотной работы команды из трех человек, это 480 человеко-часов. Неплохо для своего проекта.

Над лендингом работали:

Концепция: Артем Петрович

3Д и анимация: Арсений Петрович

Программирование: Евгений Зозуля

0
37 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Да можно гиф посмотреть в этой статье. 

Ответить
Развернуть ветку
Shoo

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

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Пока грузится можно гифку к статье посмотреть )

Ответить
Развернуть ветку
Алексей Андрианов
собрали в After Effects прототип сайта

боже

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Сами офигели, но это реально удобнее чем в фигме

Ответить
Развернуть ветку
Artyom Petrovich
Автор

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

Ответить
Развернуть ветку
Avramov Max

Выглядит классно! Но я предпочту сайты попроще.

При плохом соединении он будет тормозить, да.

При хорошем соединении, 88.95 Mbps через кабель, на десктопе сайт загружается за 21-22 секунды в Chrome, Opera и Яндекс Браузере. А при плохом соединении можно сразу закрывать вкладку.

Ответить
Развернуть ветку
Artyom Petrovich
Автор

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

Ответить
Развернуть ветку
Арсений

У меня с теле2 на улице грузится около 40 секунд. Можно уменьшить объем графики раза в 3-4, если использовать видео формат вместо секвенций, надо тестировать

Ответить
Развернуть ветку
Михаил Русланович

Получилось клево) Я иногда решаю примерно похожие задачи, и вместо рендер фермы могу порекомендовать обычные облачные VPS, по-типу Яндекс Облака или Immers Cloud. Пользуюсь и тем, и тем. На Immers.Cloud выходит 40 рублей за час работы "облачного компа" с двумя 2080ti на борту (анимацию считаю октаном, статику арнольдом), причем не важно — рендерит он или нет. Главное накатить при первом посещении нужный тебе софт.

А вот про то, что не соберете на Webflow — странно. Уверен, вы сами видели пару-тройков обзоров на youtube-канале самого Webflow, где они по шагам воспроизводят весь пайплайн перевода из c4d в ae, откуда при помощи bodymovin экспортят в json и при помощи lottie-анимации в самом Webflow расставляют ключи. На других каналах люди прям пошагово воспроизводят этот лендос с наушниками apple на том же webflow. Респект тридешнику за перлин-нойз-бамп на усиках резистора — внимательная работа)

Ответить
Развернуть ветку
Арсений

Михаил, а можно оплачивать только использованное время? У меня скрипты запущены в Яндекс облаке, плачу помесячно

Ответить
Развернуть ветку
Михаил Русланович

Да, я плачу за время работы машины. Причем конфиг можно собрать без ограничений. Я с Яндекс Облака слез, когда мне нужен был GPU-рендеринг, у них были теслы, но надо было сразу 10-15к закинуть на счет, чтобы тебе дали на нее квоту. Нашел иммерс клауд. У мейлру облака такая же история: тоже теслы, тоже квота на нее by default=0, чтобы увеличить, закинь сразу серьезную сумму, которую не знаешь, отобъешь ли сейчас или нет. У иммерс можно собрать сетап хоть на 4xV100 и заплатить за час. Нет квот на сборку, главное чтобы на счету было время на час работы такого сетапа. Поэтому оплата и списание почасовое, да.

Ответить
Развернуть ветку
Михаил Русланович

А почему физикл юзаете, а не более продвинутые Octane/Arnold/Redshift? Месячная подписка на любой вышеперечисленный движок в районе 50$ в месяц, зато удобство и качество картинки x5 в сравнении с физиклом.

Ответить
Развернуть ветку
Арсений

Вышел новый октан под Амд, но все равно надо какие-то новые карты покупать. Как они с макбуками будут работать пока неясно. 
Интересно, можно работать на удаленных серверах с графическим интерфейсом? У меня в Яндекс облаке Линукс, ssh, командная строка - сурово все)

Ответить
Развернуть ветку
Михаил Русланович

Жесть) Не, я просто через удаленный рабочий стол конекчусь к windows server и вижу обычную винду. Туда ставлю все, что мне надо (это делается один раз и потом у них остается просто твой том с оплатой 2 рубля за гиг в месяц) и работаю как в обычной винде, только она не у меня на столе, а где-то, и в ней нужное мне железо. Когда отрендерил и перенес себе секвенции, просто отключаешься и том сохраняется у них. Потом просто используешь этот том для любой новой виртуальной машины с любым новым конфигом. Если у вас маки, то да, октан не для вас, но вы можете отлично работать с Arnold (который изначально CPU и отлично работает на маке) и точно так же собирать сетап там, просто не под видеокарту, а под процессор. Из коробки доступно до 96 vcpu.

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Мак перестал nvidia поддерживать, а они же все на ней работают. Так то конечно. 

Ответить
Развернуть ветку
Artyom Petrovich
Автор

То есть просто покупаешь облачный комп и настраиваешь его как хочешь? Интересно, надо попробовать.
Так как делали мы все на mac book pro, все материалы были под стандартный физикал рендер в синеме, 2080ti нам бы тут не помог, надо тогда под октан было переделывать, но это другой комп нужен. У фермы анимарендер оказалось прям плагин под синему есть чтоб им отправлять, очень удобно.

Я видел множество роликов про связку c4d/ae/bodymovin/webflow. Но там когда доходит до деталей начинаются ньюансы типа скорости, дергания и тд. Может и можно было сделать если до конца разобраться, это сэкономило бы время на правки.

Ответить
Развернуть ветку
Михаил Русланович

Я юзал анимурендер, но когда используешь их сервис, ты платишь не столько за время работы железа, сколько за их лицензии на целую плеяду софта, которую не используешь, но которая у них закуплена. Поэтому VPS всегда будут дешевле, чем рендер фермы. Для меня важна экономия в этом моменте, ибо рендерю много анимации.

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Большое спасибо за подсказку с облачными компами. Попробовали яндекс, там теслу дают по запросу. Но драйверов нет в стандарте и интерфейс создания несколько замороченный.
Иммерс при более колхозном дизайне оказался удобнее по UI, не надо запрашивать квоту на карту и на винде уже есть драйвера карты и хром (о боже! :).
Теперь вот редшифт изучаю.

Ответить
Развернуть ветку
IO

Это ужасный лэндинг и не надо так делать никогда.

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Почему?

Ответить
Развернуть ветку
IO

Выбирайте ответ по вкусу:

а) Он грузится вечность
б) Он грузит печатные машинки-ультрабуки
в) Браузеры всегда по разному реагируют на такие лэндинги, иногда пропадают фреймы, иногда вылетают вкладки и т.д.
г) Это очень медленная подача информации

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

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Ну первые три пункта частично решаемы и весьма субъективны на мой взгляд.
А насчет подачи информации обсудить интересно, она же просто другая и по другому подается. Как еще показать процесс сборки? Видео на ютюбе еще дольше, ролик Амперки по сборке идет 10 минут и не такой наглядный. Если бы это был клиентский лендинг то краткую спецификацию мы бы сделали конечно в конце.
Мне самому интересно было бы посмотреть на продажи с такого лендинга и с какого-то другого.

Судя по метрике народ досматривает до конца, отказов минимум.

Ответить
Развернуть ветку
Арсений

Ну все же не вечность) по моим тестам от 4-7 секунд на гигабитном канале до 40 секунд на lte tele2. 

Когда-то и картинки в вебе были редкостью. А ещё раньше игры влезали на дискету 1.4 мб)

Ответить
Развернуть ветку
Yurii

Текст, 3 минуты ожидания, потом жук который улетает просто нахуй в космос и потом он вообще ни разу не появился, я даже кэш почистил.

Охуенно, очень понравилось, так виртуозно обосраться ещё уметь надо, лайк однозначно.

Ответить
Развернуть ветку
Artyom Petrovich
Автор

А на чем смотрите и какой браузер? Там бывает что ломается что-то, но что именно мы так и не нашли. 

Ответить
Развернуть ветку
Artem Markovsky

В редимаге есть новый инструмент Shots, который позволяет загружать видос, а потом управлять кейфреймами через скролл или движение мыши
https://readymag.com/readymag/newsletter/shots/
Думаю, так было бы быстрее

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Ого как редимаг развился! Лет пять на него не заходил.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Понимаю. Это сейчас первым стоит в списке. Расквитаемся с клиентскими проектами и подумаем над оптимизацией. В принципе есть мысли как все сделать чтоб грузилось быстро.

Ответить
Развернуть ветку
Алексей Гараев

За picture спасибо, а сам сайт ничего необычного, не проще было svg сделать? 

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Эээ, такую графику в svg???

Можете примерно техпроцесс описать как такую графику делать в свг? 

Ответить
Развернуть ветку
Алексей Гараев

Сделать интерактивную анимацию объявленную в самом svg документе, при этом содержимое чтобы было доступно для внешнего Java Script, чтобы в дальнейшем можно было получить динамический контент, который будет кэшироваться отдельно от страницы. Примерно так я это вижу.
Так сайт прикольный получился у вас. 

Ответить
Развернуть ветку
Artyom Petrovich
Автор

Насколько я знаю SVG это векторная графика. А у нас тут везде растр, блики, текстуры и тд. 

Ну ок, например мы все упростили чтобы можно было рисовать в векторах, убрали отражения, и тд. На рендере из трехмерки мы получили растр который надо перевести в вектор и так каждый кадр. Это не рабочая схема.

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

Вот он: https://sketchfab.com/3d-models/bug-199e4a1ec2be46a48351e6a95ead7085

Ответить
Развернуть ветку
Алексей Гараев

Интересный плагин. Спасибо👍

Ответить
Развернуть ветку
34 комментария
Раскрывать всегда