Nectarin agency
2017 год
nectarin.ru
01
Награды:
Tagline 2017 awards, лучший сайт коммьюнити, серебро.
02

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

03
04
Задача

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

05
Особенности позиционирования
В позиционировании агентства акцент сделан на личные компетенции ключевых сотрудников «Нектарина». Каждый из них — супергерой со сверхспособностями в performance-маркетинге, стратегии, SMM, креативе, продакшне и других областях. Агентство провело фотосессию и предоставило нам фотографии главных лиц компании. Требовалось придумать, как показать их на сайте в качестве супергероев.
06
07
Создание образов супергероев
Нам предстояло разработать индивидуальные образы для каждого ключевого лица агентства и привлекательно презентовать их на сайте. Эту работу мы разделили на две части: Создание костюмов супергероев в 3D, Разработка использования костюмов в верстке и сборка лэйаутов страниц (лэйаут – расположение элементов и блоков в интерфейсе)
08
Каждый супергерой имеет свой символ – иконку, которая отражает суть его направления (медиа, стратегия, креатив, SMM и т.д.). Иконки совместимы между собой и используются в качестве динамических прелоадеров страниц.
09
10
Разработка костюмов
Задача заключалась в том, чтобы создать костюмы и соединить их с фотографиями сотрудников агентства. Характер фото был достаточно статичным, и нам предстояло «оживить» их динамикой новых поз и ракурсов.
11
12
13
14
В процессе 3D-моделирования и композинга (соединения 3D-объектов с 2D-фотографиями) костюмов мы плотно контактировали с руководителем продакшна «Нектарина» Сергеем Дапкусом. Согласование костюмов проходило без участия остальных «супергероев» агентства, чтобы они заранее не видели свои костюмы. Это сократило время переговоров по костюмам и повысило интерес к результату внутри компании-заказчика)). Костюмы моделировались в Cinemа 4D.
15
16
Сборка лэйаутов страниц
Одна из главных идей позиционирования заключается в том, что сотрудники агентства, обычные люди в повседневной жизни, на работе превращаются в супергероев. Чтобы это показать, мы придумали интересную модель верстки для страниц, посвященных направлениям работы агентства (сервисам). При загрузке страницы сначала отображается обычное фото человека, а через несколько секунд на нем начинают появляться части костюма, в итоге собираясь в новое изображение.
17
18
Этот эффект реализуется за счет связки JavaScript, CSS и svg-анимации. В отличие от видео такая анимация выглядит немного проще, но позволяет значительно ускорить загрузку страниц.
19
Работа над структурой сайта
«Нектарин» предоставил нам готовую структуру контента на сайте, которую мы частично видоизменили и усовершенствовали в процессе работы. Главная страница Изначально представлять супергероев агентства на главной странице планировалось в формате слайдера. Мы предложили другое решение – горизонтальный скролл, который позволяет показать несколько супергероев одновременно. Это не вредит навигации – слева всегда остается закрепленное меню.
20
21
22
Раздел «Команда»
Готовая концепция агентства не предполагала раздела с информацией о команде. Мы настояли на его появлении, чтобы подробно пояснить основную идею позиционирования компании. Для раздела были отрисованы изображения 16 супергероев, которые затем стали частью блока с динамической версткой (по своей форме он перекликается с логотипом агентства). При наведении курсора на каждого героя появляется плашка с его именем и специализацией.
23
24
Раздел «Экспертиза»
Позиционирование «Нектарина» включает установку, что быть экспертом во всём – невозможно. Компания обладает digital-экспертизой в определенных отраслях – автомобильной, FMCG, фармацевтике, ритейле, недвижимости и некоторых других – и специализируется на проектах этой тематики. Отрасли, в которых компетентно агентство, представлены в виде облака тегов, перекликаясь с логотипом агентства. Внутренние страницы экспертиз агентства отличаются по своим фоновым решениям. Фон каждой страницы строится на библиотеках WebGL, предназначенных для создания интерактивной 3D-графики на JavaScript. Использование готовых библиотек позволило сэкономить время при разработке и при этом индивидуализировать страницы.
25
26
Front-end
На сайте много анимированных элементов, которые акцентируют внимание пользователей на определенной информации. Заголовки и фотографии анимированы эффектом шторок. Элементы двигаются при скроллинге страницы. Сложная анимация, присутствующая практически во всех разделах, вовлекает аудиторию во взаимодействие с компанией. Вместе с 3D-изображениями она создает образ технологичного и современного digital-агентства.
27
Адаптивная версия
Сайт сделан адаптивным, при этом при просмотре с мобильных устройств на страницах сохраняется большинство эффектов анимации, доступных на декстопе.
28
29
Результаты
  • Разработка сайта, отражающего позиционирование компании.
  • 3D-моделирование костюмов супергероев – опорного элемента дизайна.
  • Выполнение проекта за 4 месяца.
30
Показатели сайта
  • около 20 000 просмотров менее чем за месяц;
  • средняя длительность сеанса на сайте – 02:16;
  • глубина просмотров – 2,74;
  • 20,2% пользователей возвращаются на сайт.