The Bauhaus Effect in Modern Web Design

The Bauhaus Effect in Modern Web Design

A Guest Post by Ve’s Director of Art, Anthony Lewis

When technology gave us the smartphone, it brought with it mobile browsing. And let’s face it, we’re all at it. With instant internet-access in our pockets, we expect to be able to view websites on our phones and to have a smooth user experience. These demands have caused an evolution in the world of web design.

If fixed widths and the image-heavy decorations of skeuomorphism were the web design equivalent of the dinosaurs, responsive design and flat design were the feathers and wings that turned these lumbering beasts into soaring birds.

I know what you’re thinking… where’s this going?

Well, we’re going back to school. A German Art School in fact. The Bauhaus. Many of the core principles behind responsive and flat design are actually reminiscent of the fundamental teachings of Bauhaus. So let’s get started.

The “House of Construction”, where industrial meets Art

The Bauhaus, founded in 1919 by Walter Gropius, literally translates to ‘house of construction’. Its teachings were a direct response to the overly-decorated designs of the Arts & Crafts movement (1860-1910), which was itself a response to the earlier Industrial Revolution – where volume and speed of production was the priority.

This new way of thinking aimed to combine the two. Fine Art merged with Industrial Design.  The result was a design ethos that had a lasting impact in both Europe and the United States, long after the school closed.

Here I’ll walk through some of the principles that formed the Bauhaus design ethos and see how they relate to the modern approach to web design.

Form follows function

A phrase adopted and championed by the Bauhaus faculty, professors taught that form had to enhance and reflect the function of the product. The strength of the message should not be sacrificed to accommodate design choices. Patterns and floral decorations were abandoned in favour of linear and geometric devices. This clearly mirrors the web’s move from clunky background-images and fixed width websites to lightweight and responsive CSS-based layouts. In truth, anything that is well-designed follows this rule.

The genius of geometry

Students at The Bauhaus were taught to look at reality in the same way as Cubist artists like Picasso and Braque. By deconstructing objects into their rawest geometric shapes, they believed there was perfection and efficiency in geometry.

This relates directly to flat design and the efficiency it allows when designing and developing for multiple devices and platforms.

The importance of typography

Several teachers at the Bauhaus realised the importance of typography and its role in visual communication.  Herbert Bayer was tasked with creating a universal typeface with an emphasis on legibility, inventing the Universal Alphabet, which influenced Paul Renner, who then designed the Futura font.  Simple and bold replaced ornate and stylised.

What became known as The New Typography Movement grew out of the Bauhaus.  Founded by alumnus Jan Tschichold, the group was organised around the following principles:

  • Asymmetric balance of elements
  • Content designed by hierarchy
  • Intentional white space utilisation
  • Sans serif typography

These four points sum up the way in which text is used on any well designed website today. How different would Facebook or Twitter look if all the text were in uppercase with serifs?

Fusing words and images

A Bauhaus teacher and Hungarian painter, László Moholy-Nagy created the so-called concept of ‘typo-photo’, by which he meant the synthesis of typography and photography.  This is often credited as the beginning of what we now consider to be graphic design.

Moholy-Nagy referred to it as:

“The visually most exact rendering of communication.”"The visually most exact rendering of communication."

Today, we see this everywhere in advertising.

At this point it’s also worth noting that Bauhaus collaborator, Otto Neurath created the Isotype (International System of Typographic Picture Education) movement – a method of showing social, technological, biological and historical connections in pictorial form. It’s easy to see how this has become what we now know as the infographic.

Complementary colours

Sir Isaac Newton may have invented the original colour wheel, but it was one of Bauhaus’s core members, Johannes Itten, who created the 12 hue colour wheel that explained how to mix hues and shades.  Adobe Color CC anyone? How about Canva?

Itten also pioneered the idea that colours have a social role.  He was fascinated by how colour can affect a viewer’s psychology:

“Colours are forces, radiant energies that affect us positively or negatively, whether we are aware of it or not.”"Colours are forces, radiant energies that affect us positively or negatively"

This is a principle now ingrained in all areas of design and branding.

The connection between colour and shape

Wassily Kandinsky, one of the school’s most prominent teachers, proposed that colour and shape are intrinsically linked.  His belief was that certain shapes and colours complemented each other and communicated a specific idea and emotion to the viewer when combined.  You can try the Kandinsky Questionnaire here. Think of how many times you’ve filled in an online form and submitted the information by clicking a friendly lozenge-shaped green button, positively urging you to press it. It’s Kandinsky’s theory in action.

Collaboration across disciplines

Bauhaus brought together artists and designers from many different disciplines.  The founder of the school, Walter Gropius, was himself an architect.  The teachers were all prominent figures in their respective fields, but it was through collaboration that they made their greatest achievements.

And the same can be seen in Web Design today. Problems are discussed and solved, ideas are shared and trends are set. The Internet is a showcase for talent and inspiration.

“Designed technology for a better life.”"Designed technology for a better life."

This is said to be a central Bauhaus concept.  Notice how it also sounds like something from an Apple marketing campaign? Interestingly, Steve Jobs is said to have attended the 1981 International Design Conference in Colorado, where he was exposed to the clean and functional approach of the Bauhaus movement in the buildings and décor of the Aspen Institute campus.  I think it’s fair to say this influence can be seen throughout Apple’s approach to design.

As I’m reminded of another maxim preached by The Bauhaus, I’ll end this blog here.  After all, ‘less is more’.

Ready to inject some of The Bauhaus principles into your website? Start by downloading our eBook for a guide to creating high converting landing pages.

Website Optimisation


A marketer's guide to

high converting landing pages. Discover how to create sales ready pages.

Download now
The Marketer's Guide to High Converting Landing Pages

Posted by Ellie Hubble

Ellie is a Content Manager and spends her time reading, writing and getting excited about all things UX, digital and technology.