En 2019 se celebra el centenario de la Bauhaus. Su influencia en el diseño web es innegable y es una fuente de inspiración y de enseñanza en el diseño moderno. El diseño gráfico tiene mucho que agradecer a la Bauhaus.
Tendencia o influencia
Cada año, entre diciembre y enero se predicen las tendencias en diseño. Al mismo tiempo, hay cosas que no cambian. Si tenemos la usabilidad como foco, los principios de la Bauhaus forman la base de nuestro diseño.
La Bauhaus es una de las escuelas de arquitectura y diseño más representativas del Siglo XX. Sentó las bases y los patrones del diseño gráfico
Usabilidad y funcionalidad
Un buen diseño web es atractivo a la vez que funcional.
Menos es más
La forma sigue a la función
Simplicidad de formas y colores
La Bauhaus es una de las escuelas de arquitectura y diseño más representativas del Siglo XX. Sentó las bases y los patrones del diseño gráfico
#1 La Forma sigue a la Función
En lo que concierne al diseño web y la estrategia de contenido, podemos añadir, citando a Jeffrey Zeldman, que “el diseño sigue al contenido”.
Los adornos no necesarios se eliminan y el diseño sigue líneas y elementos geométricos.
El diseño y el arte no son meros ornamentos. El diseño industrial de los objetos que usamos a diario, más que grandes obras, son pequeños, cotidianos, útiles y funcionales.
#2 La tipografía
Herbert Bayer se encargó del diseño de un Font sin adornos. El enfoque en una comunicación visual, Font Sans Serif, textos en horizontal, vertical y diagonal son algunas aportaciones claves. El texto se escribe en mayúsculas o minúsculas, pero no en combinaciones de ellas, como si fueran un texto tradicional.
Nombres destacados de la escuela Bauhaus
- Paul Klee, uno de los pintores más importantes de la primera mitad del Siglo XX
- Vasili Kandinsky, pintor ruso, la importancia de los elementos geométricos y como el posicionamiento de color cambia el significado
- Walter Gropius, el fundador en 1919
- Ludwig Mies van der Rohe, fue el último director de la escuela
- Marianne Brandt, diseñadora industrial, la lampara Kandem es solo uno de sus numerosos diseños que hoy forman parte de la vida cotidiana
- Laszlo Moholy-Nagy, pintor y fotógrafo, coeditor de las revistas de la escuela Bauhaus, quizás el más multidisciplinar, integrando tipografía e imagen para una nueva literatura visual
- Lilly Reich, diseñadora y arquitecta, profesora, interiores y telas
- Annie Alberts, artista textil, revolucionó los tejidos
- Herbert Bayer, tipografía sans serif, el Universal Typeface
- Johannes Itten, publicó El Arte del Color, una rueda de 12 colores y sus efectos psicológicos
Los años 1919-1933, entre Weimar, Dessau y Berlin
La historia de la propia escuela Bauhaus es corta, ya que vivió entre las dos guerras mundiales.
La escuela Bauhaus se funda en 1919 a mano de Walter Gropius en Weimar, Alemania. En 1925 se mudan a la ciudad de Dessau. Reubican durante el último año a Berlin, antes de verse obligados a cerrar en 1933, bajo la presión del régimen Nazi.
La escuela animaba la multidisciplinariedad, así se encontraban en la misma escuela departamentos de
- diseño industrial
- bellas artes
- fotografía
- diseño textil
- tipografía
- diseño gráfico
- arquitectura
Diseños asequibles, funcionales y bonitos componían la misión de la escuela, rompiendo con la estética victoriana, de objetos con muchos adornos y altos costes de fabricación.
Arquitectos, escultores, pintores, … debemos regresar al trabajo manual … Establezcamos, por lo tanto, una nueva cofradía de artesanos, libres de esa arrogancia que divide a las clases sociales y que busca erigir una barrera infranqueable entre los artesanos y los artistas
Walter Gropius
Qué tiene que ver la Bauhaus con el diseño web
Aparte de su importancia general en el diseño gráfico como lo conocemos, también se puede observar en las características y necesidades del diseño web.
Diseño responsive y UX
En cuestión de 25 años hemos pasado de páginas web estáticas diseñadas para sobremesas a los diseños responsive, interactivos y “mobile-first”
El número de usuarios que navegan a las páginas web desde móviles no para de aumentar. Como consecuencia, las páginas que no se adaptan, pierden visitas.
Además, interactuamos no solo por medio de las páginas web sino también por los diversos canales de comunicación, email, video y redes sociales.
#Back to the basics
¿Como trabajar con un diseño multicanal y multidispositivo?
Volviendo a la escuela
A la escuela Bauhaus. Volver a aprender y aplicar las reglas, volver a los básicos, adaptar y reinterpretar el diseño para responder a las nuevas posibilidades y las exigencias que conlleva.
Una página web puede ser bonita, muy bonita incluso.
¿Pero es navegable?
¿Ofrece al usuario lo que esta busca?
¿Es posible filtrar los productos, encontrar las ofertas y abrir un chat para resolver preguntas rápidas?
La forma debe seguir a la función, el diseño al contenido. Todo ello tiene la experiencia del usuario en el foco central.
Así influyen las enseñanzas de la Bauhaus en el diseño web moderno.
#1 CSS – La forma debe seguir a la función
Pasamos de las páginas web estáticas al CSS, ligero y responsive.
¿Qué es CSS? El Cascade Style Sheet (hojas de estilo en cascada) es un lenguaje de diseño gráfico, que define la apariencia de un documento escrito en un lenguaje de marcado, como es el caso del HTML.
Así se puede separar la estructura del contenido del documento de la forma de presentación. Esto, a su vez, conlleva una mayor flexibilidad para adaptar el contenido a diferentes medios y tamaños de visualización, como puede ser el tamaño de pantalla o una reproducción por voz.
#2 La geometría – El diseño plano
La belleza de las formas geométricas puras se ve reflejada en los Flat Designs, que se adaptan especialmente bien a los diferentes dispositivos.
Las formas geométricas minimalistas prescinden de adornos innecesarios y distractores, por lo que son fácilmente reconocibles. Esto, a su vez, mejora la experiencia de los usuarios.
¿Qué no encontramos en un diseño plano? Degradados, sombras, texturas, biseles, …
El rediseño de Microsoft a partir de Windows 8 es típico del diseño plano.
#3 La relación entre color y forma – el Botón de Enviar
El pintor Wassily Kandinsky, uno de los profesores más conocidos de la escuela Bauhaus, demostró la relación entre el color y la forma. Proponía que ciertas formas y colores se complementan y refuerzan el mensaje a transmitir.
Determinados colores son realzados por determinadas formas y mitigados por otras. Un triángulo pintado de amarillo, un círculo de azul, un cuadrado de verde, otro triángulo de verde, un círculo de amarillo, un cuadrado de azul, etc., todos son entes totalmente diferentes y que actúan de manera completamente diferente.
Vasili Kandinsky
El botón verde y alargado al final de un formulario online, con la palabra “Enviar” es un ejemplo de la enseñanza de Kandinsky.
#4 Paletas de colores limitadas
La rueda de 12 colores de Johannes Itten explicaba como mezclar matices y sombras. Además, Itten estudiaba el efecto psicológico que tienen los colores.
Los colores son fuerzas, energías radiantes que nos afectan de manera positiva o negativa, nos percatemos o no.
Adobe Color CC es una aplicación que ayuda a dar armonía de color a nuestros diseños. A partir de un color inicial, nos propone colores complementarios, análogos, monocromáticos, compuestos, en triada y tonos del mismo color.
Así podemos asegurarnos de combinar correctamente los colores para un efecto armonioso.
#5 Sans Serif y Universal Font – La tipografía
Fiel a la eliminación de adornos y elementos innecesarios, la importancia de la tipografía en la comunicación visual. Del Universal Typeface de Herbert Bayer al Futura de Paul Renner, las letras dejan atrás la estilización y los ornamentos.
- Tipografía Sans Serif
- Contenido diseñado sobre jerarquía
- Uso intencional de espacio en blanco
- Equilibrio asimétrico de elementos
Microsoft incluye en su Creators Update 2017, un nuevo Font, “Bahnschrift”, una digitalización del DIN 1451.
#6 De la Typofoto a la infografía
La síntesis de tipografía y fotografía es una propuesta del pintor húngaro Laszlo Moholy-Nagy.
Hoy en día lo conocemos como diseño gráfico y se expresa a la perfección en forma de infografías.
La infografía es una herramienta de comunicación que es especialmente popular en las redes sociales y los sitios web. Es una representación visual, que une diversos tipos de gráficos, pictogramas y textos para representar relaciones entre conceptos y resumir los puntos principales de ideas complejas.
Cuando navegamos por la red, es principalmente para buscar información y no para leer largos párrafos de texto.
Por eso, la infografía es una herramienta muy atractiva que ha sido adoptada en las estrategias de marketing de contenidos.
#7 La multidisciplinariedad
La escuela Bauhaus reunía a arquitectos, pintores, fotógrafos y diseñadores textiles. Las colaboraciones entre estos diferentes campos eran fundamentales para las ideas innovadoras que aportaría la Bauhaus al futuro del diseño.
Los diseñadores de hoy destacan por su versatilidad, por encontrar inspiración en diversas fuentes y por colaborar con otros profesionales. Así, hay una comunicación continua entre diseñadoras y escritores, siempre con la experiencia del usuario en el foco central.
Ejemplos de la influencia de la Bauhaus en el diseño actual
Ikea
Funcionalidad, estética y producción industrial para unos muebles asequibles.
Apple
Referente en el diseño actual. Si deciden incluir un elemento nuevo en un móvil, como el Notch en el IPhone X, sabemos que otras marcas no tardaran en copiarlo. Funcional y elegante.
Lamy
Mobiliario, tecnología, pero también plumas estilográficas. Lamy es una marca alemana, líder a nivel mundial de reconocido prestigio. Sus productos son fieles a la funcionalidad, durabilidad y atractivo visual. Los diseños de las plumas no han cambiado mucho desde su fundación en 1930, pero siguen marcando tendencia.
«Los diseñadores de hoy destacan por su versatilidad, por encontrar inspiración en diversas fuentes y por colaborar con otros profesionales.» amé esa parte… buen artículo.
Muchas gracias por tu comentario Rosa