«Двуязычный сайт-лендинг бренда лимонада: авторские иллюстрации, скролл-анимация «Передай вайб», ролики и UGC-грид — RU и EN на React.»
Max & Jack’s — молодой бренд лимонада с характером: маскоты Макс и пёс Джек, рэп-эстетика и слоган «Передай вайб». Мы собрали для бренда двуязычный сайт-лендинг: тёмная бренд-история с авторскими иллюстрациями, скролл-анимация, где бутылка «передаётся из рук в руки», линейка вкусов, ролики и UGC-грид тусовок. Фирменный стиль и маскотов задал бренд — а весь сайт, его иллюстрации и анимации сделали мы.
Главную идею бренда мы превратили в скролл-анимацию: нарисованная рука с бутылкой на чёрном фоне, и по мере прокрутки напиток переходит из рук в руки — от Макса через девушку к Джеку. Ради этого дизайнеры отрисовали руки, персонажей и фрукты в единой авторской стилистике, а бутылка в кадре передачи — намеренно живое фото среди рисованного мира. Добавили эффект «грозы» и разный тайминг для русской и английской версий.
Сайт живёт на двух языках — русский в корне, английский на /en, с переключателем в шапке. Семь экранов с якорной навигацией и боковым меню, у каждого своя анимация; прелоадер с пиксельной бутылкой на медленном соединении; вместо формы обратной связи — Telegram-бот, вместо привычной страницы — кастомная 404. Всё собрано на React с локальными шрифтами и медиа в WebP.
Перенесли сайт на хостинг клиента, подключили домен и настроили аналитику — Яндекс.Метрику, Вебмастер и Google Search Console — плюс 301-редиректы. Довели OG-сниппеты под мессенджеры и соцсети до победного, включая фавикон-собачку и превью в разных сервисах.
Собрали английскую версию следом за русской, вычистили баги мобильной вёрстки и переходов между языками, добавили ролики тусовок и фотоколлаж. Подключили дополнительные силы студии, чтобы успеть к дедлайнам клиента, и отшлифовали анимации на всех разрешениях.
Расскажите о задаче — предложим архитектуру решения. Без шаблонных КП и абстрактных смет: конкретика на старте.
Самый плотный месяц: собрали все семь экранов, шапку с боковым меню и музыкальным блоком, скролл-анимации, страницу 404 и настроили SEO. Оптимизировали медиа в WebP, добавили лоадер и три вертикальных ролика, подключили локальные шрифты. Заявки увели в Telegram-бот.
Лендинг maxandjacks.com: тёмная бренд-история с авторскими иллюстрациями, вкусами, видео «наши тусовки» и UGC-гридом «передай вайб»
Прошли несколько итераций концепта и остановились на вертикальном скролле с руками на чёрном фоне и эффектом «грозы». Отрисовали иллюстрации в фирменной стилистике, собрали бренд-историю Макса и Джека, привели вкусы и фрукты к единому стилю и утвердили макет с руководством бренда.
Раскадровка ключевой скролл-анимации: нарисованная рука передаёт бутылку — «передай вайб»
Несколько месяцев обсуждали объём и смету, разбирались в продукте и маркетинге бренда. В конце июня зафиксировали формат — двуязычный лендинг, — собрали структуру, запросили контент и слоганы и разложили план в трекере.