Разработали визитку для канадского креативного продакшена

Freshman — канадская креативная продакшн-компания с офисами в Монреале и Торонто. Ребята снимают видео для мировых брендов: Volkswagen, Cartier, Red Bull. В 2023 году Freshman показали новую айдентику, расширили список режиссёров и обновили позиционирование под слоганом Real Always Wins.

Чтобы развивать бренда дальше, компании понадобился новый сайт — старый перестал соответствовать уровню работ и новому фирменному стилю.

На старте мы зафиксировали три ключевых требования к будущему продукту:

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

— Обеспечить плавность интерфейса и мгновенный отклик даже на мобильных устройствах

— Создать удобную админ-панель, чтобы команда могла самостоятельно и быстро обновлять портфолио без привлечения разработчиков.

Работу над визуалом начали наши партнёры — агентство Dash Digital из ЮАР. 

Подход в дизайне — Content First

Dash Digital разработали дизайн-концепцию, в которой интерфейс работает как минималистичная рама для видеоконтента. Элементы управления и навигация не перетягивают на себя внимание. Главное место на экранах отдали работам режиссёров. Визуальные акценты создаёт только типографика. Формат текста отсылает к эстетике классического кинематографа — кинотитрам и винтажным афишам.

Цветовой контраст

Построили визуальную систему на полярных темах. Чёрный фон портфолио сменяет светлая бежевая тема на внутренних страницах. Этот приём разделяет контент: темнота для просмотра видео, светлый фон — для чтения биографий и кейсов.

Работа с типографикой

В проекте решили столкнуть три шрифтовых стиля: массивный гротеск для заголовков, тонкую антикву для деталей и рукописный текст для эмоций.

Крафтовые элементы

Freshman производит дорогой коммерческий продукт с идеальной картинкой. Дизайнеры намеренно нарушили эту глянцевость. Нанесли красные маркерные обводки и небрежные штрихи. Тонкие пунктирные линии отсылают к технической разметке на киноплёнке.

Как только дизайн согласовали — мы подхватили работу: запрограммировали сайт и разработали удобную админку за 4 месяца.

Прелоадер из SVG-кадров

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

В итоге мы отказались от растра в пользу SVG-кадров. SVG-секвенция позволила синхронизировать каждый кадр анимации с загрузкой данных.

Бесшовная смена видео

Пока на фоне проигрывается основной ролик, можно навести курсор на название другого проекта из списка — и видео поменяется. Так пользователь за несколько секунд изучит портфолио разных режиссеров вместо одного.

Загрузка за театральной шторкой

Переход между страницами (Page Transition) — в виде красной театральной шторки. Это одновременно креативное решение и способ замаскировать паузу, пока браузер грузит тяжёлые графические элементы.

Креативные ховеры

Направление бизнеса клиента также подчёркивает ручная графика. Дизайнеры отрисовали иллюстрации от руки, а мы перевели их в SVG-объекты, которые прорисовываются во время скролла или при ховере.

Эффект наслоения в футере

В футере сделали параллакс с эффектом наслоения. При скролле контентная область наезжает на футер, и он плавно появляется из-под неё.

Сделали систему постеров

Чтобы пользователь не смотрел на серые прямоугольники, пока грузится видео, мы разработали систему постеров. Это высококачественные стоп-кадры. Они держат структуру дизайна. Видеопоток сменяет постер только при наведении.

Для страницы Work мы реализовали бесконечный скролл и изменили время старта видео

В ленте одно и то же фоновое видео повторяется у разных карточек. Если запустить эти фрагменты одновременно, то лента выглядит монотонно. Мы написали отдельную логику для старта роликов. Одно и то же видео в карточках стартует с разных секунд.

Разработали кастомный видеоплеер

Стандартные плееры вроде YouTube или Vimeo не подходили проекту. Интерфейс лишними кнопками не вписался бы в эстетичный дизайн. Поэтому мы разработали кастомный минималистичный плеер. У нас было требование: при раскрытии в fullscreen и обратном сворачивании не должно быть ощущения шва — даже когда видео разных форматов и есть рамки. Поэтому мы построили логику трансформации так, чтобы переход из блока в центре экрана на весь экран был визуально цельным, включая работу с рамками. А после — упаковали его в самостоятельный модуль и теперь используем его как готовое решение на других проектах.

Оптимизировали загрузку тяжёлых роликов

Сайт на 90% состоит из видеоконтента. Клиенту нужно было готовить одно и то же видео под разные разрешения и форматы вручную — это долго и часто с ошибками. Мы сделали автоматизированный пайплайн: клиент загружает исходное видео, а на выходе получает набор версий под разные разрешения, гифки и превью-кадры. Дополнительно мы сделали интеграцию/плагин, который ускорял загрузку этого контента в CMS.

На сайте есть версия на английском и на французском. С первой всё просто. А вот во французском языке есть диакритические знаки и апострофы. Из-за них буквы становятся выше. При добавлении текста знаки из нижних строк стали накладываться на буквы в верхних. Мы загрузили файл шрифта в веб-сервис Transfonter — и алгоритм пересчитал базовые параметры шрифта специально под французский алфавит.

Клиент настоял на использовании Sanity CMS. Мы работали с ней впервые. Система оказалась сложной в настройке из-за путаницы в документации.

Чтобы команда Freshman могла самостоятельно заполнять контент на сайте, мы прописали подсказки (descriptions) для каждого поля в админке. В них указали требования к форматам файлов, разрешение видео и советы по заполнению текстовых блоков. Теперь клиент сможет публиковать новые кейсы без разработчиков, и ошибок на вёрстке не будет.

А ещё мы настроили админку так, чтобы контент переиспользовался. Контент-менеджеру не нужно загружать один и тот же ролик несколько раз для разных разделов сайта. Достаточно добавить видео в базу один раз и задублировать его в другие блоки.

Плюсом сделали кастомный компонент загрузки видео: клиент загружает видео как будто в Sanity, но фактически большие 4K-файлы уходят в AWS-хранилище, а Sanity хранит ссылки/метаданные и показывает превью. Это помогло не съедать лимиты Sanity и не переводить проект на более дорогой тариф.

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

Несмотря на то, что контент на 90% состоит из тяжелого 4K-видео, мы обеспечили стабильную работу интерфейса. Скорость взаимодействия (Interaction to Next Paint) составляет всего 91 мс, а стабильность верстки (Cumulative Layout Shift) близка к идеалу — 0,02, что исключает любые скачки элементов при загрузке медиа.

Благодаря внедрению удобной админки на Sanity CMS команда смогла самостоятельно грузить контент сразу на двух языках. Это позволило клиенту стать полностью автономным, а время на добавление одной новой работы в портфолио сократилось в три раза.

Проект получил Site of the Day и Developer Award от премии AWWWARDS, а также номинацию на Site of the Year. Список наград дополнил FWA of the Day.

А ещё нашу работу оценила команда Dash Digital: «Хочу передать комплимент от нашей команды: когда они настраивали код, отметили, что ваши разработчики проделали отличную работу. Такое редко услышишь — чтобы одни разработчики хвалили код других».