In 2019, the centenary of the Bauhaus will be celebrated. Its influence on web design is undeniable and it is a source of inspiration and teaching in modern design. Graphic design has a lot to thank Bauhaus for.
Trend or influence
Every year, between December and January, design trends are predicted. At the same time, some things don't change. If we have usability as our focus, the principles of Bauhaus form the basis of our design.The Bauhaus is one of the most representative schools of architecture and design of the 20th century. It laid the foundations and the patterns of graphic design Click To Tweet
Usability and functionality
A good web design is attractive as well as functional.
Less is more
Form follows function
Simplicity of shapes and colors
The Bauhaus is one of the most representative schools of architecture and design of the 20th century. It laid the foundations and the patterns of graphic design
#1 Form follows Function
As far as web design and content strategy is concerned, we can add, quoting Jeffrey Zeldman, that "design follows content".
Unnecessary ornaments are removed and the design follows lines and geometric elements.
Design and art are not mere ornaments. The industrial design of the objects we use every day, more than big works, are small, everyday, useful and functional.
Herbert Bayer was responsible for designing an unadorned Font. The focus on visual communication, Font Sans Serif, horizontal, vertical and diagonal texts are some key contributions. The text is written in upper or lower case, but not in combinations of them, as if it were a traditional text.
Outstanding names of the Bauhaus school
- Paul Kleeone of the most important painters of the first half of the 20th century
- Vasily KandinskyRussian painter, the importance of geometric elements and how the positioning of color changes the meaning
- Walter Gropiusthe founder in 1919
- Ludwig Mies van der Rohewas the last headmaster of the school
- Marianne BrandtKandem, an industrial designer, is just one of many designs that are now part of everyday life
- Laszlo Moholy-Nagy, painter and photographer, co-editor of the Bauhaus school magazines, perhaps the most multidisciplinary, integrating typography and image for a new visual literature
- Lilly Reichdesigner and architect, teacher, interiors and fabrics
- Annie Albertstextile artist, revolutionized textiles
- Herbert BayerThe Universal Typeface, sans serif typeface
- Johannes IttenThe Art of Color, a 12-color wheel and its psychological effects
The years 1919-1933, between Weimar, Dessau and Berlin
The history of the Bauhaus school itself is short, as it lived between the two world wars.
The Bauhaus school was founded in 1919 by Walter Gropius in Weimar, Germany. In 1925 they move to the city of Dessau. They relocate during the last year to Berlin, before being forced to close down in 1933, under the pressure of the Nazi regime.
The school encouraged multidisciplinarity, so the same school had departments of
- engineering design
- fine art
- fabric design
- graphic design
Affordable, functional and beautiful designs made up the school's mission, breaking with the estética Victorian, of objects with many decorations and high manufacturing costs.
Architects, sculptors, painters, ... we must return to manual work ... Let us establish, therefore, a new brotherhood of craftsmen, free from that arrogance that divides social classes and that seeks to erect an insurmountable barrier between craftsmen and artists
#1 Form follows Function Click To Tweet
What Bauhaus has to do with web design
Apart from its general importance in graphic design as we know it, it can also be seen in the characteristics and needs of web design.
Responsive and UX design
In a matter of 25 years we have gone from static websites designed for desktops to responsive designsinteractive and "mobile-first"
The number of users browsing the websites from mobiles is constantly increasing. As a consequence, the pages that do not adapt, lose visits.
In addition, we interact not only through websites but also through various communication channels, email, video and social networks.
#Back to the basics
How to work with a multi-channel and multi-device design?
Going back to school
To the Bauhaus school. Re-learning and applying the rules, going back to the basics, adapting and reinterpreting the design to respond to new possibilities and the demands that come with it.
A website can be beautiful, very beautiful even.
But is it navigable?
Does it offer the user what they are looking for?
Is it possible to filter the products, find the offers and open a chat to solve quick questions?
Form must follow function, design must follow content. All this has the user experience in the central focus.
This is how the teachings of Bauhaus influence modern web design.
#1 CSS - Form should follow function
We moved from static web pages to CSSlight and responsive.
This allows you to separate the structure of the document content from the form of presentation. This, in turn, leads to greater flexibility in adapting the content to different media and display sizes, such as screen size or voice playback.
#2 Geometry - The Flat Design
The beauty of pure geometric shapes is reflected in the Flat DesignsThe newest models are particularly well suited to different devices.
Minimalist geometric shapes do away with unnecessary and distracting ornamentation and are therefore easily recognisable. This, in turn, improves the user experience.
What don't we find in a flat design? Gradients, shadows, textures, bevels...
Microsoft's redesign from Windows 8 is typical of flat design.
#3 The Relationship between Color and Shape - the Send Button
The painter Wassily Kandinsky, one of the best known teachers at the Bauhaus school, demonstrated the relationship between colour and form. He proposed that certain shapes and colors complement and reinforce the message to be transmitted.
Certain colors are enhanced by certain shapes and mitigated by others. A triangle painted in yellow, a circle in blue, a square in green, another triangle in green, a circle in yellow, a square in blue, etc., are all completely different entities that act in a completely different way.
The green, elongated button at the end of an online form with the word "Submit" is an example of Kandinsky's teaching.
#4 Limited Color Palettes
Johannes Itten's 12-colour wheel explained how to mix shades and shadows. In addition, Itten studied the psychological effect that colors have.Colors are forces, radiant energies that affect us in a positive or negative way, whether we are aware of it or not. Click To Tweet
Adobe Color CC is an application that helps to give color harmony to our designs. From an initial color, it proposes complementary, analogous, monochromatic, composite colors, in triads and shades of the same color.
This way we can make sure that we combine the colours correctly for a harmonious effect.
#5 Sans Serif and Universal Font - The typography
True to the elimination of unnecessary ornaments and elements, the importance of typography in visual communication. From Herbert Bayer's Universal Typeface to Futura by Paul Renner, the letters leave behind the stylization and the ornaments.
- Sans Serif Typography
- Content designed on hierarchy
- Intentional use of white space
- Asymmetrical balance of elements
#6 From Typophoto to Computer Graphics
The synthesis of typography and photography is a proposal of the Hungarian painter Laszlo Moholy-Nagy.
Today we know it as graphic design and it expresses itself perfectly in the form of computer graphics.
Computer graphics is a communication tool that is especially popular on social networks and websites. It is a visual representation, which joins various types of graphics, pictograms and texts to represent relationships between concepts and summarize the main points of complex ideas.
When we surf the web, it is mainly to look for information and not to read long paragraphs of text.
Therefore, computer graphics is a very attractive tool that has been adopted in content marketing strategies.
The Bauhaus school brought together architects, painters, photographers and textile designers. The collaborations between these different fields were fundamental for the innovative ideas that Bauhaus would bring to the future of design.
Today's designers stand out for their versatility, for finding inspiration in diverse sources and for collaborating with other professionals. Thus, there is a continuous communication between designers and writers, always with the user experience in the central focus.
Examples of the influence of Bauhaus on today's design
Functionality, estética and industrial production for affordable furniture.
Reference in the current design. If they decide to include a new element in a mobile, such as Notch in the IPhone X, we know that other brands will soon copy it. Functional and elegant.
Furniture, technology, but also fountain pens. Lamy is a German brand, a world leader of recognized prestige. Its products are faithful to functionality, durability and visual appeal. The designs of the pens have not changed much since its foundation in 1930, but they continue to set the trend.
An excellent way to improve the user experience when surfing our website is to offer a communication channel to the user...
Find out what the KISS philosophy is, how it can be applied in e-commerce, and some of the companies that make ...
ISO/IEC 25000, also known as SQuaRE (System and Software Quality Requirements and Evaluation), is a family of...