{"id":1365,"date":"2019-08-28T15:00:43","date_gmt":"2019-08-28T13:00:43","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=1365"},"modified":"2020-08-02T00:56:00","modified_gmt":"2020-08-01T22:56:00","slug":"web-design-meets-contemporary-art","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/web-design-meets-contemporary-art\/","title":{"rendered":"12 Cases Where Web Design Meets Contemporary Art"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]A website can be so much more than just a showcase of what you do. It can become a piece of art in itself<\/strong>. When this is achieved, extraordinary things can happen.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this selection, we’ve uncovered distinctive websites that blur the line between a practical, presentational website and the art they are presenting, websites that themselves become one with the art in terms of coloring, innovation, interaction, style and topics.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Here are our 12 picks, enjoy! [\/vc_column_text][vc_empty_space height=”68px”][vc_column_text]<\/p>\n

1. Next Level Fairs<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]For our first example, we picked Next Level Fairs<\/a>, the presentation by the Russian design company and collective Geex Arts<\/strong>. The company chose the long scrolling site structure to illustrate some of their approaches to web design for galleries, museums and art collections. The combination of playful layouts, color and typography choices, subtle effects like parallax and a variety of interactive experiences, creates a healthy dose of whimsy that, however, never overshadows the artwork itself. That way, the collective manages to create a\u00a0functional presentation that successfully blends art history with the modern approach to web<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

2. Art4GlobalGoals<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Our next example, #Art4globalgoals<\/strong><\/a>, managed not only to unite artistic ideas with the web, but also to join them into one integral entity. Here we can see how the web, as a platform, can be used as a gallery space for this (web)site-specific art<\/strong>, so to speak.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The interactive exhibition is divided into 17 units, specifically \u201c17 global goals for a better world by 2030,\u201d as defined by the world leaders at the 2015 United Nations General Assembly session. The artist hints to each of the goals, such as \u201cNo Poverty,\u201d \u201cZero Hunger\u201d and \u201cGender Equality,\u201d that the visitor has to reveal through an interactive approach – using the mouse to mimic brush strokes, referring to the nature of the artwork itself.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

3. Frans Hals Museum<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The main collection of the Frans Hals Museum<\/strong><\/a> consists of artwork by the famous 17th-century artist after which the museum was named. The museum website is an example proving that the presentation can be playful in a way that doesn\u2019t necessarily have to be directly related to the content itself<\/strong>. Here, we notice a palette that remains consistent throughout the entire product experience. Combined with photography, typography and animation, it constitutes the character and the vibe of the website and a truly unique user experience.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

4. Man-Made Disaster<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Man-Made Disaster<\/strong><\/a> is an exciting online group exhibition of 30 female and non-binary artists. Feminist in its essence, the exhibition is witty and humorous, but there is also a certain undertone of anger, sadness and hope, as the artists demonstrate the way in which the patriarchy is not only detrimental for culture, but for the environment too<\/strong>. The website itself has a brutalist tone, which is a reasonable choice, considering the exhibition includes a great number of artists with completely different sensibilities.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

5. Viennese Modernism<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Viennese Modernism<\/strong><\/a> is a website created in honor of the 100th anniversary of the death of four great Viennese artists – Gustav Klimt, Egon Schiele, Otto Wagner and Koloman Moser<\/strong>. The design and the atmosphere are inspired by the famous Wiener Werkst\u00e4tte (Vienna Workshop) which used to bring together artists working in architecture, design, fashion, furniture, fine and applied arts and which was characterized by a minimalist and spacious layout.[\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”creative-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

6. Studio Job<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The work of Studio Job<\/strong><\/a> is characterized by a distinct style representing a combination of classical, popular and contemporary design, visual art and sculpture. The artists refer to their own work as high-end kitsch<\/strong><\/em>, and the website enacts that designation rather closely. The brutalist approach, strong color palette, bold typography, animation, goofy cursors and icons, complete with photography, are employed synergically to create a whole that is completely reflective of the entire Studio Job opus.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

7. Mariano Pascual<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The website of the artist, illustrator and designer Mariano Pascual<\/strong><\/a> is a piece of art by itself, with the same unique poetics that can be seen in all of Pascual\u2019s work. Playfulness, ironic interpretation of shapes and vibrant colors are the main features of the Argentine\u2019s art. By mixing abstract and figurative elements with geometric and organic structures, the artist creates scenes that escape reality.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The website is an interactive, whimsical portal into his world, mimicking a working area, in this case, the \u201cMariano Pascual Operating System,\u201d with a full dock of apps at the bottom of the screen. The website also features a toolbar, a real-time clock and a not-so-real-time battery, all of which is designed in the artist\u2019s unique style.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The main asset of this website lies in its immediate effect and in the speed of communication<\/strong>. The website also features a \u201csettings tool\u201d which the visitors can use to change the page background, set it to full screen, set the brightness, zoom in and so on, allowing the visitors to give the website their own meaning<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

8. Shantel Martin<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Shantel Martin<\/strong><\/a> is an artist best known for her cartoon-like black and white linear drawings<\/strong> filled with creatures, characters and messages. Her work bridges the gap between fine art and commercialism<\/strong> and is instantly recognizable. The palette of the website is achromatic, the fonts are bold and the whole site is both uncomplicated and playful, just like Martin\u2019s art. The website structure is actually a drawing across which the artist is lying, alongside text, as the words are always present in her art. In this case, the text includes standard web terms like work<\/em>, news<\/em>, info<\/em>, shop<\/em>. There\u2019s even a small Easter egg – the word Play<\/em>, when clicked, allows the user to set the dynamics of the background animation, making it stronger, slower, etc. Keen-eyed visitors will also notice that the entire website was inspired by the famous photo of Keith Haring (Martin\u2019s major inspiration), taken by Annie Leibovitz<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

9. Blu<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The street artist Blu<\/strong><\/a> often addresses modern-day political events in his murals and, like many street artists, begins his creative process by sketching the ideas down on a piece of paper. Therefore, the decision to make a website designed like an actual sketchbook<\/strong> is logical, although still unusual. Here, you\u2019ll find all the information about the artist, as well as his works, news, shop and videos. Hand-written text, color choices and the website\u2019s architecture convey a sense of intimacy, like we\u2019re really flipping through one of his sketchbooks.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

10. Anish Kappor<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Just like his art, Anish Kappor<\/strong><\/a>\u2019s website is fresh, simple and conceptually cunning<\/strong>. Consisting of lines of text, one after the other, and literally nothing else, the website is initially difficult to make out. It is only when we hover over a piece of text, or click on it, that we discover whether the whole thing is an art piece, a thought experiment, a link or basic text. Seemingly confusing in its stubborn minimalism, the interface, however, soon presents itself to the visitor and becomes as clear as the day, as if the whole idea was a play on simplicity and clarity<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

11. Henry Hargreaves<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Henry Hargreaves<\/strong><\/a> is an artist and photographer with a particular interest in food. One of his most famous pieces is No Seconds<\/em>, a project consisting of photos of death row convicts\u2019 last meals before the execution<\/strong>. After exposing ourselves to his art, we find ourselves meditating over the obvious paradox of overconsumption we are all living in. The website itself, saturated with photography, emphasizes the phenomenon of overconsumption<\/strong> even further, while the use of grid and the distribution of different parts constitutes a perfect reflection of the artist\u2019s ideas.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

12. Wim Delvoye<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The website of the neo-conceptual multimedia artist Wim Delvoye<\/strong><\/a> is one big Sim City<\/em> reference<\/strong>. \u201cWim City\u201d invites the visitor to explore the portfolio like he would explore the city. Clicking on the cathedral, the farm or the football field, you display relevant pieces from the artist\u2019s opus, which correlate closely to the buildings representing them. The website is a striking mix of high-brow and low-brow aesthetics<\/strong>, of technology and art that confers Delvoye\u2019s unique worldview.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Final Thoughts<\/h2>\n

[\/vc_column_text][vc_column_text]The power of web design lies in the fact that there is so much that can be done with it<\/strong>. Moving beyond the purely functional or informational nature of a website, entering the realm of pure art and creating a precious amalgamation of the two media – that\u2019s where the real creative magic happens. Let these 12 brilliant websites serve as an inspiration for pushing your own boundaries<\/strong> and exploring the potential of the web.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

The times when websites served a strictly practical, informational purpose are long gone. Nowadays, it’s not uncommon to see websites so beautifully designed they represent actual works of contemporary art in and by themselves. <\/p>\n","protected":false},"author":262,"featured_media":1386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40],"class_list":["post-1365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/1365","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\/262"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=1365"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/1365\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/1386"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=1365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=1365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=1365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}