Freshman

О заказчике и проекте

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

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

Работу над визуалом начали наши партнёры — агентство Dash Digital из ЮАР. Они разработали дизайн-концепцию, в которой интерфейс работает как минималистичная рама для видеоконтента. Когда этап дизайна завершился, Dash Digital пришли к нам за технической реализацией.

Дизайн — рама под креативный контент заказчика

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

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

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

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

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

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

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

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

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

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

На странице Directors при наведении на имя режиссёра буквы начинают достраиваться. Эта механика отсылает к эстетике старых кинотеатров, где названия на афишах собирали вручную.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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