Совы не то, чем кажутся: как мы превратили лендинг «Итоги года» в аллюзию на фильмы Дэвида Линча

20 января исполнилось бы 80 лет Дэвиду Линчу. Если вы когда-нибудь «бывали» в Твин Пиксе, то помните это тревожное ощущение, смешанное с любопытством. Оно возникает с первых нот саундтрека. Мистический, загадочный, местами непонятный сюжет, на грани яви и сна. Там у всего есть обратная сторона. А что, если создать лендинг в духе Дэвида Линча? Каким бы он получился? Мы это сделали, и приглашаем на показ.

Совы не то, чем кажутся: как мы превратили лендинг «Итоги года» в аллюзию на фильмы Дэвида Линча

Пролог. Особенный декабрь

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

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

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

Главная страница сайта
Главная страница сайта

Как итоги года стали похожи на фильм Дэвида Линча

Линч — уникальный режиссер. Он обладал талантом брать знакомое — кофе, дорогу, разговор, привычный городок — и слегка подкручивать реальность, чтобы она обрела второй слой. Линч не создает загадки, они рождаются в голове у зрителя. У этого режиссера детали — не декорации, а намеки и подсказки; паузы — не обычные, а напряженные; а незначительная, казалось бы, проходная сцена вдруг становится важнее, чем любая кульминация или плот твист.

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

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

Поэтому наши итоги года мы представили, как маленький фильм, неспешный, атмосферный, нуарный, с игрой света и тени. Представьте ночное кафе с картины "Полуночники" художника Эдварда Хоппера, туда заходит Дейл Купер, берет кофе и вишневый пирог. История начинается.

Референсы и источники вдохновения. Сова, как и все иллюстрации в этом проекте, нарисована дизайнером от руки
Референсы и источники вдохновения. Сова, как и все иллюстрации в этом проекте, нарисована дизайнером от руки

Сюжет, спецэффекты и «съемки»

Исследование

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

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

Текст и визуал вместе создают смысл и второй слой реальности
Текст и визуал вместе создают смысл и второй слой реальности

Горизонтальная прокрутка как пленка времени

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

Горизонтальный слайдер, как эффект кинопленки
Горизонтальный слайдер, как эффект кинопленки

Иллюстрации-символы

Когда мы нащупали стиль, стало ясно, что одной эстетики ретровейва недостаточно. Хотелось не просто «красиво», а так, чтобы внутри этой красоты рождалась вторая реальность, проглядывал второй слой, тот самый, линчевский. Было важно создать ощущение, что у каждой детали есть смысл, даже если он угадывался не сразу.

Дейл Купер, персонаж сериала "Твин Пикс" как визуальный референс 
Дейл Купер, персонаж сериала "Твин Пикс" как визуальный референс 

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

Но обратите внимание на детали. Рукава рубашки закатаны, и под ними проступают татуировки, герой не тот, кем кажется (как те самые совы). Он не офисный клерк, он творческий человек, мечтатель. В окне, куда смотрит девушка, и обычный город, и пальмы. Сложно понять, где на самом деле она живет, где реальность, а где мечты. Силуэт мужчины имеет необычную тень — он играет на гитаре. Кто знает, в душе, в мечтах, или это его второе Я. А финальная иллюстрация — силуэт человека, идущего к солнцу, напрямую показывает разделение реальностей, переход от тени к свету, шаг навстречу неизвестному, там впереди будущее и оно точно несет что-то хорошее.

Все иллюстрации, созданные для проекта
Все иллюстрации, созданные для проекта

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

Дизайн как история

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

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

Обновленная айдентика Магвай, визуальное изменение, которое стало результатом переомысления себя
Обновленная айдентика Магвай, визуальное изменение, которое стало результатом переомысления себя

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

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

Совы не то, чем кажутся: как мы превратили лендинг «Итоги года» в аллюзию на фильмы Дэвида Линча

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

Плавные анимации

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

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

Совы не то, чем кажутся: как мы превратили лендинг «Итоги года» в аллюзию на фильмы Дэвида Линча

Техническая сторона

Мы поставили перед собой простую задачу: сделать быстрое, легкое решение без избыточной нагрузки. Фронтенд собрали на HTML/CSS/JS, чтобы обеспечить плавные микроанимации, привязанные к горизонтальному скроллу. Для анимации иллюстраций использовали SVG-подход и инструменты, которые позволяют оживлять элементы без тяжелых моушн-редакторов, нам нужна была тонкая режиссура движения. Разработка заняла две недели, а весь процесс создания проекта (от идеи до реализации) около двух месяцев, потому что ритм и тональность в таких историях настраиваются дольше, чем пишется код.

Совы не то, чем кажутся: как мы превратили лендинг «Итоги года» в аллюзию на фильмы Дэвида Линча

Результат: когда финал становится началом

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

Мы добавили ссылку на «Итоги года» в шапку основного сайта и во время праздничных каникул зафиксировали 2000+ посещений. Но важнее была реакция. Люди говорили, что им понравилась наша история, живая, с внутренним ритмом, такая история, в которой каждый узнает что-то свое: магию творчества, выход на новый уровень, внутреннее взросление, тягу к тому, что находится за рамкой рационального.

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

Финальный кадр, после которого всегда хочется сделать следующий шаг
Финальный кадр, после которого всегда хочется сделать следующий шаг

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

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

При этом я люблю эстетику западной культуры 70–80-х и нуарные фильмы, где эмоции настоящие и герои не прячутся за словами, а действуют. Дизайн «Итогов года» — это отражение нас самих. Честный, искренний, полный визуальных и смысловых отсылок к тому, что нас вдохновляет.

Нина Калаус
CEO и арт-директор Магвай
10
1
2 комментария