{"id":32735,"date":"2021-12-17T15:00:20","date_gmt":"2021-12-17T14:00:20","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=32735"},"modified":"2021-12-16T17:13:27","modified_gmt":"2021-12-16T16:13:27","slug":"captivating-examples-of-liquid-metal-effect-in-web-design","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/captivating-examples-of-liquid-metal-effect-in-web-design\/","title":{"rendered":"10 Captivating Examples of the Liquid Metal Effect in Web Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]There\u2019s something about liquid metal that just mesmerizes. A steady flow of silvery, viscous fluid bears a distinct ASMR quality, with its pristine, spotless surface and motion that seems to confuse our brain &#8211; metal is supposed to be solid, right? Okay, we all know there are some not so solid metals, like mercury. We also know that many types of metal can be melted into a liquid form. So we can\u2019t say it\u2019s something supernatural or uncanny, and yet, we can\u2019t take our eyes off it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Our fascination with liquid metal isn\u2019t a new thing, but it\u2019s definitely an \u201cit\u201d thing at the moment. Flat and static designs have long stepped down and surrendered the throne to weird, experimental and innovative design solutions &#8211; just think of the acid graphics revival and all the microtrends that sprouted from it. The dissemination of content on social media is moving at the speed of light, pumping in hundreds of new concepts at a head-spinning rate, delighting users but perhaps putting designers in the awkward position of always having to churn out new, exciting, boundary-pushing projects. To do this, they often reach back into past cultural and artistic traditions looking for inspiration.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One possible source of inspiration for this trend is certainly the visual tradition of science fiction. Liquid metal can be seen on quite a few book covers from the genre, especially paperbacks, where designers really used to go wild. From spaceships to cyborgs, there was a lot of glimmering iridescence of the smooth, flowing metallic surfaces. The aesthetic was soon transposed to cinema &#8211; one particularly familiar example is T-1000, the bone-chilling shapeshifting assassin from James Cameron\u2019s cult <em>Terminator 2<\/em>. The way he can turn into a puddle of liquid chrome only to assume human form again and brutally annihilate whomever is in his way remains for many the single most striking visual from the movie.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, of course, there\u2019s metal music with its array of subgenres, some of which, such as progressive metal, continue to nurture a predilection for this sort of aesthetics, which, in turn, stem from comic books and graphic novels. And let\u2019s not forget the 1990\u2019s and the obsession with speed, power and technology.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Actually managing to trace the inspiration back to its origins is almost an impossible task. As is always the case in pop culture, there has been so much borrowing, recontextualizing and reinventing of certain motifs that the pathways are too difficult to untangle. Let\u2019s return to the present moment instead.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A quick stroll around Behance looking for chrome-based design yields some remarkable results and shows that there are quite a few talented designers exploring this style. The Italian motion graphics designer <a href=\"http:\/\/www.sic-est.com\/\" target=\"_blank\" rel=\"noopener\">Sic Est<\/a>, for example, did a wonderful job with applying liquid metal textures and CGI for the <a href=\"https:\/\/www.behance.net\/gallery\/67570121\/Versace-Timeless\" target=\"_blank\" rel=\"noopener\">Versace Timeless SS18 campaign<\/a>, while the <a href=\"https:\/\/www.behance.net\/gallery\/102650451\/Beauty-Alchemist-for-Schoen-Magazine\" target=\"_blank\" rel=\"noopener\">Beauty Alchemist editorial for Sch\u00f6n! Magazine<\/a> explores liquids in the context of makeup. The liquid metal trend is so hot right now you can even get <a href=\"https:\/\/www.behance.net\/gallery\/110349061\/Chromatic-Toolkit\" target=\"_blank\" rel=\"noopener\">chromatic toolkits<\/a> to use for your next design.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Instagram is a likewise rich source of inspiration when it comes to chrometype and liquid metal effects. The #chrometype hashtag has over 77k posts, there\u2019s <a href=\"https:\/\/www.instagram.com\/chrometype\/\" target=\"_blank\" rel=\"noopener\">an account dedicated entirely to this style<\/a>, and there are, of course, liquid metal filters you can apply to your stories for a weird, futuristic or cyborgian look.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, it\u2019s worth remembering that, in the last decade or two, mainstream pop music has been the single most influential herald of visual trends and aesthetics. As artists strive to offer cutting-edge, innovative visuals accompanying their material to help build their persona in a holistic way, a lot of what we see on album covers and in music videos is immediately picked up, emulated and reworked, often finding its way down to the most mundane levels, such as Hot Topic garment items and so on. When it comes to liquid metal, we have seen it around a lot, most notably in the artwork for Lady Gaga\u2019s <a href=\"https:\/\/shop.ladygaga.com\/collections\/music\/products\/chromatica-digital-album\" target=\"_blank\" rel=\"noopener\">Chromatica<\/a>, Rosalia\u2019s single <a href=\"https:\/\/en.wikipedia.org\/wiki\/Aute_Cuture#\/media\/File:Rosal%C3%ADa_-_Aute_Cuture.png\" target=\"_blank\" rel=\"noopener\">Aute Cuture<\/a> and <a href=\"https:\/\/store.dirtyhit.co.uk\/*\/*\/Sawayama-Black-Tee\/6VPO0000000\" target=\"_blank\" rel=\"noopener\">Rina Sawayama\u2019s tour merch<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Today, however, we\u2019re going to focus on some of the most successful examples of the liquid metal and chrometype trend in web design. Here are the websites we\u2019re going to visit:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#thibaut-foussard\">Thibaut Foussard<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#lunch-concept\">Lunch Concept<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hanai-world\">Hanai World<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#walsh\">&amp;Walsh<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#yuta-kawaguchi\">Yuta Kawaguchi<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#blobmixer\">Blobmixer<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#twomuch-studio\">Twomuch Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#henri-heymans\">Henri Heymans<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#studio-push\">Studio Push<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#sofia-papadoloulou\">Sofia Papadoloulou<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"thibaut-foussard\"><\/a>Thibaut Foussard<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Thibaut-Foussard.jpg\" class=\"attachment-full size-full\" alt=\"Thibaut Foussard\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Thibaut-Foussard.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Thibaut-Foussard-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Thibaut-Foussard-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Thibaut-Foussard-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If <a href=\"https:\/\/thibautfoussard.com\/\" target=\"_blank\" rel=\"noopener\">Thibaut Foussard<\/a> doesn\u2019t move you to pursue a career in creative development, perhaps by signing up for <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-online-courses-for-creative-developers\/\">a couple of online courses for the job<\/a>, no one will. This French developer and JavaScript enthusiast created for himself a gorgeous portfolio website, a modern layout with geometric motifs and light that changes gradually, from dark to light, as we scroll down and explore the website. <strong>Thin, sharp lines and circles are counterbalanced by large, irregular drops of dark liquid metal, gently floating upwards.<\/strong> The entire page has a grainy texture, and some of the largest drops (or blobs) also have a surface that\u2019s not perfectly smooth. This texture adds depth and a life-like quality to the design and wraps it in a distinctive, cinematic atmosphere.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"lunch-concept\"><\/a>Lunch Concept<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Lunch-Concept.jpg\" class=\"attachment-full size-full\" alt=\"Lunch Concept\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Lunch-Concept.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Lunch-Concept-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Lunch-Concept-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Lunch-Concept-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A brand that we already wrote about in our exploration of <a href=\"https:\/\/qodeinteractive.com\/magazine\/innovative-typography-hero-trends\/\">innovative hero typography<\/a>, the concept store <a href=\"http:\/\/www.lunchconcept.com\" target=\"_blank\" rel=\"noopener\">Lunch Concept<\/a> opens with a stunning video section with huge metallic typography across.<strong> Despite mimicking cold, sharp metal, the type has a slight sensual quality to it<\/strong>, perhaps because of its matte texture and the curve connecting the letters L and N, or perhaps because of the underlying video that lends some of its atmosphere to the logo as well. Even more than fluidity,<strong> the matte black buff of the letters communicates tactility and texture<\/strong>, while the sharp point of the letter C adds a bit of an edge to the character. The letters look bendable and hollow on the backside, and the overall effect is a desire to touch, explore and play around with the logo.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hanai-world\"><\/a>Hanai World<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Hanai-World.jpg\" class=\"attachment-full size-full\" alt=\"Hanai World\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Hanai-World.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Hanai-World-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Hanai-World-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Hanai-World-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Marketed as a mixed reality social platform, <a href=\"https:\/\/hanaiworld.com\/\" target=\"_blank\" rel=\"noopener\">Hanai World<\/a> is set to deploy in late 2021 and is planned to involve a community of creators, developers and tech companies working together to provide synchronous physical and digital experiences, primarily in the field of entertainment. For now, the only glimpse into the platform (and the movement, as the creators call it) is the website calling for new team members, creators and developers. Judging from the design, it\u2019s going to be one modern, future-oriented environment for creatives and developers to basically compete with each other in who can deliver <strong>a more innovative experience with a heavy emphasis on aesthetics<\/strong>. The dynamic background in a pastel gradient gives off <strong>a vibe of cosmic melancholia, a mood supported by a number of objects, mostly spheres, made in liquid metal, orbiting around each other or simply floating in and out of view<\/strong>. A pair of liquid metal hands reaches out from windows to some parallel worlds, welcoming new members. The entire composition supports the idea of creating new universes within our existing one and bypassing the walls between physical and digital realms.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"walsh\"><\/a>&amp;Walsh<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Walsh.jpg\" class=\"attachment-full size-full\" alt=\"Walsh\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Walsh.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Walsh-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Walsh-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Walsh-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/andwalsh.com\/\" target=\"_blank\" rel=\"noopener\">&amp;Walsh<\/a> is a New York-based branding and advertising agency with a distinct, modern vibe and a dedicated but playful approach to work. In addition to providing an excellent illustration of the liquid metal trend, their homepage also serves as <strong>proof of how important context is in web design<\/strong>. The agency logo consists of a large metallic ampersand in calligraphic style, with matte black surface. Alone, the logo could even be perceived as classic, as it appears to be made of wrought iron. However, certain elements of the type design here, the way the logo is nested in a modern layout and, most of all, the video section underneath it all give the ampersand<strong> a more contemporary feel, and its material and texture don\u2019t feel as vintage as they would outside of this environment.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Speaking of the video section, it too represents <strong>an inspired investigation of the potential of liquid metal in design<\/strong>. The initial sequence features metallic shapes that flower and spread on a woman\u2019s face, forming the ampersand, and then cuts to a sequence representing a sea of molten metal, from which a lava-like mass emerges, then forms, again, an ampersand, which then sinks back into the fluid, releasing a cloud of vapor and smoke. It\u2019s a fine piece of branding that simultaneously shows the multifaceted nature of liquid metal, showing it doesn\u2019t always need to be high-gloss and gleaming and doesn\u2019t have to pertain to a dystopian, futuristic or high-tech narrative.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"yuta-kawaguchi\"><\/a>Yuta Kawaguchi<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Yuta-Kawaguchi.jpg\" class=\"attachment-full size-full\" alt=\"Yuta Kawaguchi\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Yuta-Kawaguchi.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Yuta-Kawaguchi-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Yuta-Kawaguchi-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Yuta-Kawaguchi-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/yutakawaguchi.com\/\" target=\"_blank\" rel=\"noopener\">Yuta Kawaguchi<\/a> is a Japanese designer with an unmistakable, edgy style. His work is known for 3D type forms that feel sharp as a knife, or perhaps a shuriken, as many of them feature forms inspired by this weapon. His designs are usually set in <strong>bold, ultra-vivid environments with soylent greens, radioactive yellows and post-atomic blues<\/strong>. The typography style borrows inspiration from the 1980\u2019s and 1990\u2019s B-production action movies and horrors, as well as from heavy metal iconography and hip-hop culture.<strong> It\u2019s a radical, loud and aggressive mix of influences,<\/strong> with each piece carried out to perfection. His liquid metal designs are particularly striking, as they have<strong> a distinct physical quality<\/strong> &#8211; they look like they could cut right through the screen, and their gleaming surfaces reflect colors that speak of dystopian times.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"blobmixer\"><\/a>Blobmixer<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Blobmixer.jpg\" class=\"attachment-full size-full\" alt=\"Blobmixer\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Blobmixer.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Blobmixer-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Blobmixer-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Blobmixer-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]14islands is a Swedish creative design and development studio with a number of major projects and awards under its belt. The studio also creates fun, interesting projects for no apparent purpose other than to delight the users and, well, showcase its team\u2019s skills. One such project is <a href=\"https:\/\/blobmixer.14islands.com\/\" target=\"_blank\" rel=\"noopener\">Blobmixer<\/a>, an online tool (or toy, if you wish) <strong>for creating 3D blob shapes which can be viewed and interacted with in VR, as well as downloaded or shared with friends<\/strong>. The tool is extremely simple and intuitive, and can be used by anyone. In addition to the tool itself, the website features a showcase of some of the best blobs made with it. Some of them feature a liquid metal texture, and one is even named after the above mentioned T-1000. Other featured materials include water, plastic, lava, slime, liquid makeup, and so on.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"twomuch-studio\"><\/a>Twomuch Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Twomuch-Studio.jpg\" class=\"attachment-full size-full\" alt=\"Twomuch Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Twomuch-Studio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Twomuch-Studio-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Twomuch-Studio-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Twomuch-Studio-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s a design that seems to be all over the place and yet in some sort of weird harmony. The <a href=\"https:\/\/twomuch.studio\/\" target=\"_blank\" rel=\"noopener\">Twomuch Studio<\/a> website opens with <strong>a cluttercore-ish mess of floating objects on a sterile white background, complete with a corner menu with what appear to be Patrick Starfish\u2019s eyes<\/strong>. The assortment of floating objects includes a few screens, some bricks, a giant pencil, a megaphone, and several objects that are hard to identify. As they turn around, their surfaces <strong>transform from plaster-like white to liquid metal, first matte, then iridescent and shiny<\/strong>. And behind all this, the barely legible metallic logo of the studio, also shifting and changing color and texture as its metallic fluid flows and swells. Oversized, pixelated cursor arrows float alongside the 3D objects, too, and combined with the menu, add a brutalist touch to the design.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"henri-heymans\"><\/a>Henri Heymans<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Henri-Heymans.jpg\" class=\"attachment-full size-full\" alt=\"Henri Heymans\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Henri-Heymans.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Henri-Heymans-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Henri-Heymans-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Henri-Heymans-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For his 2021 portfolio website, the independent front-end developer <a href=\"https:\/\/henriheymans.com\/\" target=\"_blank\" rel=\"noopener\">Henri Heymans<\/a> opted for a page centerpiece that explores movement and texture using liquid metal as the medium. A planet-like metallic orb rotates around itself in the hero section of the website as <strong>its uneven, grainy surface flows and melts, resembling something between fine sand and TV static, while its sharper lines bring to mind smooth passages between colors in a gasoline rainbow<\/strong>. The orb is never still &#8211; it\u2019s either turning around itself, or following the cursor movement. The page then proceeds to a rather conventional display of selected works, so the orb serves as an emblem of the author\u2019s skills and also as a striking opening of the website.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"studio-push\"><\/a>Studio Push<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Studio-Push.jpg\" class=\"attachment-full size-full\" alt=\"Studio Push\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Studio-Push.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Studio-Push-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Studio-Push-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Studio-Push-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/magazine\/best-examples-of-brutalism-in-web-design\/\">Brutalist design<\/a> and liquid metal seem to be a particularly hip combination right now. It actually makes sense &#8211; brutalism is about exaggeration and irreverence, and chrometype, being not only flashy but often also hard to read, fits into the ethos perfectly. The international multidisciplinary <a href=\"https:\/\/studio-push.com\/\" target=\"_blank\" rel=\"noopener\">Studio Push<\/a> from Paris, working with creative coding to create boundary-blurring graphic and typography experiences, is a good example. <strong>The homepage features a stripped-down, basic layout with essentially just plain black text on white background and gives off a raw vibe reminiscent of the earliest web pages.<\/strong> This decisively brutalist aesthetic is contrasted or, better yet, complemented, by a large marquee featuring the studio logo in chrometype, combining the liquid metal technique with the graffiti style, and also <strong>giving off an impression of text that was made by dripping thick fluid from a paint tube.<\/strong> The logo somewhat interferes with the reading of the text, and the experience becomes even more unfriendly when the text is clicked upon &#8211; clicking basically anywhere on the page prompts an image from a project to open, and further clicking opens new images without closing the previous ones. The result is an unnerving heap of images and text, complete with the logo marquee that never ceases to move across the screen. It\u2019s a cheeky approach to design that basically yells \u201cI don\u2019t care about UX\u201d but, as such, sparks curiosity and, paradoxically, a degree of appreciation.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"sofia-papadoloulou\"><\/a>Sofia Papadoloulou<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Sofia-Papadoloulou.jpg\" class=\"attachment-full size-full\" alt=\"Sofia Papadoloulou\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Sofia-Papadoloulou.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Sofia-Papadoloulou-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Sofia-Papadoloulou-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Sofia-Papadoloulou-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.sofiapapadopoulou.com\/\" target=\"_blank\" rel=\"noopener\">Sofia Papadopoulou<\/a> is a Greek visual designer and art director who creates immersive, forward-thinking digital experiences. Her website embodies one of the principles she pursues in her work &#8211; to \u201cuncomplicate and beautify.\u201d It is a dark, elegant, modern design, featuring grey text on a black background, with a single star cursor that sheds light on the text it hovers upon, revealing that, despite the darkness, the sentiment behind the design is one of optimism and joy. The central, albeit discrete element of this single-page website is <strong>an animated 3D object, an irregular sphere with a wavy surface, made of a matte black material that resembles metal, perhaps iron, but it could also be a smooth piece of lava stone<\/strong>. As we scroll down the page, the object transforms, flows, morphs under a changing light, but never does its presence or its transformation take focus away from the main content &#8211; the text.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Animated, static, chrome-like or matte, liquid metal is bound to add that extra oomph to a design. Sure, it can\u2019t possibly be a good choice for just any website and any brand &#8211; as we saw, liquid metal needs a specific context in order to work. While many would automatically associate this style with futurism, it\u2019s important to remember that at this point there\u2019s really nothing futuristic about liquid metal. Retro-futuristic, then? Sure. Future-nostalgic? Definitely. The world we\u2019re living in right now is in trouble and hauntological melancholia has been a pervading concept ever since we realized just how deep the trouble was, which accounts for so many derivative aesthetics and seemingly anachronistic references to past trends and concepts. But liquid metal in web design is more than just a nod to a cool past aesthetic. In web design, metal, or really any other matter, is free from the limitations of its physical form. It can shift, bend, drip and melt in any possible and impossible way and, as such, it\u2019s an amazing resource for designers looking to imagine, construct and direct their own vision of the future, bright or bleak.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>While the liquid metal effect or chrometype has been a pop culture staple for decades, the last couple of years saw an increased interest in the smooth, glowing, metallic effect in both graphic and web design. Join us as we explore some of the best examples of this trend<\/p>\n","protected":false},"author":3,"featured_media":32771,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,129,40,43],"class_list":["post-32735","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-effects","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=32735"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32735\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/32771"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=32735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=32735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=32735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}