Черная пятница в UPROCK! 2 дня до конца распродажи!

10 примеров применения эффекта жидкого металла в веб-дизайне

В жидком металле есть что-то завораживающее.

Непрерывный поток вязкой серебристой жидкости явно обладает качеством ASMR (прим. Autonomous sensory meridian response, ASMR — феномен восприятия, характеризующийся приятными непродолжительными ощущениями покалывания в затылке, распространяющимися в виде мурашек по коже шеи и спине к конечностям). Его первозданная, безупречная поверхность и эффект движения, кажется, сбивают с толку наш мозг — ведь металл должен быть твердым, верно? Да, мы все знаем, что ртуть — это жидкий металл. Мы также понимаем и то, что многие виды металлов можно расплавить. Поэтому нельзя сказать, что жидкий металл это что-то сверхъестественное, и тем не менее, от него невозможно отвести глаз.

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

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

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

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

Быстрый просмотр Behance в поисках дизайна с использованием эффекта хрома демонстрирует впечатляющие результаты и доказывает, что есть немало талантливых дизайнеров, изучающих этот стиль. Например, итальянский дизайнер моушн-графики Сик Эст создал потрясающую работу с применением текстур жидкого металла и компьютерной графики для Versace Timeless SS18 campaign. А в проекте Beauty Alchemist editorial for Schön! Magazine жидкости показаны в контексте макияжа. Жидкий металл сейчас настолько в тренде, что вы даже можете воспользоваться ресурсами для дизайнеров, которые содержат хроматические элементы для своего следующего проекта.

Социальные сети также являются прекрасным источником вдохновения, когда дело доходит до использования эффекта жидкого и хромированного металла. Хэштег #chrometype насчитывает более 77 тысяч постов. Есть аккаунт, полностью посвященный этому стилю. Безусловно, есть фильтры/маски для сторис из жидкого металла для придания человеку экстравагантного, футуристического вида, напоминающего киборга.

Не стоит забывать, что последние два десятилетия мейнстримная поп-музыка была самым влиятельным предвестником визуальных тенденций. Артисты стремятся использовать самые инновационные визуальные эффекты, сопровождающие их музыку, чтобы помочь придать их личности целостный образ. Многое из того, что мы видим на обложках альбомов и в музыкальных клипах, немедленно подхватывается и видоизменяется. Когда речь идет о жидком металле, мы встречали его на обложке альбома Леди Гага Chromatica, сингла Розалии Aute Cuture и гастрольного мерча Рины Саваямы.

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

Thibaut Foussard

Thibaut Foussard точно вдохновит вас продолжать развиваться в творческом направлении. Французский разработчик и энтузиаст JavaScript создал великолепный сайт-портфолио: современный макет с геометрическими мотивами и светом, который постепенно меняется от темного к светлому по мере исследования сайта. Тонкие четкие линии и круги уравновешиваются крупными неправильными каплями темного жидкого металла, мягко парящими вверх. Вся страница имеет зернистую текстуру, а некоторые из самых больших капель (или пузырей) также имеют неидеально гладкую поверхность. Эта текстура придает дизайну глубины и реалистичности, создавая особую кинематографическую атмосферу.

Lunch Concept

Бренд, о котором мы уже писали в нашем исследовании инновационной типографики, — концептуальный магазин Lunch Concept. Обложка сайта состоит из огромного металлического заголовка на фоне потрясающего видео. Несмотря на то, что он имитирует холодный, острый металл, шрифт обладает легким налетом чувственности, возможно, из-за его матовой текстуры и кривой, соединяющей буквы L и N. Или, может быть, из-за видео на фоне логотипа, которое придает ему особую атмосферу. Плавные изгибы и матово-черный цвет букв передает ощущение мягкой текстуры, в то время как острие буквы C добавляет персонажу остроты. Буквы выглядят гибкими и полыми с обратной стороны. Общий эффект вызывает желание прикоснуться, исследовать и поиграть с логотипом.

Hanai World

Hanai World позиционируется как социальная платформа смешанной реальности. Она должна была развернуть свою деятельность в конце 2021 года. На ней планируется создать сообщество дизайнеров, разработчиков и технологических компаний, работающих вместе для обеспечения синхронного физического и цифрового опыта, в первую очередь, в сфере развлечений. На данный момент единственной возможностью создания платформы является веб-сайт, призывающий присоединиться новых членов команды, дизайнеров и разработчиков. Судя по дизайну, это будет единая современная, ориентированная на будущее, среда для творческих людей и разработчиков. На ней они будут соревноваться друг с другом в том, кто сможет предложить наиболее инновационный опыт с акцентом на эстетику. Динамичный фон с пастельным градиентом излучает атмосферу космической меланхолии. Такое настроение поддерживается рядом объектов, в основном сфер, сделанных из жидкого металла. Они вращаются рядом друг с другом или просто плавают в поле зрения и исчезают. Пара рук из жидкого металла тянется из окон к каким-то параллельным мирам, приветствуя новых участников. Вся композиция поддерживает идею создания новых вселенных внутри нашей существующей и преодоления преград между физическим и цифровым мирами.

&Walsh

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

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

Yuta Kawaguchi

Yuta Kawaguchi — японский дизайнер, безошибочно узнаваемый по своему дерзкому стилю. Его работы известны трехмерными формами, которые кажутся острыми, как нож или, возможно, сюрикэн, поскольку многие из них имеют формы, вдохновленные этим оружием. Его проекты обычно созданы в смелой, ультра-яркой среде с применением кислотного зеленого, радиоактивного желтого и ядерного синего. Источником вдохновения для создания стиля его типографики являются боевики и фильмы ужасов B-производства 1980-х и 1990-х годов, а также иконография хэви-метала и культуры хип-хопа. Это радикальная, громкая и агрессивная смесь влияний, каждая часть которой доведена до совершенства. Его дизайны из жидкого металла особенно поразительны, поскольку они обладают особыми физическими качествами — выглядят так, будто могут разрезать экран. А их блестящие поверхности отражают цвета, которые повествуют об антиутопических временах.

Blobmixer

14islands — шведская креативная студия дизайна и разработки, за плечами которой ряд крупных проектов и наград. Студия также создает забавные, интересные проекты без какой-либо очевидной цели, кроме как порадовать пользователей и продемонстрировать навыки своей команды. Одним из таких проектов является Blobmixer, онлайн-инструмент (или игрушка, если хотите) для создания 3D-пузырей, с которыми можно взаимодействовать в виртуальной реальности, а также скачивать или делиться ими с друзьями. Инструмент является чрезвычайно простым и интуитивно понятным. Им может воспользоваться каждый. Помимо самого инструмента, на веб-сайте представлены некоторые из лучших BLOB-объектов (прим. пузырей), созданных с его помощью. Некоторые из них имеют текстуру жидкого металла, а один даже назван в честь вышеупомянутого Т-1000. Другие рекомендуемые для создания пузырей материалы включают воду, пластик, лаву, слизь, жидкую косметику и так далее.

Twomuch Studio

Дизайн здесь кажется вездесущим, но в то же время находится в загадочной гармонии. Веб-сайт Twomuch Studio встречает пользователя хаотичным набором плавающих объектов на стерильном белом фоне, дополненным угловым меню с глазами Патрика Морской Звезды (прим. один из главных персонажей американского мультсериала «Губка Боб Квадратные Штаны»). Плавающие объекты — это несколько экранов, кирпичей, гигантский карандаш, рупор и объекты, которые трудно идентифицировать. Когда они поворачиваются, их поверхности из гипсово-белого превращаются в жидкий металл, сначала матовый, затем переливающийся и блестящий. И за всеми этими предметами расположен едва читаемый металлический логотип студии. Он также меняет цвет и текстуру по мере того, как его металлическая жидкость двигается и видоизменяется. Крупные пиксельные стрелки курсора также плавают рядом с 3D-объектами и в сочетании с меню придают дизайну брутальный оттенок.

Henri Heymans

Для своего сайта-портфолио, сделанного в 2021 году, независимый фронтенд-разработчик Генри Хейманс выбрал в качестве центрального элемента, движущуюся текстуру из жидкого металла. Шар, похожий на планету, вращается вокруг своей оси. Его неровная зернистая поверхность течет и тает, напоминая нечто среднее между мелким песком и телевизионными помехами. Его более четкие линии напоминают плавные переходы между цветами бензиновой радуги. Сфера всегда в движении — она либо вращается вокруг своей оси, либо следует за движением курсора. Далее страница переходит к довольно обычному отображению избранных работ, поэтому сфера служит эмблемой мастерства автора, а также ярким впечатляющим объектом сайта.

Studio Push

Сочетание брутализма и жидкого металла сейчас кажется особенно модным. На самом деле это имеет смысл. Брутализм — это преувеличение и вызов, а хромированный металл, будучи не только ярким, но и зачастую трудночитаемым, идеально вписывается в общую атмосферу данного направления. Хорошим примером является международная многопрофильная студия Studio Push, расположенная в Париже. Она занимается creative coding (прим. прогрессивное творчество, принципиально новый способ передачи и сохранения мыслительной информации на гране возможностей человеческого мозга) для создания графики и типографики, стирающих все возможные границы. Главная страница представляет собой урезанный базовый макет, в котором использован простой черный текст на белом фоне. Она напоминает самые ранние, первые веб-страницы. Эта подчеркнуто брутальная эстетика контрастирует или, лучше сказать, дополнена большим логотипом студии. Он сочетает технику жидкого металла со стилем граффити, а также создает впечатление текста, созданного из густой жидкости, выдавленной из тюбика с краской. Логотип мешает чтению текста, что снижает юзабилити сайта. При нажатии в любом месте страницы пользователю предлагают открыть изображение проекта, но дальнейшее нажатие лишь открывает новые изображения, не закрывая предыдущие. В результате создается раздражающее скопление изображений и текста, дополненное рамкой с логотипом, которая не прекращает двигаться по экрану. Это дерзкий подход к дизайну, который, по сути, кричит: «Меня не волнует UX», тем не менее вызывает любопытство.

Sofia Papadoloulou

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

Заключение

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

Источник
и
:
arrow