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.
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.
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.
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.”
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.
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.
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.
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.
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.
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.
Grids are especially important in web design as they help designers create clarity and consistency, facilitate collaboration and responsive layouts.*
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.
At the heart of the Bauhaus movement and modern web design are a few core principles:
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.
Thumbnail: Adobe Hidden Treasures: Bauhaus Dessau from behance.net
Main Banner: Bauhaus by Darya Shipilova from Dribbble
Did you know that according to a survey, 88% of businesses are not happy with their eCommerce conversion rate? Chances are, you are not happy with yours, either. Even if you are, there’s no harm in improving it through content marketing, right? An eCommerce site relies entirely on conversions. Traffic is essential, but ultimately you need it to convert into sales. On its own, traffic is pointless, regardless of how many people visit the site.Read More
With over 2 billion digital buyers in the world in 2020, the opportunity for building a thriving online ecommerce store has never been greater. Although on the flip side, competition continues to grow, with around 12 to 24 million ecommerce sites in the world.‘How am I going to stand out?’ ‘Why would shoppers buy from my store over a direct competitor?’These may be the concerns when setting up your online store, and they’re perfectly justified concerns. In this article we’re going to dive into the simplest ways your brand can outperform competitors and provide an unforgettable experience for your customers.Read More
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.