Design
11/24/2020

The Bauhaus: How it inspired web design

Written by
Sophie King

The Staatliches Bauhaus usually referred to as Bauhaus, is undeniably the most revolutionary and influential art and design school in history. 


It would be fair to say that contemporary design* as we know it today stems from the  school which morphed into its own modern art movement. It was characterised by its unorthodox approach to art, architecture and design.  


In this article, I will discuss the core principles of the Bauhaus movement, the legacy it left behind and how their teachings are entrenched in web design today.

*Contemporary design does not refer to a certain point in time - it is constantly changing to reflect the time. It is fairly ambiguous but there are a few qualities that define it. Neutral palettes, minimalism and clean lines to name a few.


The History of The Bauhaus

Bauhaus which translates to ‘construction house’ was founded by Walter Gropius and operated in Germany between 1919 and 1933. It was a school of radical thinking and an advocate for innovative ways of problem solving. 


Throughout its time the school hosted a succession of prominent teachers including Johannes Itten, Marcel Breuer, Paul Klee, and Vassily Kandinsky. The students, who came from a diverse range of educational and social backgrounds began the curriculum with a preliminary course. Learning the core principles of design like colour theory and form. 

After immersing themselves into the Bauhaus teachings students would move into specialised workshops. This included: metalworking, weaving, pottery, typography, painting etc. 


Wassily Kandinsky, 1924, ‘Black Relationship.’ Kandinsky taught form theory. His use of colour and geometric shapes helped students understand abstraction.

So, what made the Bauhaus school so innovative? Well, it oozed internationalism and social progressiveness. But it was this forward thinking approach and the rise of the National Socialist Party which resulted in its closure for its ‘degenerate’ ideas after only 14 years. Nevertheless, the Bauhaus core principles had an impact well beyond the school itself, time and location. This was partly due to its members fleeing to Europe and the USA to continue their work independently.

What are the core ideas of The Bauhaus?


Back to basics

One of the greatest teachings that emerged from the Bauhaus movement was to recognise and understand that creative education is about more than just passing on technical knowledge and skills. 

 

By understanding the basic principles of design; colour, composition, form, typography etc we are able to connect with the fundamentals of our craft on a much deeper level.  This allows us to respond to design problems with authenticity, creativity and innovation.

Form follows function

According to this idea ‘form follows function’, designers and makers should first understand the ‘clients’ wants and needs, identifying any potential problems that may arise and then determine the aesthetics. Designing for function and purpose does not mean it has to be boring. 


Break the rules

The learning culture at The Bauhaus encouraged its students to experiment at every opportunity. It was a constant reminder that rules and conventions are there to be learned, but not always adhered to. Innovative design rises when a problem needs a radical solution that nobody but you believes in.


Mass production as art

The Bauhaus vision was to embrace technological advancements unifying art, design and technology. It saw mass production as something that could still incorporate craftsmanship. It was all about usefulness and simplicity.

 It was at this point that the school adopted the slogan “Art into Industry.”

Minimalism 

The Bauhaus moved away from the ornate and floral styles that dominated the 18th and early 19th century. Instead they favoured cleaned lines and geometric shapes. Less is more. 


Smart use of resources 

Being resourceful and economic was at the heart of the Bauhaus movement. What they wanted to achieve ‘was a controlled finance, productive time-consuming projects, precise material use and a spare space.’  In other words it was all about being smart with what resources were available. Zero waste was preferable.


Bauhaus Principles in Web Design


Visual Hierarchy

The Bauhaus always ensured it paid attention to the relationships formed between two opposites. It explained the connection between light and dark, right or left, big and small. The relationships between these elements is what creates visual hierarchy. 


Apple’s website uses scale (font weight and size) alongside colour creating a clear, and easy path which guides the users eyes to the desired action.  The blue ‘call to action’ button contrasts the monochrome palette, immediately grabbing the users attention. The white space further enhances the visual hierarchy so the user can focus on what's important.

Apples homepages

Colour Communicates

There are very few things in design that are as subjective as colour or more important. Colour conveys emotions and has the power to influence how a person may feel or the way in which they interact with something. 


Paul Klee’s (Bauhaus teacher) career was pretty much an exploration of colour theory. He investigated how the use of colour can provoke an instant reaction and change the viewers perception of what they can see.

Tempo’s use of colour is vibrant, upbeat and playful. But it serves a higher purpose than just uplifting its users. It’s a visual guide that helps users differentiate between being an employer and a potential employee. This colour cue is used consistently throughout the website making it easier for the user to quickly identify the areas that apply to them.

Tempo's homepage


Typography

Typography is not just about legibility. It is a powerful tool and when used correctly it commands attention, communicates an idea and motivates a user to take action. 


The Bauhaus movement changed the way we view typography in profound ways. Herbert Bayer created the Universal alphabet, it consisted of only lowercase letters and it became the signature typeface of the Bauhaus. It uses clear, simple, geometric shapes and is timeless, distinct and elegant. This type of letter form is known as sans serif and has become accepted as the more standardised type form.


examples of herbert bayers typeface 'Universal'
Herbert Bayer, ‘Universal.’ The inclusion of uppercase letters was deemed unnecessary as amongst other things it was a waste of time in both the production and use of typewriters.


Nurture Digital uses typography in numerous ways to enhance their brand message. The big, bold animated letters on the left-hand side are tailored and unique to each case study. It comes with its own letter design, colour scheme and animation. The page overall has quite a lot going on yet it is easily digestible because of the use of both sans and sans serif fonts which creates balance between all the different elements.

Nature Digital homepage

Grids, Grids, Grids

Grids are a common and practical tool that help designers  create balanced designs. It acts as a framework to enable you to organise graphic elements in an easy and manageable way. Wassily Kandinsky wrote extensively about how objects on a page relate to one another and how they have the ability to guide the user's eye.  You can clearly see how this has influenced his work.


varied rectangle by Wassily Kandinsky
Varied Rectangle by Wassily Kandinsky uses a grid system in conjunction with curved parallel lines to create the impression of a path leading up to something.

Grids are especially important in web design as they help designers create clarity and consistency, facilitate collaboration and responsive layouts.*

*Responsive websites change their appearance and functionality depending on the size of the device.


Cryton Trading is an excellent example of how you can create something really interesting and engaging using the grid as a guide. The grid system keeps the animations in perfect unicene as the user scrolls. The result is a fluid interesting design that communicates their point and is accessible on any device.

Cryton trading desktop homepages

Cryton Trading mobile and iPad homepage designs
Left: mobile view. Right: iPad view.

Impact

At the heart of the Bauhaus movement and modern web design are a few core principles: 

  1. Minimising design to its necessary function
  2. Making sure it's beautiful and effortless.
  3. Attention to even the smallest detail. 

For Bauhaus, this meant “art as life.” As a result everyday objects like tables and chairs became artwork. Similarly, web design has made leaps in the design of icons, menus, and device responsiveness. These elements have become essential, functional and beautiful.

The Bauhaus movement was all about function meeting form. Tomorrow’s web design promises more of the same but with even more room for empathy and emotion. Data and technology are making it possible for web designers to delight and connect with users in really interesting and innovative ways.

100 years after The Bauhaus was established we can clearly see the influence it has had on the design world today. Its iconic and timeless characteristics will probably never go out of style. 

I can’t wait to see how the Bauhaus will continue to influence and inspire artists, makers and designers for decades to come.

Image Credits

Thumbnail: Adobe Hidden Treasures: Bauhaus Dessau from behance.net

Main Banner: Bauhaus by Darya Shipilova from Dribbble


Want your name on the Mercarto blog? Write For Us

Recommended Reads

Finding Your First 100 eCommerce Customers

Download this free resource to get expert tips and advice on how you can sell more products. Learn about social strategies, PPC ads, SEO and lots more ways to get ecommerce customers.

Got questions? Let’s chat.

Maybe you want to discuss business ideas, discover more about our features, or just want to speak to a friendly human.
Whatever it is, we’re all ears.

GET IN TOUCH