Кейс по разработке сайта для акселератора в сфере медиаиндустрии

Global Creative Industries Accelerator — это программа по поиску инновационных технологических решений для медиаиндустрии. Запуск программы — совместная инициатива Лаборатории IPChain* и G-Core Labs**, где компании в роли организаторов, и Фонда «Сколково» — в роли оператора программы.

Главная страница акселератора

Акселератор запущен для привлечения проектов с решениями для медиаиндустрии, включая производство аудиовизуального контента, защиту прав и монетизацию. Приоритетные направления программы:

• кибербезопасность;
• искусственный интеллект и машинное обучение;
• контент и потоковая передача;
• инфраструктура.

Шрифты отражают футуристическую тематику

Первому игроку приготовиться

Перед нами стояла задача — разработать сайт для мероприятия, где можно было собирать заявки и информировать о программе. Сайт должен быть интегрирован с системой сбора заявок LS Fusion, чтобы регистрации попадали напрямую в личный кабинет Фонда «Сколково».

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

Комбо-набор от WebCanape

Визуально сайт должен был объединять двух ключевых партнеров программы: лаборатории IPChain и G-Core Labs. Обе компании отвечают за применение Big Data и искусственного интеллекта для мониторинга аудио- и визуального контента.

За основу мы взяли их точку соприкосновения — современные технологии в визуальном контенте. Поэтому тематикой для сайта стали киноиндустрия и IT.

Визуальный акцент на организациях

В качестве основной концепции мы использовали идею кинематографа:

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

Крутящиеся элементы — это фокусировка объектива камеры. Оранжевые, желтые и синие градиентные шары — засветы на пленке.

Атрибуты кинематографа на сайте

Что под крышкой объектива?

Мы ушли от стандартного представления о том, какой должен быть лендинг, и сделали горизонтальный скролл. Были использованы нестандартные решения, что выделяется среди других сайтов мероприятий.

Для работы с backend мы воспользовались собственной разработкой — Canape CMS, написанной на php-фреймворке Yii2. Frontend-разработка велась при помощи фреймворка React JS — это позволило нам интегрировать на сайт множество различных анимаций и элементов, при этом не делая его тяжелым, ведь все элементы подключаются только тогда, когда они необходимы.

Владислав Андреев

Итоги

Сайт был реализован за 20 дней. Мы сделали тематический проект, учитывая пожелания всех лиц (а это довольно сложно, поверьте), принимающих решение по программе: Фонда «Сколково» (Группа ВЭБ.РФ), Лаборатории IPChain и компании G-Core Labs. Сейчас сайт завершил начал свои «первые шаги» — прием заявок. Далее он будет дорабатываться и развиваться согласно следующим этапам программы.

Заметки

*Проект ассоциации IPChain нацелен на формирование международной сети транзакций прав и объектов интеллектуальной собственности. Их лаборатория отвечает за применение больших данных и искусственного интеллекта для мониторинга аудио- и визуального контента в любых источниках.

**Компания G-Core Labs является ведущей лабораторией в области применения больших данных, искусственного интеллекта для мониторинга аудио- и визуального контента и его доставки в любую точку мира.