• 0
      1. Tu carrito está vacío.
    • artículo(s)0,00

The importance of Bauhaus in Web Design

March 16, 2018
Posted in diseño web
March 16, 2018 Njla772

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

bauhaus school building germany architecture art

#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.

#2 Typography

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

 

kandem lamp bauhaus school minimalism

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
  • photo
  • fabric design
  • typography
  • graphic design
  • architecture

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

Walter Gropius

 

#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"

25 years of web design

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.

What is CSS? Cascade Style Sheet is a graphic design language, which defines the appearance of a document written in a markup language, such as HTML.

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.

Vasily Kandinsky

 

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

color theory adobe color cc connect software instagram

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.

bauhaus dessau font typography poster

  • Sans Serif Typography
  • Content designed on hierarchy
  • Intentional use of white space
  • Asymmetrical balance of elements

 

Microsoft includes in its Creators Update 2017, a new Font, "Bahnschrift"a digitization of the DIN 1451.

 

#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.

 

#7 Multidisciplinarity

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.

 

bauhaus window minimalist architecture

Examples of the influence of Bauhaus on today's design

Ikea

Functionality, estética and industrial production for affordable furniture.

Apple

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.

Lamy

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.

 

Comments (2)

  1. "Today's designers are known for their versatility, for finding inspiration in diverse sources and for collaborating with other professionals." I loved that part... good article.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get in Touch
newsletter

Subscribe to the newsletter on ecommerce and digital transformation

Trends, guides
and latest news in ecommerce
technologies.

Además, te regalamos el primer capítulo del libro
«Conecta tu negocio. La transformación digital de los canales de venta»

newsletter
Get in Touch
Contact
connect-logo-white-retinue

Product

Info

Support

Connect your business.

Branding

In HUB 360 you will find all the technology and services for your e-commerce strategy.

Ecommerce

Integra tu ecommerce con tu ERP sistema de gestión y todos tus canales para vender online.

Analytics

BI Studio dashboards are your next generation business intelligence tool.

922-014-341

Proyecto Cofinanciado por el Fondo Europeo de Desarrollo Regional. Beneficiario: Conecta Software Soluciones SLU. Nº expediente: EATIC2019010001. Inversión Aprobada: 173.800,00 €. Comienzo: 01/04/2019. Finalización: 30/09/2020. El presente proyecto tiene como objetivo el desarrollo de una capa de usuario multilingüe y dashboards para entornos web y windows de solución de Business Intelligence.

Project co-financed by the European Regional Development Fund. Beneficiary: Conecta Software Soluciones SLU. File number: PI2019010001. Approved Investment: 6,444.80 Start date: 17/10/2018. Completion: 16/10/2019. The present project aims at developing a connector software that automates the generation of virtual catalogues so that the company can offer in its Online Store products with a wide description and with images that make the user experience richer and more complete.

2020 ALL RIGHTS RESERVED. CONNECT SOFTWARE

Contact
English (UK)
English (UK) Español Deutsch