КОМАНДОР

Интерактивный сайт для обучения персонала
КОМАНДОР
Интерактивный сайт для обучения персонала
ЗАДАЧА:
Холдинг «Командор» проводит постоянный рекрутинг новых сотрудников. Все вновь принятые на работу проходят обязательное обучение стандартам компании. В качестве приветственного обучающего контента было решено сделать интерактивный сайт, рассказывающий сотрудникам о компании.

Сайт представляет собой слайдер с интерактивными элементами. Каждый слайд посвящен одному из направлений деятельности компании. Направление иллюстрируется анимированным motion-видео. Пользователь сайта может ознакомиться с подробной информацией о направлении с помощью размещенных на слайде пиктограмм.
Запуск проекта: март 2017
Запуск проекта: март 2017

ЗАДАЧИ:
Сделать интерактивный сайт, рассказывающий новым сотрудникам о компании.

Клиент пришел к нам с идеей об обучающем сайте, наполненном анимацией и интерактивными элементами. Вместе мы разработали концепцию будущего сайта и с нуля реализовали анимационные ролики для его наполнения.
Клиент пришел к нам с идеей об обучающем сайте, наполненном анимацией и интерактивными элементами. Вместе мы разработали концепцию будущего сайта и с нуля реализовали анимационные ролики для его наполнения.

Процесс разработки

1
Сценарий и скетчирование
Согласно пожеланиям клиента
были разработаны прототипы
будущих сцен — скетчи
2
Отрисовка сцен
По готовым эскизам были отрисованы
сцены, включая персонажей, задние планы и различные детальки
3
Анимация и сведение видео
Motion-дизайнеры оживили сцены
с помощью анимации и сведения
4
Программирование
Для отображения страниц сайта был разработан легкий и простой js-движок

ОБЩАЯ КОНЦЕПЦИЯ САЙТА

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

Отрисовка сцен

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

Анимация и сведение видео

Анимационные видеоролики в данной работе играют роль красивого визуального оформления сайта. К каждому ролику были выдвинуты два требования: он должен быть зацикленным и иметь наименьший вес (важно для скорости загрузки).
В результате было выпущено двенадцать анимационных роликов без звукового сопровождения, продолжительностью от 5 до 20 секунд. Каждый ролик обыгрывал типичную сценку из жизни компании «Командор». Короткий метраж видео оставил пространство для простейших действий: персонажи улыбаются, пакуют покупки или приветственно машут рукой.
В результате было выпущено двенадцать анимационных роликов без звукового сопровождения, продолжительностью от 5 до 20 секунд. Каждый ролик обыгрывал типичную сценку из жизни компании «Командор». Короткий метраж видео оставил пространство для простейших действий: персонажи улыбаются, пакуют покупки или приветственно машут рукой.
Сценка в продуктовом отделе гипермаркета
Расположение элементов выбиралось с учетом особенностей экранов пользователей. Чтобы сайт одинаково хорошо работал с разрешениями 4:3 и 16:9, мы предусмотрели буферные зоны по бокам рабочей области. Таким образом, сайт сохраняет полную функциональность на любых мониторах — правда, обладатели широкоформатных экранов увидят чуть больше красоты ;)
Информационное окно сайта. В этом кейсе мы заменили боевые тексты на «рыбу» по просьбе заказчика.
Сайт полностью адаптивен и подстраивается под размеры экрана пользователя. Ввиду невозможности трансформации отношения сторон видеофайлов, "портретная" ориентация экрана недоступна. Если пользователь открывает сайт в этой ориентации, ему предлагается повернуть устройство.
Если вам понравилось это решение и вы хотите запустить похожий проект — пишите на hello@salerman.agency или звоните (391) 205-13-30! Составим для вас индивидуальный сценарий, создадим контент и анимацию под вашу задачу.

Антон Кочетов
Руководитель отдела продаж


не пропустите