The Bauhaus school was the most important influence on graphic design in the twentieth century.
Quick bit of history.
The Bauhaus school was founded by the architect Marcel Gropius in 1919. It moved from Weimar to its purpose-built home in Dessau in 1924, before being forced to close its doors by the Nazis in 1933. The school brought together many disciplines under one roof – painting, architecture, furniture design, typography – and design was given as much importance as fine art. No longer were students taught specific skills by a teacher – artists and designers worked together to develop a new way of working as well as new ways of living.
While the idea of uniting art and design had started in England with the Arts and Crafts movement as a way of reconnecting to hand-made quality of pre-industrial times, Bauhaus celebrated modern technology, and wanted to integrate design with the new industrial techniques.
The reason I want to write about Bauhaus here is it’s influence on Graphic Design.
The Printing and Advertising Workshop, which opened in the new Dessau building, was the first place dedicated to graphic design.
The ongoing Bauhaus influence can be seen in two key elements of visual design, both of which are key to beautiful website design.
Firstly, grids: the Bauhaus layouts used grids as a starting point, which is still the basis of most layouts in graphic design today. This design for bank notes by Herbert Bayer, commissioned by the State Bank of Thuringia, shows the adaptability of the grid to a real-life design.
Blocks of colour, blocks of text overlaying other blocks of text, with the largest font used for the numerical value. (Maybe not the most difficult design to forge, but then the hyper-inflation in Germany at the time made the life of a banknote pretty short.)
The flexibility of the grid can be seen in this invitation to a party for Kandinsky –
here, the grid is clear, but everything has been tilted, creating a new dynamism in the design. This technique owes much to the Russian Constructionists, illustrating the cross-fertilisation of ideas between art and design that the Bauhaus encouraged.
The second key influence is typography. Unusually, typography was taught as part of the curriculum. The school was instrumental in developing the use of sans-serif typefaces. In Bayer’s words, “Like modern machines, architecture and cinema, so too must type be an expression of our exact times.” The universal bayer typeface, designed by Bayer, with its geometric forms and lack of ornamentation, is often cited as an important Bauhaus typeface. However, it was only every developed in sketches, and never made into a typeface.
Compare this with the Kelmscott by William Morris – also celebrating the importance of design, but evoking pen and ink writing of medieval manuscripts, rather than the printing presses that were being used.
(If you are interested in reading more about typefaces and the Bauhaus, I recommend this excellent article on the True Type of the Bauhaus.)
Red and black were the dominant colours for their strong visual impact. Information was no longer arranged hierarchically on a page, but diagonally or vertically. Font sizes varied not only dramatically within one page, but also within one word. The effect is to move the eye dynamically round the page, not just left to right and top to bottom.
Bauhaus-influenced typefaces are much in evidence today, on websites and elsewhere. Futura, for example, designed in the 1920s, still has modern connotations – although, interestingly, ITC Bauhaus, which might seem like an obvious choice, was designed in 1975 (see True Type article above), and, to my eye, lacks the elegance of true Bauhaus design.
Promotional posters still pay homage to Bauhaus principles – here’s one promoting a talk by (Senator) Obama:
– this was including in a great article in Smashing Magazine showing more fantastic examples of these Bauhaus design principles. And some of the most innovative websites show clear Bauhaus influences – French design studio 923a, for example, uses different speeds for different elements to make images and text overlap as the page scrolls.