21st March, 2010

Bauhaus Ideology and the Future of Web Design

What follows is a frankly massive essay in note form. These are the notes I made to justify the aims of Bauhaus Ideology and the Future of Web Design—a presentation I did for the FOWD Tour in Leeds, September 2009. Thus, there is a vast array of ideas, conclusions and speculations with regard to the future of our industry. Take it with a pinch of salt, and think of this as a conversation, and not a manifesto.

This begins with a book

The Bauhaus book was one of probably only two or three creative books in our house when I was a kid. My Mum or Dad were not creative in the artistic sense, and they didn’t know where the book came from. They had the same lack of explanation for the “adult books” in the shed. Anyway, I put the Bauhaus book in my room and dipped in occasionally. The images inside fascinated me.

Bauhaus book
Figure 1: My first Bauhaus book.

The joys of art school

Later, I went to art school, but I didn’t receive any formal design schooling as such. Still, I learned a huge amount of art theory—the analytical, the scientific, the mathematics of composition and colour theory.

I learned a great deal about painting and sculpture. I developed an interest in architecture and furniture design. I studied the “isms”—the phases of creativity in art’s grand narrative. I discovered a little about Swiss design and the Russian school. We read some manifestos. We studied modernism.

I learned most of this indirectly, through the common virtues of materials, form, light, space, colour. On occasion however, the impact was direct, such was the impression made on me by the Bauhaus.

Recently, after dipping back into Swiss design discussions, I’ve found myself reaching a little further back to my old Bauhaus books, with a desire to see just how applicable the Bauhaus principles are to web design now, and possibly the near future.

The Bauhaus laboratory

Walter Gropius became the founder and original director of the Bauhaus, meaning “House of Building” or “Building School”. This was a man who considered beauty a basic requirement of life. He wanted to build a laboratory in order to discover a “total work of art”. One of the main objectives of the Bauhaus was to unify art, craft, and technology. Gropius called for a reform in artistic process, rather than a new style. He declared that art should be led back to its fundament and prerequisite in handicraft, where it is possible to learn how to handle materials.

The Bauhaus
Figure 2: The Bauhaus building.

Creative minds

Gropius gathered some of the most respected creative minds from across Europe. He thought that painters could bring new insight into architecture, product and graphic design, and he appointed teachers immersed in constructive, theoretical practice. There were two types of teachers; teachers for technique, and teachers for form. Theory and create. Design and develop. The cantilever chair was born out of this activity, itself a perfect combination of form and function, explored and created through the holistic approach of the Bauhaus.

Bauhaus tutors
Figure 3: Left to right: Josef Albers, Hinnerk Scheper, Georg Muche, László Moholy-Nagy, Herbert Bayer, Joost Schmidt, Walter Gropius, Marcel Breuer, Wassily Kandinsky, Paul Klee, Lyonel Feininger, Gunta Stölzl, Oskar Schlemmer.

This was the science of design in action. Students were encouraged to stop learning on paper, and to make models instead! The student would grow as an individual by taking onboard and interpreting the science of craft.

A simple approach to typography

Herbert Bayer sought to create an internationally valid and legible style of lettering with his “universal type”. These typefaces were made of as few geometric forms as possible. There were no additional weights, just a very simple sans-serif face. Bayer believed that type must be an expression of our times, like cinema, architecture and machines.

Rejecting old-style and “fancy” typefaces, the Bauhaus took inspiration from grotesque typefaces. These fresh typefaces came to be known in Germany as Akzidenz Grotesk (Akzidenz meaning everyday jobbing, worthy of commercial print).

Bauhaus type collage
Figure 4: Bauhaus type collage.

Design economy and inspiration

Bauhaus immediately inspired the Russian School, and later Swiss design, with much of the latter influencing graphic design throughout the last seventy years or so. For me, the strength is the economy of use. In classic Swiss posters, we see type elements such as bullets used as ornament, and this was also common with bold, strong lines. Simple, immediate design.

Simple economic design
Figure 5: Simple economic design.

A Bauhaus view of today’s web

So, what if web design had existed in the 1920s? Have we learned anything from Bauhaus principles with regard to web? Let’s take a punt and try to find existing Bauhaus principles within today’s responsible web design and development. These are just my own conclusions, and I’ll understand if you disagree.

1. Acknowledge the machine

While human performance may be enhanced by a sense of well-being endowed by aesthetic pleasure, machines have no such need of beauty to perform their work tirelessly. Ornament becomes an unnecessary relic, or worse, an impediment to optimal engineering design and equipment maintenance.

Our work would not exist without the machine – the computer, the mobile device. We have embraced the quirks and idiosyncracies of the machine, and recognised it as a moment in history where the computer device enables mass production of our ideas, our content, and how it encourages communities, sharing. We’ve explored the machine, and we acknowledge it’s limits, it’s problems, but we also recognise how we can exploit it further.

2. Standardise production

You’re ahead of me, right? Our industry grew at a fast rate, without a responsible attitude or serious governance. The rise of web standards by forward-thinking, worldly-wise individuals and groups has cemented our industry with an often unwritten law of best practice. The adoption of web standards. The importance of using conventions. The role of testing. Auditing. Iterating.

3. Encourage experimentation and synthesis

Naturally we have sought to improve and iterate our tools, our languages, our end results. We have learned how to mix and match and combine our tools. In the spirit of the Bauhaus, we have brought together independent tools and learned to make them work together to solve problems. HTML and CSS and the DOM. Web standards—a perfect synthesis. AJAX is another perfect synthesis. Mash-ups, RSS, manipulating data from numerous sources. This will go on forever, and we’ve no ideas how this experimentation and synthesis will evolve.

4. Form follows function

Look at our appreciation of web standards here, and how we break our websites into layers of style, content, behaviour. Look at our processes and how we analyse the need, the function. We rarely build without purpose, without taking the time to understand the need, to do research, to analyse. We aim for a complete design solution where form follows function. We seek to make visual impact without diminishing the function, the role of the website.

With this statement, we often find ornament and decoration is criticised. We strive for beauty but not at the expense of function, and we know how carelessness with ornament can ruin the user experience. The flip side is that ornament can often enhance the experience, the function. As an industry we are managing the balance very well.

Finally, we are an analytical industry. Like the modernists we are, we recognise the beauty in the industrial components of what we do. We admire grids, typographic rhythm, we salivate over code and markup. The modernists admired steel water towers, and we admire beautifully crafted JavaScript function for their simple integrity.

5. Economy and simplicity

The “Don’t make me think, make me do!” attitude.

Accessibility and usability are at the centre of our decision-making. We aim to construct meaning with economy, without confusion.

A Bauhaus view of tomorrow’s web

Next, how might we move forward and consider some of the key Bauhaus principles? This is quite a difficult act to perform, but here I’ll try and explore some of the similarities, influences and ideas that Bauhaus can give us with regard to our industry’s future. Note that some of what follows is contentious, and that I’m simply exploring ideas for a more Bauhaus-inspired web, and that this would not necessarily all be positive!

1. Honesty of construction, truth to materials

Accept perhaps that we are using binary and pixels on a machine. It is fun to experiment with handwritten type, boxes stuck on with pretend masking tape, pins stuck in things and so on. I myself have laboured over getting fake stickers and tea stains to look right in Photoshop before bringing them to my pages with CSS, but, in all honesty, who has ever managed to get a cup of tea to stick to a vertical computer screen?

This is not a reality. We’re creating a fake environment. That’s not to say that fake ornament or this level of visual experimentation is wrong, but perhaps the future of web design will better reflect the materials we use, and honestly embrace them. Think perhaps more “computer-y” interfaces and design, with more obvious use of pixels, grids, formulas, mathematics.

Perhaps the imminent threat of thousands of unsuitable typefaces hitting the web will breed a period of over-decoration that we’ll rally against in a year or two, boiling back down to the basics, to the computer, the machine, and what it’s real purpose is.

2. Develop systems

Think about the Bauhaus principle of combining the off-the-shelf with the new and creative. Modular systems were evident in architecture, and always attractive for print design and column layout.
 Kandinsky’s papers exploring compositional theory and Klee’s colour theory could be applied to more thoughtful painting and other disciplines. Arithmetical ratios always attractive to architects and graphic designers. Tools for assembling text and image and imagining a structure.

The “grid” as we might understand it in web design was not a formal concept at Bauhaus, but the theory was taking us towards it, more formally grasped by the Swiss. So, today, we consider the grid in our web design. We think about rhythm in our typography and baseline grids.

What is even more fun, is that we can be transparent about our systems, we can learn to reveal them. Importantly, we can begin to think about the “systems” we use as more holistic, made up of much more than just the mathematical foundations, but also the flexibility of colour systems, type families, extensible navigation. Our use of whitespace, light and shade, our attitudes to form and shape.

We don’t design pages, we design systems. What we build is rarely finished. We build systems that flex and grow with the client, the business, the organisation, the community. Once we have systems we understand, we can then learn to break their rules and be truly creative.

3. A holistic approach to web design

Yeah, I also hate words like “holistic”. Still, can we embrace inspiration and theory from beyond just web design. Stop reading only web design list and tutorial sites, stop visiting CSS galleries. Learn from theory. Explore other areas of inspiration. Graphic design, art, cinema, music, packaging, walking, sleeping—anything. Find ways of building your systems, your designs, your methods of navigation. We have embraced a lot of print methodology, but we must ensure what we take is applicable to the web. After all, a website is not a book, not a leaflet, not necessarily a poster.

Jason Santa Maria is a designer who explores web design from a holistic viewpoint. Jason said:

The screen brings with it different kinds of challenges for visual design, some of which occur exclusively in interactive media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design principles.

4. Mass production and individual expression

Encourage creativity and freedom of expression for designers and clients, amidst a web dominated by CMSs and templated systems, restrictive systems. We can at least begin to offer more manageable ways of arranging content for clients.

Think about how best to let them illustrate their messages and meanings through templating choices that are sensitive to the data. Think “art-directed” posts (and yes, after some brief discussion with Jason, Mark and some others, we’re comfortable with that term in certain situations).

5. Adapt and respond to our world

Can we think about light, space, colour, shape, form, science, expression? Should we build models in our search for a utopian idea of the web? Are we contradicting the “honesty of construction, truth to materials” idea, or failing to embrace the machine by exploring these ideas? I don’t think so. We can learn to balance the real world with the machine environment? Think about affordance in design. The art of using real-world techniques such as buttons, behaviours, shadows etc to create usable, easily understood interfaces.

We can also adapt to the world in terms of the way users and communities engage with the web. We currently know very little about where all of this is going, and if any one of us has a utopian idea of what the web should be, or where it should take us, then we need to think about those dreams as possible realities.

I wonder, have we forgotten to build upon the great leaps made by the plethora of crazy Flash experimental sites of the last decade? I love the creative idea of messing with the senses. Fake time, real time, computer time, mathematics, analytics, illustration, pointlessness. What can we do with that? Think like Brendan Dawes and embrace “play”.

Flash clock
Figure 6: Clockblock, via Yugop.

Can we use the rectangle in a real-world way? Bouncing type off imaginary walls. 2D is already an abstraction of the more possible 3D. Can we think about the web as a 3D medium yet? Can we explore spaces within a 2D surface, within a rectangle. Three dimensions, break the rectangle. We already break the rectangle downward and sideways – the folds and the edges. We pop-up out of it and under it.

Is HTML5 and Canvas the answer? Can we further explore and encourage the flexible, liquid web? We have this unique medium of expanding and contracting rectangles, and devices of all screen sizes! We must begin to further identify best methods for making the most of our content within fluid rectangles. Perhaps this way we might end up truly breaking the rectangle!

In conclusion

I hope that this brief run through the Bauhaus ideology and its possible influences on web design has been useful in some way. Perhaps you’ll disagree with some of my conclusions. I’m happy with that.

For me, its important to hold certain influences and beliefs and apply them to your own practice. In my opinion, much of what I love about the Bauhaus is applicable to what I’m doing now, and what I hope to be doing in the future.

View this presentation on Speakerdeck.

If you enjoyed this post, please grab the RSS feed. You can follow me on Twitter and Instagram, and subscribe to my infrequent newsletter. Thank you.


# Sylvain Ceccaldi responded on 22nd March 2010 with...

Very insightful, Thank you for sharing this, that’s golden. I’ve also been really interested in the Bauhaus since I started working as a webdesigner, that totally makes sense in your mouth.

# Liam Crean responded on 22nd March 2010 with...

Cheers Simon. Pretty interesting that. Not opened a book about modernism or the Bauhaus in years, but I think it’s time for a refresher.

# Alex Giron responded on 22nd March 2010 with...

Excellent, thanks for sharing your thoughts. I was introduced to the Bauhaus Ideology late in my web design career, but I’ve admired and followed it ever since.

# Andy Field responded on 22nd March 2010 with...

Enjoyable read. There was an interesting article in the Guardian recently about the fact that more women than men applied to join the Bauhaus when it first opened with a relevant quote at the end:

“We wanted to create living things with contemporary relevance, suitable for a new style of life. Huge potential for experimentation lay before us. It was essential to define our imaginary world, to shape our experiences through material, rhythm, proportion, colour and form.”

# laura fedrizzi responded on 22nd March 2010 with...

vale ler.

# David McNamara responded on 22nd March 2010 with...

Great post. I trained as a product design, where Bauhausian thinking was the baseline for pretty much everything, and I’ve always been please by the crossover to designing a web site as a “product”.

I think there’s probably a really interesting back story to this - the parallels between the last 200 years of industrial development and the last 10 years of development on the web.

Industrial revolution - Mosaic is the steam engine
Victorian industrial aesthetic - Tables, decoration etc.
Modernism - web standards, semantics and usability

Hmm - maybe.

# Milos responded on 22nd March 2010 with...

Very nice article about Bauhaus. Right now I just learning something for my architectural studies, and u conected it right with web design trends.

# Dan Leatherman responded on 22nd March 2010 with...

Very insightful. I think a lot of untrained people are worried about making busy designs and not living by the whole “less is more” ideology that the bauhaus was about. Awesome article.

# SJL Web Design responded on 22nd March 2010 with...

Very insightful article/essay Simon, I love how you have applied Bauhaus principles to modern web design, It has made me realise how applicable they still are. I do however feel bad for when you found the “adult books” in your parents shed!

# Todd responded on 25th March 2010 with...

How hugely progressive was this movement ! Indeed, imagine if they had the web medium at their disposal.

Great timeless principals.

# Carolyn King responded on 26th March 2010 with...

An intelligent, thoughtful article. As someone who was trained in graphic design before the Internet came along, I have always loved Bauhaus principles. “Form follows function” is always a good starting point when planning a website, but I think a lot of website owners don’t know what their website’s function is! Either that, or the function keeps changing. The “economy and simplicity” concept is often overlooked too. But as far as individual expression and adaptability goes, the web is a perfect example.

# Francisco @chycoo responded on 26th March 2010 with...

Nice presentation. I will embed at my website.

# hendra hoedojo responded on 26th March 2010 with...

Goodness ! This article is what i’ve been looking for for quite sometimes. I’m graduated as an interior designer and somewhat breathes the Bauhaus movement. But now working as an art director for web agency I’ve been searching how the Bauhaus movement or concept can be use or somehow fuel the web design. Wow !
really insightful ! Cool !

# C Coupe responded on 26th March 2010 with...

Thanks for a great article, I found it very interesting and enjoyed the way you applied Bauhaus principles to web design. You are absolutely right as per your “form follows function” that there is a fine balance between overloading a web page with decoration and giving it enough to still make it functional. If we imagine a web page as a model and build on it that way we will of course uncover many layers and principles which will perhaps help us with web design in the future.

# Pacster responded on 11th April 2010 with...

Thank you for sharing your thoughts, I’ll keep an eye on what happens on the next few years, hoping that the facts in your comparison between web-design and Bauhaus philosophy get more and more obvious each time.

# Maria Fidalgo responded on 11th April 2010 with...

Excellent article…Bauhaus keep it´s priciples alive