2017
Производство сайта
Дизайн
Графика
Nectarin agency
Награды

Tagline 2017 awards, лучший сайт коммьюнити, серебро.

«Нектарин» — одно из крупнейших российских digital - агентств, действующее с 2006 года. Компания входит в тройку лидеров по версии Tagline, занимает второе место в рейтинге агентств полного цикла Ruward и имеет в своем портфолио множество проектов для брендов первой величины. 

Nectarin agency
Задача

Компания «Нектарин» предложила нам разработать сайт о своих услугах на основе позиционирования «digital-супергерои на службе вашего бизнеса». Нашей задачей стало создание дизайна сайта и 3D.

Особенности позиционирования

В позиционировании агентства акцент сделан на личные компетенции ключевых сотрудников «Нектарина». Каждый из них — супергерой со сверхспособностями в performance-маркетинге, стратегии, SMM, креативе, продакшне и других областях. Агентство провело фотосессию и предоставило нам фотографии главных лиц компании. Требовалось придумать, как показать их на сайте в качестве супергероев.

Nectarin agency
Создание образов супергероев

Нам предстояло разработать индивидуальные образы для каждого ключевого лица агентства и привлекательно презентовать их на сайте. Эту работу мы разделили на две части: Создание костюмов супергероев в 3D, Разработка использования костюмов в верстке и сборка лэйаутов страниц (лэйаут – расположение элементов и блоков в интерфейсе)

Каждый супергерой имеет свой символ – иконку, которая отражает суть его направления (медиа, стратегия, креатив, SMM и т.д.). Иконки совместимы между собой и используются в качестве динамических прелоадеров страниц.

Nectarin agency
Разработка костюмов

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

Nectarin agency
Nectarin agency
Nectarin agency

В процессе 3D-моделирования и композинга (соединения 3D-объектов с 2D-фотографиями) костюмов мы плотно контактировали с руководителем продакшна «Нектарина» Сергеем Дапкусом. Согласование костюмов проходило без участия остальных «супергероев» агентства, чтобы они заранее не видели свои костюмы. Это сократило время переговоров по костюмам и повысило интерес к результату внутри компании-заказчика)). Костюмы моделировались в Cinemа 4D.

Сборка лэйаутов страниц

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

Nectarin agency

Этот эффект реализуется за счет связки JavaScript, CSS и svg-анимации. В отличие от видео такая анимация выглядит немного проще, но позволяет значительно ускорить загрузку страниц.

Работа над структурой сайта

«Нектарин» предоставил нам готовую структуру контента на сайте, которую мы частично видоизменили и усовершенствовали в процессе работы.

Главная страница

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

Nectarin agency
Nectarin agency
Раздел «Команда»

Готовая концепция агентства не предполагала раздела с информацией о команде. Мы настояли на его появлении, чтобы подробно пояснить основную идею позиционирования компании. Для раздела были отрисованы изображения 16 супергероев, которые затем стали частью блока с динамической версткой (по своей форме он перекликается с логотипом агентства). При наведении курсора на каждого героя появляется плашка с его именем и специализацией.

Nectarin agency
Раздел «Экспертиза»

Позиционирование «Нектарина» включает установку, что быть экспертом во всём – невозможно. Компания обладает digital-экспертизой в определенных отраслях – автомобильной, FMCG, фармацевтике, ритейле, недвижимости и некоторых других – и специализируется на проектах этой тематики. Отрасли, в которых компетентно агентство, представлены в виде облака тегов, перекликаясь с логотипом агентства. Внутренние страницы экспертиз агентства отличаются по своим фоновым решениям. Фон каждой страницы строится на библиотеках WebGL, предназначенных для создания интерактивной 3D-графики на JavaScript. Использование готовых библиотек позволило сэкономить время при разработке и при этом индивидуализировать страницы.

Nectarin agency
Front-end

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

Адаптивная версия

Сайт сделан адаптивным, при этом при просмотре с мобильных устройств на страницах сохраняется большинство эффектов анимации, доступных на декстопе.

Nectarin agency
Результаты
  • Разработка сайта, отражающего позиционирование компании.
  • 3D-моделирование костюмов супергероев – опорного элемента дизайна.
  • Выполнение проекта за 4 месяца.
Показатели сайта
  • около 20 000 просмотров менее чем за месяц;
  • средняя длительность сеанса на сайте – 02:16;
  • глубина просмотров – 2,74;
  • 20,2% пользователей возвращаются на сайт.

Посмотрите другие работы:

Хочешь работать с нами?

Спасибо

Совсем скоро мы свяжемся с вами! 🚀

Оставить заявку:

Ваше имя?
E-mail
Телефон

Какой тип проекта вы хотите обсудить?

Нажимая на кнопку «Отправить заявку», вы даёте согласие на обработку своих персональных данных