Form follows function.
Simplicity and accessibility in design.
A return to the basics of craftsmanship.

These ideas guided a design revolution. You’re probably thinking about User Experience, but in fact these philosophies were popularized almost a century earlier, defining the Bauhaus movement. Bauhaus was founded by the German architect Walter Gropius in 1919 as a school of art, architecture and design. The name Bauhaus, or “house of construction,” comes from the school’s building which the school viewed as the epitome of their shared principles: its rooms unadorned, its construction prominent, every detail a matter of function, down to the doorknobs. Architecture, art, and manufacturing were finally wed.

Today’s web design owes an unusual amount of debt to Bauhaus. Because websites not only need to look great, but also function smoothly, Bauhaus is the ideal guiding principle for web design. Looking into the history of the Bauhaus movement not only yields a century of inspiration, it also clues us into future directions of UX design.

The Influence of the Bauhaus on Typography

The simplistic ideals of Bauhaus have had a profound influence on typography. The letterforms can be summed up as very logical, clear, and concise, and are comprised of geometric shapes: rectangles, semicircles, and triangles. The clean lines are distinct, and the elegance and timelessness have inspired countless fonts.

typography

The Met calls Bauhaus an institution, this is at least in part due to these craftsmen also being pioneering madmen branding themselves as avant-garde. They believed that “sans serifs were indispensable for three reasons: first, it was the only type capable of expressing the spirit of the machine age; second, sans serifs lacked any nationalist associations, so it could serve as a unifying force in the post-war era; and third, its simple clarity and impersonal character were the best match for photography—hence typophoto.”

This belief led to the enduring Bauhaus legacy of the un-serifed and clean “Universal Type” font developed by Herbert Bayer “as both an empirical means of communication and artistic expression, with visual clarity stressed above all.” Like an engineer or architect, Bayer developed the type using only the compass, T-square, and triangle. It was a pragmatic response to traditional (read: highly embellished) German script. Today it’s called, well, Bauhaus, and its versions are basically everywhere. 

Don’t believe me? Check out these logos: SyFy, PlaymobilABCPepsi, and Swatch.

Bauhaus for a Better Web

The impact of the Bauhaus teachings transcend across multiple mediums, not least of which is painting. Steeped in the principles of composition, color theory, and craftsmanship, innovative painters like Paul Klee and Wassily Kandinsky set the stage for the Bauhaus painting movement, and web designers have found inspiration in it. Below, French design studio 923a unleashes its inner Bauhaus in colorful mosaic designs reminiscent of typical Bauhaus paintings.

image923a

image2

Japan’s Donguri music page is in tune with Kandinsky’s famous Composition VII.

imageDGM

imageCompvii

Microsoft: A Mainstream Example

Microsoft’s Metro, integrating a typography-based language, takes its cues from Bauhaus. The idea is to implement an extremely navigable language-based interface, similar to those used in public transportation. The sleek, bare-bones interface puts content before all else, and gets away from HTML5 and CSS3 frills. While Metro is identifiable by the typography, the touch-and-tile UI and movement is also very reminiscent of Bauhaus.

metro1

 Microsoft’s design philosophy page does not try to conceal the Bauhaus influence:

“The philosophy of Microsoft design is exemplified by clean, uncluttered app screens that operate quickly, minimize typing, and automatically notify you of new and updated info. The user interacts with the content, rather than with controls that represent the content. And visual elements have great fit and finish.”

In fact, they kind of flaunt it:

“At the heart of the Bauhaus philosophy is stripping away superfluous decorations to focus on the essence of the functional. There are many parallels in today’s computing world …. When Sam Moreau, design director for Windows, says, ‘The content is the interface,’ he’s channeling his inner Bauhaus.”

The designers that put Microsoft’s Metro UI into action are behind a big change in web interface, getting away from features that distract from content and designing nearer the spirit of Bauhaus.

The Modern Web IS Bauhaus

Unification of art, craft, and technology is a common theme in the Bauhaus movement. It was founded with the idea of creating a “total” work of art in which all arts, including architecture, would eventually be brought together. The web does just that, and operates at an optimal level when all of those pieces culminate in a user experience.

That said, the surface of web optimization would not even be scratched without applying the foundational theme of function. It’s what all other facets build upon. Websites should be visually compelling, but more importantly, they need to have good bones and they need to be practical. After all, great design isn’t just about the visuals.

Similarly, designing on “the grid” is a creative constraint that improves the overall user experience by allowing websites and applications to smoothly adapt to the device on which they are being used. This is a demonstration of form following function that seamlessly integrates to become something entirely new.

Today’s web is a place where anyone with access to an internet connection can create their own portal to the world to share their ideas. Like architects who learned from others before them, anyone willing can learn how to code (even a homeless guy) and create applications using a variety of frameworks and tools such as Bootstrap, jQuery, and RSS. A Bauhaus-inspired web designer will look beyond their computer monitor for inspiration on how to make the web a better place.

Where We’re Headed

Today’s web design is a Bauhaus renaissance. At the heart of the Bauhaus and responsive UX movements are a few core elements: reducing design to necessary function, making it beautiful and effortless, as well as crafting every small detail. For Bauhaus, this meant “art as life,” and as a result everyday objects like chairs and dinnerware became art; similarly, web design has made leaps in the design of icons, menus, and typography, things once commonplace and universally bland became beautifully functional.

The Bauhaus movement is all about utility meeting form. Tomorrow’s web promises more of the same but with more room for emotion and empathy. Data and technology make it possible for web designers to delight and connect with users in really smart ways.

If we’re lucky, a Bauhaus-inspired and user friendly web is where we are headed.

Comments