How Art Influenced Graphic Design and How Graphic Design Influenced Web Design

Unraveling the deep-seated connections between art history, design, and web design

We see the world through its reflections. We process reality through culture, through art, through products and their advertisement. The way we look at the world and the way we understand it has changed drastically throughout the 20th century. While the technological progress marched on, nothing else made sense. The first world war gave us dadaism, abstract art, cubism. The second led to minimalistic websites.

After the bombings of Hiroshima and Nagasaki, Japan was traumatized. The thousands of years of unique visual tradition didn’t go anywhere, but they were hardly applicable in a world that doesn’t make sense anymore. This trauma led to a complete revaluation of what the world looks like. In art, it led to things that purposefully don’t make sense, and eventually, to colorful escapism. In design, it led to mixing things up. Ikko Tanaka was one of the greatest graphic designers. Let’s take a look at his most influential work, Nihon Buyo poster from 1981:

Ikko Tanaka was world renown for his ability to grab your attention and to gravitate it towards where it’s needed. And as we see here, he was inspired by Swiss Style: succinct details, modular grids, simple composition, sans serifs fonts. This mix sounds just like something you’d want on your website.

Identifying The Culprits: The Difference Between Art And Design

To prevent any confusion, let’s quickly define what’s art and what’s design. The common misconception is that design is commercial work, and art is for the soul. We won’t name names, but there’s plenty of artists who only do it for the money, and whose work is completely creatively bankrupt. Design fulfills object goals. Graphic design is about signs and posters that are memorable and sell the product, web design is about making websites that are instinctively usable and that look good. Art doesn’t have any goal unto itself. Art might attempt to capture the collective subconscious at the time, it might show the auteur’s anguish, it might go for many lofty things, but it doesn’t have to do anything. It’s just there. Between you and me, we know that real art is oil war paintings.

After the attack. Plevna, 1877-1878, Vasily Vereshchagin

Welcome To Reality: Realism and Skeuomorphism

Web design as a medium is barely out of its infancy. It doesn’t have thousands of years of tradition, yet we need it here and we need it now. It’s catching up quickly and in doing so manages to mirror art history in a skewered way. Narcissus, 1594-1596, Michelangelo Merisi da Caravaggio, and iOS 6, 2012, Apple:

Everything starts with life as we know it. Art was realistic for most of what we consider human history. Web design by its nature couldn’t strive for realism, so it went for verisimilitude, by the way of skeuomorphism. It shows us abstract, unreal things as something tangible and familiar. Buttons look like buttons, they have material, dimensions, weight to them. A compass looks like a compass, a clock looks like a clock. But with everything going to the web, skeuomorphism grew obsolete: we’re now more familiar with virtual spaces. We’re crossing the point where we are more familiar with them than the real things. As trends cycle, it came back recently as neumorphism and glass morphism. Just the same but brand new.

microsoft.com/design/fluent

A Better Future: Bauhaus, De Stijl, Swiss Style

The utopian ideals of the postwar world of the 1920s rhyme with the cautious optimism of the early 2010s. Bauhaus school, De Stijl, suprematism, Swiss Style, all started in the 1920s, and all have greatly influenced the recent web. All of these movements are defined by the simplicity and purity of geometrical forms.

Poster by Emil Ruder, 1964

And here’s a website we’ve made for Vauban, that’s greatly inspired by Swiss Style. You can read more about our work on it here.

Yet the particular use of colors in neoplasticism and suprematism is only now getting to the web, in the form of colorblocking. The visual vocabulary of present day websites and UIs is strongly reminiscent of De Stijl, with its elementary shapes and asymmetric compositions. And now, we’re getting to the colors too.

up.com.au and Beat the Whites with the Red Wedge, El Lissitzky, 1919
ikea.com and Broadway Boogie Woogie, Piet Mondrian, 1942-1943

Minimalism and Two Brutalisms

The aftermath of World War 2 led to scaling things down. The utopian hopes smashed by worldwide carnage, it was time for simplicity. In design, it led to things like Le Corbusier’s Modulor, a scale of proportions based on human measurements. In art, the personal was stripped away, and we’ve got minimalism.

dimensions.com and Modulor, Le Corbusier

Ever since then, minimalism never left design. Yet we’ve only got minimalist web design only after the 2008 financial crisis. Now, minimalism is never going to fully leave web design: it’s a straightforward solution to the complex problem of creating a website that’s both stylish and usable.

revolut.com and IKB 191, Yves Klein, 1962

Stripping away the unnecessary also led to brutalist architecture. Function over form. The buildings are not pretty, but they are going to last. But brutalist architecture was never purposefully ugly. In web design brutalism in its purest form was only at the beginning of the web, lasting the longest with the website for Craigslist. Robin Hood Gardens by Alison and Peter Smithson and craigslist.org:

Brutalism in web design took a new form entirely: it follows not just the principles of brutalist architecture, but also our impression of it. The raw concrete. Ugly, aggressive, honest. In web, it comes as a reaction to sleek, perfect websites. It’s punk.

howilearnedtolovetheindiestry.info
en.tight.media

Art Decade: What’s Next

We’ve tried not to turn it into a long, long lecture about art and design history. There are a lot more connections there, with almost every website with a collage taking a page out of pop art, and with Barbara Kruger’s work leading to the logo of Supreme. And the online whiteboard platform Miro is named after Joan Miró, Spanish surrealist painter:

Both intentionally yet unwittingly, design follows art. And art follows history. This is how we see the world, this is how we make sense of it. If we follow the skewered reflection of art history in web design, then we can assume that the next step is conceptual art. Every website will need to have an idea behind it, and it could be represented in an unlimited number of ways. For our assumptions on what the websites will look like next, you could read our article on upcoming trends.

Don't be a stranger

Subscribe and never miss a story

Got it! Now check your email
Oops! Something went wrong while submitting the form.

Also read

Case Stories

VCV: Less Is More, A Case Story On Being Straightforward

Design articles

Digital Design Digest for December and January

Design articles

16 Things We Could Have Done To Save Our First Silicon Valley Project

Case Stories

SeamPay: Fintech With Color

embacy

Want to recieve our awesome stories?

Got it! Now check your email
Oops! Something went wrong while submitting the form.

© Embacy. 2020