Today’s article is going to be the first in new series called ‘Dial-a-Style’.In coming weeks we’re going to pick a famous ‘style’ or ‘design movement’, tell you a little about it’s history and where it fits in.

Then we’re going to try to help you incorporate that look into your web design.

Today we’re starting with Bauhaus!

Let’s go back. Waaay Back..

To understand the Bauhaus movement, it helps to know a little about the time before it.

Throughout most of recorded history, every item we used — chairs, pots, hammers, fabric — was handmade, one-by-one, by a person in a shed somewhere.

While these items weren’t always beautiful, even the simplest of items was generally, at least ruggedly functional, because each had been individually crafted and considered by it’s maker.

However, by the mid-1800’s, the industrial revolution was really getting up a head of steam — literally! — and things had changed. Volume and production speed was the name of the game.

Everyday factory-produced items became cheap and plentiful, but, to keep costs down, they were also often poorly-designed, easily-broken and unattractive.

The Arts & Crafts movement (1860-1910) was the first kick-back against this tide of poor design. Their reaction was to emphasize detailed patterning and rich, time-consuming decoration — exactly the kinds of characteristics that factory-made goods could never reproduce.

A typical Victorian-era room looks incredibly cluttered to our modern eyes — a tornado of pattern, texture and color. But at the time, it declared ‘I don’t like nasty factory goods!’.

Enter the Bauhaus

The Bauhaus was a direct response to this Arts & Crafts approach. Bauhaus asked ‘Why can’t we design cheap stuff that’s nice too?‘.

Or more to the point: Why can’t we embrace cheaper materials, and limited factory processes, and work within these limitations to make cool stuff, anyway?

Kinda sounds like Web Design, right?

To me, this is an idea that resonates very strongly with Web Design.

A lot of front-end designers come from — or are at least very aware of — the print industry. A field where we’ve known how to control every hair’s-width of paper, every glyph, every color, every fold, every cut. We had 400 years to practice.

Then Web design came along, and swept away all that control.

Until very recently, we had a strictly limited font choices, small, compressed imagery, buggy type controls, laughable layout tools.

We couldn’t even predict what size our design would be presented as — it could be any size from a sticky note to a wide-cover atlas format was possible. We had to learn to prepare for all sizes.

But, like the Bauhaus thinkers, we embraced the limitations, worked with the strengths of what we had, and made cool stuff anyway.

In fact, CSSZenGarden.com became influential in the early 2000’s by making a game out of embracing those limitations.

The Beginnings

Das Staatliche Bauhaus was founded by Walter Gropius and operated in Germany from 1919 to 1933.

The school had to change its location two times. The offices were originally set in Weimar (1919-1925) and then moved to Dessau (1925-1932). Finally, they were placed in Berlin (1932-1933) before the Bauhaus was obliged to close by a Nazi regime that believed their ideas of “good objects for the people” were socialist, and didn’t suit “the demands of the new State”.

The Bauhaus was composed by several departments such as those of industrial design, art, typography, graphic design, photography and architecture.

Its mission was to provide a new, affordable, plain and utilitarian design that could be used by every kind of person and in every area. Thus, the school had such a huge influence on the history of design and style that easily discerned to this day.

The Characters

Johannes Itten

Johannes Itten (1888-1967) was a Swiss painter, designer, and one of the several teachers of the Bauhaus school. In this innovative and open-minded sphere, he was able to publish his essay, “The Art of Color”, in which he expressed his own theory about chromatic tones. Itten believed in the importance of conveying harmony through the use of colors: for this reason, he created a 12 hue color wheel that explained how to mix hues and shades.

Moreover, he was interested in discovering a social role of colors and in understanding how tonalities could affect people’s psychology. Indeed, Itten believed that “colors are forces, radiant energies that affect us positively or negatively, whether we are aware of it or not”.

Thanks to Itten’s studies, the Bauhaus school realized the importance of colors and students were encouraged to make their own experiments with the creation of palettes.

Herbert Bayer

Herbert Bayer (1900-1985) was an Austrian-American painter, photographer and typographer. He firstly joined the Bauhaus as a student and, after some years, he was named director of the printing and advertising department.

In 1925, when Gropius instructed Bayer to create a new font, he started working on the creation of a new “Universal Typeface”. It wasn’t a typeface designed only for school appearances: Bayer actually wanted to make it useful for the whole society.

Even today, it still looks sharp and impossibly modern for it’s vintage and shows all the class Bauhaus type characteristics.

The font came together with the simplicity and linearity of geometric features and it was characterized by the lack of “serifs” and useless adornments.

Even if Bayer’s work remained incomplete, it laid the basis for the “Bauhaus” typeface, published in the second half of the 20^th century.

Wassily Kandinsky

Wassily Kandinsky (1866-1944) is a Russian painter who joined the Bauhaus in quality of teacher in 1922. He taught in design classes as well as in painting and color ones.

In 1926, he published “Point and Line to Plane”. In his book, he explains some important geometrical elements. He proposed was that a dab of color on a canvas will assume different meanings, depending on it’s position on the plane — a radical idea for it’s time.

Kandinsky also showed the belief that a good design could only arise from the mutual cooperation of forms and colors. He thought that some shapes were completed by particular colors: the dynamism of a triangle, for example, was to be accompanied by the energy of yellow. On the other hand, the circle is a dull form and should go with a calming blue.

He expanded the theory also to lines, curves and angles: acute angles needed strong colors while obtuse ones were better with mild tonalities.

László Moholy-Nagy

Moholy-Nagy (1895-1946) was a Hungarian painter and photographer who started teaching at the Bauhaus school in 1923. He used to have a unitary vision of art and he thought that every artistic work should display the influence of several disciplines such as painting, typography, architecture or sculpture.

Moreover, Moholy-Nagy was also attracted by type and by photography, as a means to study time and space. He was able to mix words and images creating the so-called ”typophoto”, which he considered to be a new way to communicate concepts and instantaneous mass messages.

Indeed he referred to it as “ the visually most exact rendering of communication” or as “the new visual literature”.

Soon, “typophoto” became very popular and it was the base for the modern idea of advertising, and designers from Paul Rand to David Carson have riffed on his ideas.

Here’s an infographic showing the history of the movement.

Nailing the Bauhaus Look

Rule #1: Form follows function

“Form follows function” is a sentence coined by Louis Sullivan, an American architect, who wanted to express the futility in excessive ornamentations, and was central to thinking in the Bauhaus school.

Indeed, the Bauhaus’s final director, Mies van der Rohe, pledged the school to “honesty of construction, death to decoration”.

Professors strived to convey the idea that form had to reflect the function of the product. They thought that no message should be sacrificed in favor of design choices. Differently artistic devices were to be used to increase the utility of the work.

Living by this credo, the Bauhaus designer realized linear and geometrical works avoiding the use of floral or curvilinear (and useless) decorations.

Rule #2: Typography Matters

One of the most important classes at the Bauhaus was typography. Indeed, several teachers soon realized the essential role of types in an effective visual communication. The Bauhaus concentrated on simplified fonts and avoided the much heavier renderings of the standard German typography of the time.

Designers started wrapping text around objects, and also learned to arrange type horizontally, vertically and even diagonally — which was not common at the time.

They also refused to combine lower and upper case types in a same work and preferred the use of sans-serif fonts.

The innovations introduced by the Bauhaus are still very effective nowadays.

In 2008, during his presidential campaign, Barack Obama visited Berlin and his speech in the city was announced by a poster very similar to those of the German school. Indeed you can see that is characterized by diagonal words and by an upper case font without serifs and by. Also, there are no pointless decorations and simple lines prevail.

Rule #3: Geometry is King

The Bauhaus showed a deep love of simple geometry — another quality that makes it a great fit for web design.

Students were well-acquainted with paintings of contemporary Cubist artists, such as Picasso and Gris, and so they adopted the similar way of looking at reality.

They started breaking down objects into their rawest geometric shapes, as they considered this technique as the best way to create new, and more modern items.

Clean, abstract and geometric forms were constantly used to produce new common tools that could highlight the difference from the old trends of the Art Nouveau. An example?

In 1925, Marcel Breuer, a member of the Bauhaus school, designed a new model of chair, later called “Wassily Chair”. It is composed by some metal tubes and by leather bands which give an idea of fluidity and flexibility.

The designer was able to realize a minimal and fluid design that lasted in years and that it is still loved today.

And Today..

identitydesigned.com

“Identity Designed” is a modern website that follows the Bauhaus style.

The site is minimal and simple in order to put the user experience in the middle of the project. The header only shows two letters, “ID”, then there is a clear menu bar that brings you inside the content.

Furthermore, following the Bauhaus trends, “Identity Designed” does not use serif or too complex typefaces.

SXSW 2014

South By Southwest’s branding has been text-centric and geometric for years, and this year’s is no exception.

The 2014 event branding uses blue triangles for the music festival, green arcs for the music festival and orange squares for the interactive component.

I wonder what Mr. Kandinsky would think?

‘Catch Me If You Can’ title sequence (2002)

There is a whole genre of recognisably 1960’s movie title design that can be traced back to Bauhaus type stylings and shape.

Bauhaus’ strong focus on text made it a favourite style for movie title sequences from the start. Most of Saul Bass’s classic 60’s title sequences (e.g. Anatomy of a Murder, North by Northwest, Vertigo) used flat color panels, jaunty block text and simple cut paper-like geometry animation.

Later movies from ‘Catch Me If You Can‘ (2002) to ‘Up In The Air’ (2009) have riffed off both Bass’s work and the earlier Bauhaus designers he was inspired by.

That’s all for today, but keep an eye out for our next ‘Nailing the Detail’ soon.