НЕ типичный современный сайт: motion design и 3D в дизайне сайта

Motion Design и 3D в дизайне сайта - популярные технологии, которые приковывают внимание человека и делают ресурс узнаваемым среди аналогичных. Суть этих двух технологий:

• 3D - создание объемного изображения с высокой детализацией и реалистичностью.
• Motion Design - создание “оживленной” картинки, путем реализации анимации с компьютерной графикой.

Представленные технологии дают возможность превратить стандартные иконки или инфографику в объемные и подвижные элементы сайта.

Рост популярности представленных технологий обусловлен рядом следующих особенностей:

• Уникальная подача контента.

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

• Структурирование информации.

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

Возможности моушн и 3D позволяют: разбавить и разделить текст на смысловые блоки; соединить нескольких форматов подачи информации; создать уникальное оформление сайта.

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

• Эффект параллакс при скроллинге.

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

• Абстрактные и графические композиции - в качестве фона для каждой страницы сайта.

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

• Усовершенствование скроллинга и перемещения курсора.

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

• Оцифровка любого продукта.

3D и Моушн позволяют презентовать свой товар/продукт, но так, чтобы он был максимально реалистичным, а не мультипликационным. Объемность и ряд других приемов дают возможность повторить все уникальные особенности предмета, обеспечив комплексную и полноценную детализацию.

Яркий пример уже реализованного нами решения - анимация для сайта MedEX. 3D и Motion Design планеты подстраивается непосредственно от действий пользователя - клика мышки и при наведении курсора. При простоте и лаконичности анимации эффект перемещения - сложный и многоэтапный. Мы сохранили фирменный стиль компании, ориентируясь при этом на последние тренды - футуристические элементы, округлые формы, чистота и простота.

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

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

С точки зрения коммерции технологии 3D и Motion, - одинаково эффективны в performance и awareness-digital. Доступные пользователям возможности подходят как для создания положительного имиджа, так и для достижения краткосрочных целей - продажи услуг/товаров. Представленные подходы в оформлении позволяют решать такие маркетинговые задачи, как:

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

Результат внедрения анимации и моушн можно отследить по следующим метрикам:

• Среднее время просмотра ролика.
• CTR.
• Портрет ЦА с используемыми устройствами, типом браузера и источниками перехода на сайт.
• Охват.

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