— На главной странице важно было отразить «рыбную» тематику так, чтобы пользователю захотелось после промоблока листать сайт дальше и буквально «залипнуть» на странице, чтобы узнать, кто же такие «Риментел», а потом — пойти в магазин за их продукцией. И это сработало: в офисе буквально все, кто видел сайт или процесс создания блоков с изображениями рыб, после работы отправлялись в супермаркет за рыбкой :)

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

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

Они получились настолько классными, что мы решили не останавливаться и сделать практический каждый блок на странице — живым.

— Открываю макет — а там с десяток анимаций. Прокрутил, потыкал, прокрутил. Потом еще раз. И еще. Что делать? Глаза боятся, а руки — делают. Так на главной появился блок про красную рыбу и пресервы, где по скроллу выезжает буквально всё: и картинки в тексте, и строки, и видео, которое растягивается на весь экран. Вышло круто.

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

— С помощью нейросетей мне удалось по фотографии рыбы с упаковки оживить форель и сельдь: теперь на странице бренда «Океан» у нас по-настоящему плывут рыбки по скроллу :)

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

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

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

— Для реализации бегущих строк, которые можно не только «таскать» мышкой, но и менять направление их движения, мы использовали библиотеку GSAP.

— Детальная страница товара получилась лаконичная: заказчик еще на этапе аналитики обозначил, что важно не «размазывать» контент по странице, а сделать так, чтобы буквально в 1−2 экранах пользователь нашел всю необходимую информацию по товару.

— На страницах сайта очень много видеоконтента: он есть в промоблоках, карточках и даже в заголовках. Чтобы облегчить жизнь пользователям, мы прикрутили в компонент с видео проверку скорости сети. Если скорость низкая — вместо видео выводим статичную картинку. Для проверки скорости используем Network Information API.

— Анимация цветного блока про добычу рыбы с перелистыванием и сменой контента — непростая: происходит в несколько шагов. Для нее мы использовали ScrollVariable и магию разработки: для сравнения — обычно описание стилей для анимации по скроллу занимает 5−6 строк, а здесь — почти 40 :)

— Страницы рецептов — самые «вкусные» на проекте, поэтому на голодный желудок на них лучше не смотреть. А мне вот — пришлось :)

Карточки на странице списков рецептов информативно рассказывают, что за рецепт, его сложность и время приготовления. А видео в промоблоке создает эмоцию, чтобы скорее начать готовить гастрономические шедевры.

— Я люблю готовить (очень люблю). Когда стал работать над проектом, то сразу пошел искать продукцию брендов в магазинах: нашел в местном супермаркете «Рыбу-рыбу» и «Кетус» и стал периодически покупать.

Когда же дело дошло до страниц с рецептами, я осознал, что люблю драники, яйца и рыбу — и мысль протестить рецепт пришла в голову сама собой. И вот: суббота, 8 утра, я на кухне с теркой, картошкой и рыбой, рядом кошка — мы начинаем. На всё про всё я затратил не больше 30 минут и кайфанул от процесса.

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

— Задача страницы о карьере — показать, как круто быть сотрудником «Риментела» и как компания любит своих работников и как заботится о них.

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

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