Erin Wesley x SALT AND PEPPER: креативный сайт-портфолио с GLSL-анимацией — Awwwards

SALT AND PEPPER — студия веб-разработки, которая специализируется на технически сложных сайтах с нестандартной анимацией и креативным фронтендом. В этом кейсе рассказываем, как разработали сайт-портфолио для Erin Wesley — оператора-постановщика из Лос-Анджелеса, работавшей над "Шан-Чи" Marvel, рекламой Nike и Audi. Реализовали шесть уникальных галерей, GLSL-анимации и проприетарный кастомный скролл — за первые 6 месяцев после запуска клиентка получила несколько офферов от студий, которые задерживались на сайте значительно дольше обычного. Проект получил Site of the Day, Developer Award от Awwwards, FWA of the Day, Winner of the Day от CSSDA и золото «Золотого сайта».

Эрин – молодая оператор-постановщик из Лос-Анджелеса, и к моменту, когда она обратилась в SALT AND PEPPER, ее карьера находилась на грани перехода в новую лигу. И чтобы этот переход состоялся, ей нужен был сайт-портфолио, который мог выгодно презентовать ее работы и зацепить глаз нужных людей в индустрии. А показать было что: работа над “Шан-Чи” Марвел, клип Криса Брауна, рекламный ролик для NBA, спецпроекты для Nike и Audi. Не хватало только упаковки, которая выделила бы Эрин на фоне других кандидатов и при этом была бы удобна для студийных сотрудников, которые занимаются подбором специалистов на проекты.

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

Учитывая специфику работ Эрин, сайт по факту является одной большой визуальной галереей. На нем ровно столько текста, сколько необходимо, все остальное – картинки и видео. Чтобы сайт не выглядел однообразным, мы разработали для каждой страницы свою галерею, подходящую под контент и формат. В итоге у нас получилось шесть уникальных галерей – от слайдера на главной до трехмерной галереи в пасхалке.

Чтобы вся эта красота не превратилась из галереи в слайд-шоу, почти все анимации написаны на GLSL. Так мы переложили самую тяжелую работу с процессора на видеокарту, которая гораздо эффективнее справляется с рендерингом визуальных элементов. Добавив к этому наши отработанные методы оптимизации и лучшие практики индустрии, мы добились плавной работы на практически любом устройстве. При этом мы не пожертвовали ни одной анимацией или эффектом в мобильной версии.

Сайт состоит из кучи галерей, которые нужно скроллить – вниз, вбок, вглубь. Обычным скроллом тут не обойдешься, поэтому мы использовали наш проприетарный кастомный скролл. Это дало нам необходимую плавность и в то же время полный контроль над тем, как каждая страница скроллится.

Сайт никогда не задумывался как промо на большую аудиторию. Скорее наоборот – он создавался для глаз буквально сотни людей, которые могли запустить карьеру Эрин в стратосферу. С ее слов, все, кто связывался с ней с предложениями о работе, отмечали, что на ее сайте они задерживались значительно дольше, чем на портфолио других кандидатов. Так что можно сказать, что мы внесли нотку разнообразия в их рутинный процесс отбора кандидатов.

В первые 6 месяцев после запуска Эрин получила несколько предложений о работе, каждое из которых с лихвой окупало все силы, потраченные на создание сайта.