Compared to fine arts, design has always been perceived as less inspirational because of its practical nature. We’ve only come to realize the incredible power of design since the last century due to a few paradigm-shifting design movements.

The Bauhaus was one of these movements that gave design a unique place in humanity: a unique discipline that fused art and craftsmanship with a philosophical approach.

‘Bauhaus” – a term literally meaning “construction house” in German – was an art school founded by architect Walter Gropius in 1919. When the Bauhaus school existed, it had its roots in three cities – Dessau (1925-1932), Weimar (1919-1925) and Berlin (1932-1933). Although short-lived and eventually shut down because of the Nazi political party, the Bauhaus as a movement had a huge influence on art, design, and architecture that continues to the present day. Some of the best-known Bauhaus artists and designers include Paul Klee, Johannes Itten, Mies Van der Rohe, Wassily Kandinsky, and László Moholy-Nagy.

Rather than focusing on the elitist ideal of fine art, the Bauhaus was radical enough at the time to integrate art and design principles such as color theory, composition with a relentless pursuit for purposeful functionality. There is a lot to be learned from the revolutionary Bauhaus principles for infographic design. Here we go through their lessons to refresh your thinking about information design with a curious blend of artistic flair and modernist rationality.

The Bauhaus Legacy

There are the six fundamental principles of the Bauhaus. They are based on a minimalist approach, defined by simple colors and clean design. The Bauhaus as a movement, beyond being an art school, held certain beliefs that shaped its approach to art & design:

1. Products could be mass produced but also honor the artistic spirit of individuality and serve the majority of the population. Even though a similar idea already existed in Germany, it came into the limelight after the Bauhaus.
2. The Bauhaus school of art also believed that students need to be well equipped in artistic, social, economic, technical and spiritual grounds. This would bring out the best in them and make them vital participants in society.
3. The Bauhaus School of Arts preferred forward thinking faculty members over academically qualified scholars. Artistic creativity was encouraged by them.
4. Another of its principles included an amalgamation of applied and fine arts.
5. Followers of the Bauhaus believed that a designer has to have thorough experience with materials.
6. They were firm believers in rational design and were captivated by a modern sense of beauty.

Bauhaus Lessons for Infographic Design

Graphic designers can learn a great deal about modern design that captures a combination of artistry, affordability and utility. Let us look into the lessons we can apply to infographic design today.

1. Form Follows Function

Effective information design considers communication as its top priority. Once in awhile we see a beautifully styled infographic that fails to carry a memorable message. An infographic’s primary purpose is to communicate information – form and style should work to fulfill this purpose and not the other way around.

Josef Albert’s famous nesting tables is a play on minimalist forms and color combinations.

The Bauhaus school taught students to strip unnecessary decoration that didn’t serve a functional purpose. The phrase “form follows function”, coined by American architect Louis Sullivan, perfectly captures the Bauhaus zeitgeist. Following this rule, a good infographic should prioritize readability and reduce visual clutter to create a clear visual focus. In other words, we should announce death to excessive ornamental details.

Below is an infographic that follows this rule. Using minimal colors and basic geometric shapes, it communicates complex information with a very clean, uncluttered design.

The Daily Routines of Famous Creative People

2. Visual Hierarchy is King

The Bauhaus school paid special attention to relationships formed between two opposites. For instance, it explained the connection between dark and light, left and right or large and small. And this relationship between elements creates visual hierarchy.

Take Kandinsky’s (Mondrian’s?) iconic composition paintings, for example. The size and position of the red rectangle creates a visual focal point, forming a relationship with adjacent contrasting colors and forms that is very easy for our eyes to follow.

Kandinsky’s painting “White-white” demonstrates clear visual hierarchy.

The lesson here is to create a clear visual focus in infographic design using contrast, shapes and spatial positioning. In the infographic example below, using red and green colors forms a strong contrast that highlights the quantitative difference, whereas the overlapping forms in the center create a clear visual focal point.

A year of Food in NYC infographic.

3. Color as a Medium

A bright student of the Bauhaus school of arts, named Josef Albers, expanded on the topic in his iconic book, ‘Interaction of Color’. Josef taught us that colors are relative and rarely seen as their actual physical properties. As a medium, colors can be “deceptive” and “provocative”. Therefore, understanding how colors interact with each other can greatly determine your message.

In the example illustrating the relativity of color below, squares of the same color of brown are perceived as having different shades because of the context they are in. Understanding the intrinsic properties of a color palette is the first step. To convey the right message, one also needs to consider the interaction between colors when choosing a color scheme.

Josef Albers on relativity of color.

Presently, designers choose the best palettes to make the websites colorful and match the intrinsic properties of the shades.

The lesson that colors hold deeper connections is what modern designers employ. So, they cautiously choose the best color combination and bring out the meaning altogether.

Other Bauhaus artists have contributed to color theory besides Josef Albers’ such as Johannes Itten and his color sphere. The categorization of color into primary, secondary, and tertiary colors today is still widely used for graphic design. Itten’s color theory can guide infographic designer to choose the best color scheme for their designs.

Johannes Itten’s 12-hue color circle.

With this color theory in mind, it is much easier to choose the best color scheme for your infographic based on the principles of consistency and simplicity. A good infographic uses a consistent color palette while keeping combination of colors simple. You want your colors to support the communication of information instead of obstruct or distract your reader from the key message.

For example, if you are to design an infographic about coffee making, it’s best to use brown as the dominant color, as it is the color associated with coffee beans, while keeping the entire color palette simple. In this Nespresso infographic, the design conveys the theme by using brown color throughout.

To use colors consistently and simply for your infographic design, there are 3 color schemes you can consider: monochromatic, triadic, and complementary. A monochromatic color scheme uses colors of the same hue but of different saturations, so be careful to set your colors in a way that doesn’t appear too dull. For beginners, it’s easier to start with a triadic color scheme where colors are of equal distance on the color wheel. Complimentary colors are on the opposite ends of the color wheel, and is great for creating contrast.

3 Types of color schemes for infographic.

Lastly, always consider the context of your infographic to choose colors that evokes the right associations. For example, if you are designing an infographic for the Christmas season, it’s best to stick to red & green color scheme.

4. Typography Matters, a Lot

One of the greatest legacies of the Bauhaus school of art is typography. Leaders of Bauhaus believed that typography is an integral part of graphics, and that words should be set at sharp angles. However, the meaning of a word held greater priority than its design.

This belief taught the contemporary designers a major lesson. It encouraged them to be creative with font styles but also cautioned them not to deviate from the actual message that they want to express. According to the Bauhaus, the primary function of typography is to communicate, and communication should appear in the “shortest, simplest, most penetrating form”.

The best of Bauhaus typefaces strive for lucidity and simplicity.

For infographic design, as a rule of thumb we should use fonts that are legible and simple in order to communicate clearly. Overly decorative fonts for copy text will make it difficult to read and distracting to look at as texts are rarely the focal point of the design.

5. The Grid Layout

Good alignment makes a whole world of difference in graphic design. The pioneers of the Bauhaus believed in a minimalist approach to visual organization, where everything is tightly squeezed into rectangles and squares. The grid makes perfect sense for the practical-minded Bauhaus designers. A lot of the Bauhaus design elements conform to a strict grid, such as the book cover and chess board below.

Designing for the grid.

Nowadays, the grid system is a commonly used alignment system by graphic designers and web designers for page layouts. It remains an effective system to maintain visual hierarchy all throughout the content section. For infographic design, following the grid system is a must because multiple elements need to be arranged, organized and structured to create clear visual hierarchy.

How the grid system is used in graphic design.

Using a column-based grid system like the 6 column grid above, you can set up a guideline for how your design elements interact with each out. That sets the foundation for strong visual relationships in your design. Also, grid systems can be used to create rhythm and movement. In the above Bauhaus magazine color design, the diagonally position grid creates a sense of movement while densely populated elements at the center of the grid produce a sense of gravity.

If column-based grid system is the glue that holds your content together, then the use of margins help declutter your dense display of information. You probably have noticed how the generous use of white space and wide margins in Bauhaus designs creates a clean, uncluttered look.

Finally, having a grid system helps you break the grid. Your design becomes immediately impactful when you purposefully break the rules. This will make your infographic instantly more memorable among the many cookie-cutter infographic layouts. Take below infographic as an example, the breaking of the rectangle grid at the top creates a striking visual impact while the rest of page grid was kept intact to retain visual harmony of the overall design.

Good example of breaking the grid.

Your Turn

Here are the five essential lessons from the Bauhaus you can use in your next infographic design. Do you find them easy to understand and practical to follow? Have you discovered other Bauhaus principles suitable for infographic designs?

And if you are ready to take the leap, try these design principles out with an infographic maker such as Visme that comes with templates, so that you can focus on playing with choosing the right font, color and visual layout.