In this post, we’ll explore the principles of the Bauhaus and how they can be used to inform modern web, software and product design. We will examine products and designs that we interact with every day, and discuss how their design influences their use and how we can take these learnings and apply them to digital products and services.
51. engineer$ [ok] 4 of 4 tests passed. 0 failed.
This product:
● Holds 8oz hot liquid
● Prevents burns
● Can be lifted from any angle
● Handles well
52. engineer$ [ok] 11 of 11 tests passed. 0 failed.
This product:
● Lists products
● Sorted by latest date first
● Shows star ratings
● Enables search
● Enables pagination
● Displays date
● Displays title
● Displays location
● Displays link to photos
● Displays link to maps
● Displays delete button
53. login
username
password
Open a Checking Account
Get the convenience of mobile
banking paired with security features
of a debit card
Banking
Credit Cards
Loans
Learning
More Services
Find Location
Investments
Customer Service
zipcode
get started
Editor's Notes
Good afternoon. Thanks for coming out today. I’m Josh. I’m the largest Senior Software Engineer here at Skookum. It’s true. You might be asking yourself, “Why is an Engineer giving a talk about Design?” Well, you’re not alone, some of my peers here have asked the exact same question. So, here’s a little bit more about me:
My education and background is not in Engineering or Software or Information Systems, but rather in Fine Art and Design. After graduating High School I spent a year working with a printmaker and painter, then I went to study the equally lucrative professions of painting, sculpting and philosophy at a University before transferring to Art School and studying Design.
I spent time while in school working alongside an Environmental Artist, spent a couple of years working in print shops, and then as a full-time print designer before moving into technology full-time in 1997.
I had always dabbled in programming, but never considered it as a profession until I realized that being a poor artist sounds much more romantic than it actually plays out to be. Somewhere along that timeline I met and married a young woman who is also an artist, and together we decided that one of us needed a real job.
So, here I am today, talking to you all about the intersection of two of my passions: design and technology.
This is where I’m supposed to insert a joke, but it’s really hard to find a good joke about the Bauhaus. So instead I’m going to tell a Dadaist joke. If you don’t know what Dadaism is it’s ok, we’re going to learn that today too, but for you all this joke won’t be at all funny until later. Here goes:
There are 5 major art movements that are relevant to modern design: Neoclassicism, Art Nouveau, Art Deco, Bauhaus and Dadaism. Each of these styles has had a major impact on modern society and each are instantly recognizable once you know their hallmarks and traits.
Directly influenced by the classical art of the Greeks and Romans
A return to Romanticism and Romantic ideals
Accessible and appealing to the middle-class of Europe
Vignettes, Classical themes, Realism
Examples: Architecture of National Monuments & Buildings, Donald Trump, your rich grandma’s house
Brought a more stylized approach than Neoclassicism
Inspired by natural forms, plants, vines, etc.
Introduced the idea of logos and brand marks
Examples: Alphonse Mucha, the inventor of the logo and Toulouse Lautrec, Turn-of-the-Century Paris
A modernist / futurist movement
Can be seen throughout American landscape in the early 20th century.
Streamlined and highly stylized finials, fins and flourish - lots of superfluous little adornments
Art Deco was what people at the turn of the century thought the future would look like
Examples: Empire State Building, The Great Gatsby, Metropolis, Batman and Superman
Reaction to the complete destruction of Europe
A visual representation of Existentialism and Absurdism
Introduced a complete destruction of form and rules; Found Art
Major forms such as Abstract Expressionism, Cubism, Assemblage
Most modern movies, non-linear writing, plays, etc. are all examples of Dadaism
Examples: Marcel Duchamp, Found Object Art, Punk Rock, David Carson & Grunge Art, Waiting for Godot (Play by Samuel Beckett)
A contemporary of Art Deco and Dadaism, followed Art Nouveau.
Positive, healthy reaction to the complete destruction of Europe
Geometric shapes and typography; mixed media; Photo montage
Examples: Basically everything you see around you today. Herman Miller Furniture, modern logos, print ads, Apple products, etc.
Once you have an understanding of these major movements and start to look at examples, the influence of the Bauhaus on our modern world, our gadgets, our environments, our architecture, our grid-based cities and every other geometric experience we engage in each day is quite clear.
So, let’s take a deeper look at that movement, and try to understand how we can learn from its principles and apply them to our ever-changing world of technology products and services.
Not much positive came out of Germany in the early 20th century, particularly from an ideological perspective. Between 1914 and 1918, while America was on the cusp of the Jazz Era and the American Renaissance, the Germans were starting to make plans to get handsy with everyone who didn’t follow their corporate style guide. While the political history of early 20th century Germany has been well documented, there was another influential movement brewing in Germany that would have a deeper, more lasting, and profoundly more positive impact on the World.
In Weimar around 1919 The Bauhaus, a school of art and design, opened its doors to students. The Bauhaus was founded by artists and designers who were emboldened by the recent (albeit temporary) death of censorship and extreme right-wing policies. These principles of design were direct reactions to the destruction brought about by the first World War.
The Bauhaus, which roughly translates to “school of building” (construction house) embraced a style of design that put form and function on equal levels and that introduced the idea of multi-disciplinary creators working alongside one another to create harmonious and user-friendly experiences.
Prior to the Bauhaus, artisans tended to focus on a single craft and the juxtaposition of materials was uncommon. If you look at buildings, furniture, transport, clothes, household implements and the like from 19th century Europe and early 20th century America you’ll see a stark contrast between the ornamental style of that era and the sleek, minimalist mid-century and modern styles that came about as the result of the influence of the Bauhaus.
We’ve all heard either formally or informally the phrase “Form Follows Function” - a phrase that is often attributed (though inappropriately) to the Bauhaus. That phrase is well known, but is often misrepresented as meaning that appearance is secondary to functionality.
A literal interpretation of “follows” is the critical mistake that is so often made; the idea is not that form is only considered after functionality, but rather that form is bound to functionality, or to use modern buzzwords, simply: “function informs design”.
Today, in technology and the web-space, we refer to this as “usability”. Using the principles of the Bauhaus, we could say that appearance should enforce usability, which admittedly is far less catchy.
Today this doesn’t sound like a radical idea, but in 1919, at the height of the Art Deco movement, and on the tail end of the Art Nouveau movement, the idea that appearance and functionality would be equal or tightly coupled was radical.
In fact, it was so radical that it was considered subversive by the Right-Wing Nationalists coming into power, resulting in The Bauhaus closing and moving locations several times before ultimately closing its doors after only eleven years. One of the more radical ideas of The Bauhaus was the idea that women could contribute to the arts, construction and design in the same way as men. (Crazy, huh?)
At the time art and design were still major forms of communication and social commentary. Before television, the popularization and mass-availability of radio and other forms of entertainment, art was as socially relevant as the printed word.
Visual language was well understood by most people in society, and the craftspeople who embellished and adorned every day objects were well regarded members of society.
To reduce objects to their bare essentials, to remove adornments, was a step backward for a society that valued painstakingly accurate craftsmanship.
However, as with most revolutionary ideas, the time was right for The Bauhaus. Post-War Germany (and most of Europe) was in the process of rebuilding.
People recovering from the shock and devastation of war needed things and they needed them quickly and in large quantities. Mass production of goods was made easier by simplifying the design and by removing scrolls, fretwork and finials that were hallmarks of pre-war goods.
Cities were easier to rebuild if laid out on a grid. Buildings went up faster when they were simple, rectangular and minimally adorned. Furniture was more easily crafted and assembled if it was square, straight and consistent.
Simply put, The Bauhaus movement, however subversive it seemed, was precisely what people needed in order to get back to their lives.
There were still holdouts and the Art Deco movement maintained traction, particularly with the wealthy and with governments who still wished to maintain their regal appearance, but the current had changed direction.
Then the Second World War happened, bringing greater destruction to the European continent. Many who had suffered through the first war, including the wealthy, simply wanted to rebuild.
Principles of the now defunct Bauhaus, which had been adopted by the Swiss and other Scandinavian nations, reached peak adoption. People returned to factories to produce goods in mass quantities and the design was markedly changed.
Indeed The Bauhaus and the devastation of two major World Wars changed the course of design forever.
Today we live in rectangular houses, we drive on rectangular roads, we sleep on rectangular beds, and we carry rectangular phones that contain rectangular circuit boards with circuitry that runs in straight or angled lines along a grid.
It’s not hyperbole to say that The Bauhaus literally shaped the way that we live our lives today, despite only surviving for slightly more than a decade.
So this is supposed to be about technology, and we’re now pretty deep into an Art History lesson. How does any of this apply to technologists and people in the business of delivering technical products and services to users? Let’s get back to the “misinterpreted” phrase touched on earlier. Modern technology products, by and large, suffer from an adherence to this misinterpretation: that form follows function. Products that we use today are, to a large extent, designed to accomplish a task without much thought to the form or the usability of the tool. Let’s stick with our “Germany” theme and take as an example the 2003 BMW 325i.
Bavarians are known for creating solid automobiles that stand the test of time, perform well and are easily maintained. However, the 2003 325i has a significant design flaw: it requires fuel and it requires a person to manually input it. On the back, passenger side quarter panel, there’s a postcard-sized groove visible in an otherwise sleek sheet of metal. There is no button, no indentation, and no protrusion present. Inside the car, there’s no release lever conveniently located near the driver’s console, door or lower-dash. Instead the operator fumbles around trying to pull the door open, searching the interior for the lever and finally consulting the manual to discover that all you have to do is gently press the damn door and it magically opens. There is no visible cue to the user, there’s no text to explain the operation of the door, it’s a hidden feature that requires esoteric knowledge to operate, and it’s one of the most important things you need to know in order to operate the vehicle.
Obviously a lot of thought went into the design of this vehicle, and this feature in particular, but it suffers from the same usability problem that the vast majority of websites suffer from: its operation is only understood by the designers and engineers who created it. From an engineering perspective, there is absolutely no need for a handle, a protrusion or any visual cue as to how this door works. Those would all be superfluous and would detract from the sleek appearance of the automobile. Just like the hamburger menu on your website, people eventually figure out how it works and they recognize the pattern elsewhere and it becomes natural, but training users to understand poor UX is not a design strategy - at least not a good one.
This is the same flaw that a vast majority of software products suffer from. No, your website doesn’t have a hidden gas door, but it does have a digital equivalent:
The Hamburger Menu. Wait, wrong slide. I mean, this is a hamburger menu, but this one is just fine. This is actually a Bauhaus masterpiece.
The Hamburger Menu. Invented some time ago for the Xerox Star (an early gui-based computer system), the hamburger menu is a perfect example of a Bauhaus design that completely missed the mark. Some will argue, and in fact I did as well (pretty vehemently), that there are a large number of visual symbols that people have come to recognize, regardless of language and cultural differences, as having a single meaning. For example, the universal symbol for “bathrooms” or “restaurants” or “hospital” are all images that can stand alone and that are instantly recognizable.
This didn’t happen by chance. The AIGA (American Institute of Graphic Arts) developed a system of iconography and pictograms that are used throughout the world. These symbols are part of our collective visual language and are more or less universally understood. These symbols were launched in 1979, in conjunction with the US DOT specifically to guide travellers in airports, train stations, bus depots, etc. without requiring the traveller to know English. Our hamburger menu was not as painstakingly designed, it’s introduction en masse was sudden, and it still confuses a large percentage of users. In time its meaning may (and likely will) be more widely understood, but in the short term we do our users a disservice by not providing secondary explanation. In fact, the same case can be made for any iconography or images used in a technical product. Symbols without accompanying text should be avoided in favor of usability.
The Noun Project (thenounproject.com)
There’s even an npm package
Lest you think this is just a “Josh hates hamburger menus” problem, take a look at me. In profile. Clearly I’m a fan of hamburger menus. I digress … let’s talk about a real world scenario.
In 2013 I was working for NASCAR Digital Media helping with the management of NASCAR.com, a website with millions of users and a demographic that is on the older and less-technical side of the scale. In an effort to modernize the site, the navigation and site masthead were rebuilt and a hamburger menu icon was introduced that exposed (or, more accurately, hid) a number of links and options. After a few weeks of reviewing usage data, we found that only 17% of users were interacting with the site navigation and user feedback ranged from “I can’t find anything!” to “Where did all of the content go?” to things I won’t share publicly because my kids might see this.
Our solution (thanks to Mr. Tim Clark) was to simply add the word “MENU” beneath the hamburger menu. That decision seemed ridiculous to most of us - everyone knows that the hamburger icon means, right? After a bit more time and a review of analytics, we found that interaction with the navigation increased dramatically. Was the word “MENU” necessary to the function of the navigation? No. Was the word “MENU” necessary to the UX of the navigation? Absolutely.
This was a clear case of a misalignment of “Form” and “Function”. We tried to force new visual vocabulary on users without any introduction period. It took a multi-disciplined team reviewing the design, the usability and looking at the statistics to understand and solve the problem. It was a quintessentially Bauhaus solution.
So, let’s shift gears a little here and figure out how well this audience of astute technocrats can identify “universal” symbols. This is the “Audience Participation” section, so feel free to just yell out an answer. (Glenn!) Let’s play: NAME THAT ICON!!!
Here’s an easy one, what does this mean? (Parking)
What about this one? This is a trick, this one means “Departures”. An airplane facing straight-up means “Airport”.
What about this one? Caution, Swiss Ahead? (Hospital)
This is a square. What does this thing do when you see it as a button? (Stop)
This is a triangle. What does this mean when you see it in an app? Does anyone know? (Nothing, I made it up)
Here’s another triangle-like shape. What does this one mean? This is from Microsoft Windows. It roughly translates to “Here’s some stuff you’ll probably need, but we didn’t know what to call it, so we stuck it under this icon that no one will ever find.”
This is a vertical ellipsis, which is becoming more and more prominent, particularly in mobile apps. What is this? What does it mean? This is called the “kebab menu” and it’s an even worse version of the hamburger menu. For, you know, when three lines JUST WON’T FIT.
What about this? It’s another triangle. It’s the same color as the fake one. It’s just pointing a different way. What does this mean?
How about when you see it alongside a square? Does that make it more meaningful?
This is an equal sign … right? What does this thing do when you see it on-screen?
What about this guy? What does this button do? Do the other icons help to reinforce it?
So how about this one again? The Hamburger menu. Does this adequately convey the right message? Is this universally understood?
What about this one? Have you seen this symbol around?
That’s right, this is Snake Eyes. If you see this symbol, things are about to get real.
Actually, this is the 63rd Hexagram of the I-Ching. It means “Already Fording” or “Already Done”. It would make a cool loading completed icon, but we don’t do that because it’s not common knowledge.
However, it’s worth noting that the Chinese have 64 such symbols that, supposedly, are adequate responses to every single possible question the universe can pose. Now THAT is an effective visual language.
So we’ve talked a lot about what the Bauhaus was and the influence it had on our modern world, but we haven’t really talked about what the Bauhaus taught other than some vagaries regarding its ethos.
At its core, the Bauhaus taught multi-disciplinary building principles using glass, wood, stone, clay and metals, then mixed in foundational concepts of color theory and geometric aesthetics. However, in true multi-disciplinary fashion, the Bauhaus employed some well known artists from other mediums including painters like:
Wassily Kandinsky - BTW, if you’ll note the upper right hand corner, you’ll see that Mr. Kandinsky invented the hamburger menu graphic around 1920. You’ll also note that clicking on it does absolutely nothing - like God intended.
Paul Klee, who explored geometry and color in a new and interesting way.
Josef Albers, whose “ode to a square” color experiments helped define the future of color theory (the one to the right is “factory”)
Then there was painter/photographer Laszlo Moholy-Nagy, who was one of the first to embrace and lecture on the intersection of art and technology.
These influential artists had a profound impact on the transformation of the Bauhaus from a school of architecture and building, to a school of holistic design. Kandinsky, Klee and Albers were all artists whose work explored geometric shapes in space and who used color theory and geometry to convey emotion and give meaning to otherwise abstract works. These artists helped define the visual language that is deeply engrained in our culture and their teachings helped define the Bauhaus style.
As for Moholy-Nagy, his work combining typography, photography and geometry, which he referred to as “typophoto”, laid the groundwork for all modern design and advertising. It is Moholy-Nagy’s exploration of typography as more than a means of communication and its juxtaposition with photography, geometry and color that informs much of modern design, including web design.
Let’s talk about one of the more popular offshoots of the Bauhaus: Minimalism
In recent years, and in large part due to the influence of Apple’s design ethos, Minimalism has made its way into interface design. Minimalism is a simplified implementation of the principles of the Bauhaus, but once again, it’s often misunderstood and misused in the context of UI / UX and product design. Minimalism can be interpreted in multiple ways, but we most often see it interpreted as an absence of extraneous visual elements. That sounds very “Bauhaus”, doesn’t it? On the surface it seems a very pure translation.
John Maeda wrote a book called “The Laws of Simplicity” in which he outlines 10 principles that can help us simplify our creations. It’s a great book and there’s a great, short Ted talk that he gives explaining those principles. However, I think John could have simplified his 10 laws into 9, because laws 1 and 10, while both poignant, could be reduced to just one law:
“The way to achieve simplicity is to only include the meaningful”. This is the premise of minimalism. It’s also one of the basic premises of the Bauhaus and follows the “form follows function” ethos. So, how can we apply that idea to real-life products?
Let’s consider, as an example, a minimalist chef’s knife. If you Google that term you’ll find several knives that have a minimalist appearance. Sometimes there is no clear separation between handle and blade, maybe they have no ferrules or visible seams or possibly they’re completely devoid of a handle. That is one interpretation of a minimalist knife, and it’s the most common interpretation that we see, but that interpretation doesn’t necessarily result in the most usable knife or the best knife to do the job.
Another interpretation of a minimalist knife is one that allows you to simply not need a second knife. Irrespective of its appearance, a product that maximizes functionality and eliminates the need for other, similar products is both minimalist and far more useful. It is this interpretation of Minimalism is more in-line with the Bauhaus theme of “form follows function”, and it lines up pretty closely with John Maeda’s laws as well. It’s not the form of the product that makes it minimalist, it’s the utility of the product that makes it minimalist. This is the disservice that modern design often does to users: in an effort to minimize the extraneous, often things go to the opposite extreme and the design begins to interfere with the function of the product. Just like the hamburger menu we mentioned earlier.
Another way to interpret the Bauhaus theories is to think in terms of utility rather than design. Utilitarianism predates the Bauhaus by about 130 years; Bauhaus principles are basically the application of Utilitarianism to things rather than behavior or governance.
As stated by Jeremy Bentham in 1790, Utilitarianism is the "sum of all pleasure that results from an action, minus the suffering of anyone involved in the action”. That’s a bit hyperbolic when applied to products or design, but the ideals of the Bauhaus are clearly present in that quote. If we apply that to our anecdote about the BMW’s fuel door, it’s the idea that the frustration of thousands of consumers who interact with the door outweighs the pleasure the dozen-or-so designers experienced when conceiving a clever way to access the gas cap.
Taking the Utilitarian interpretation of the Bauhaus principles into your design will result in a more usable, and by extension, more successful product. Of course good design does not guarantee success, sometimes products succeed in spite of their design (I’m looking at you Craigslist), but your design will be more successful if it’s rooted in usability. If you want users to have a good experience with your products, it’s important for its features to be clearly communicated, for the interface elements be intuitive and natural and for the content to be clear and concise.
This is not to say that there is no place for Minimalism or the removal of visual fluff from our designs and our products, it just means that we have to be much more mindful in our application of those principles. Remember, we are only required to include what is MEANINGFUL.
Let’s take as another example this double-walled coffee cup released by Starbucks a few years back. This was a bit of Bauhausian Nirvana. In a lovely marriage of Utilitarianism and Minimalism, the designers of these vessels created a near-perfect product. They conceived a shape that allows them to sit nicely in a cup holder, that prevents them slipping from your hand, and that allows the user to pick it up from any angle without burning themselves, despite the apparent absence of a “handle". This is Minimalism done right; it's the true meaning of function informing design. In this case, the cup actually does have a handle, you just can’t see it because the handle is the entire outside of the cup. This product meets all of the criteria of being a design success: it removes all extraneous visual elements, it improves the user experience and it negates the need for a second product (unless you’re serving a friend).
So great, we learned how to improve cups, knives and car fuel doors. How do we apply this to technology?
The principles and the elements are already there. We’re using physical metaphors because often, talking about intangible technology products can be too abstract. We tend to think of things in the virtual world having the same properties as those in the physical world, so often it’s easier to bridge the mental gap by thinking in more concrete terms. In fact, we use physical metaphors for our virtual world all the time. We refer to “pages” of content, but there are no pages. We use phrases like “above the fold” and “below the fold” but there’s no fold. These are all metaphors we have derived from print media. It’s a good exercise to use different metaphors for our digital products lest we get too mired in a single way of thinking about presentation and usability. A cup or a refrigerator or a fuse box or an elevator keypad are as accurate a metaphor for content consumption or navigation as a book or a newspaper.
Using the metaphors of different physical objects we interact with is a great exercise in usability thinking. This is precisely what the Bauhaus taught in regard to approaching design challenges by inviting all disciplines to the table.
Let’s go back to our cup again. Take a look at this cup. This is how many websites approach the design problems we described previously. Because we’ve left cup-makers in charge of designing our cup, we end up with a cup-maker’s solution. There are no new ideas here, only re-implementations of existing cup technology. Need better access? Just add more handles.
Have a new piece of content? Or a new feature for your site? Just add another link.
Clearly this is not a win for the user. We’ve solved a few problems, but now, aside from it being ugly, we’ve introduced an entirely new problem. We call this problem “The Paradox of Choice”. Nothing here has any priority over anything else. There are no visual cues that one link is different from another, or that the site operators want to steer you toward one feature or another. There are so many similar options that they become visual noise and that noise leads to disengagement.
Today we have lots of people designing products who aren’t designers and who have no experience designing products. This leads to the regurgitation of ideas that those people experience elsewhere, which aren’t always good or sound or appropriate for the given scenario. It’s important that we use the lessons of those that came before to inform our ideas, but first we have to learn and understand those lessons. We have to approach product design in a mindful way and apply the design principles that our modern world is founded on. If we can change the way that we think about our problems, if we forget about our preconceived notions of what a webpage is, if we think outside the book/page/library model and put usability first, we can build engaging products and services that people want to interact with.
So, tell me. How did you like my Dadaist joke?
