С чего все начиналось?

Имеем лимитированную серию дорогих телефонов Верту. Общее количество моделей - 16 штук, в каждой линейке выпущено только по 20 телефонов. Цель и задача - показать отличительные особенности производства телефонов, чем отличаются модели после тюнинга от классических, демонстрация технологии производства и особенностей конечного продукта. Для достижения целей презентуем телефоны на мероприятия, которое проводим в видовом ресторане Мансарда (Ginza project). Для он-лайн презентации создаем промосайт тюнинг-лаборатории.

Задача не из простых. Как показать все отличительные особенности модели быстро? Мы решили ее не стандартными способами, а предложили свое уникальное решение, которое по факту внедрения сработало очень хорошо, но об этом ниже. Что именно мы сделали? Мы предложили вариант с использованием анимации, построенной на горизонтальных и вертикальных спрайтах. Т.е. при листании ресурса мы стали показывать поворот моделей в динамике. Но как этого добиться с сохранением межплатформенности и быстрой загрузки ресурса? Флеш-технологии будут отображаться не везде, GIF-анимация - плохого качество, видео - большое по объему...

Подробности о решении

Спрайты, спрайты, спрайты. Много спрайтов. Вариант, основанный на них. Вот то, о чем мы говорим:

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

Листаем ниже, плавно поворачивается телефон:

И на следующем шаге и мы видим финальный спрайт, боковую часть телефона с указанием на детали, на которые стоит обратить внимание:

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

Листает дальше? Продолжим - фотогалерея телефонов после тюнинга: 

Видео от Андрея Соловьева,одного из ведущих экспертов рынка мобильных устройств, который выступал непосредственно на презентации тюнинг-лаборатории и рассказал всем гостям мероприятия об особенностях и преимуществах телефонов, полностью выполненных из карбона:

По факту проведения оффлайн презентации, дополняем промосайт информацией о нем:

Целевое действие - обращение в компанию. Ставим последним, сначала знакомимся с моделью, потом обращаемся за заказом:

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

Проблемы?

Да, были. Было много. Во-первых, оптимизация и адаптация. Спрайты оказались зависимы от высоты элементов. Пришлось разработать небольшой фреймворк для листания, анимации. В качестве основы - jQuery + система плагинов, чтобы он стал пополняемым. Получилось так:

И на выходе - адаптивная версия:

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

Итоги

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

Перейти на сайт