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

La importancia de la Bauhaus en Diseño Web

marzo 16, 2018
Posted in diseño web
marzo 16, 2018 conecta

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 Clic para tuitear

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

edificio escuela bauhaus alemania arquitectura arte

#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

 

lampara kandem escuela bauhaus minimalismo

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

 

#1 La Forma sigue a la Función Clic para tuitear

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”

25 años de diseño web

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. Clic para tuitear

teoria de colores adobe color cc conecta software instagram

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.

bauhaus dessau cartel font tipografia

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

 

ventana bauhaus arquitectura minimalista

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.

 

Comments (2)

  1. “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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Get in Touch
newsletter

Suscríbete al newsletter sobre ecommerce y transformación digital

Tendencias, consejos
y lo último en tecnologías
para vender online.

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
conecta-logo-blanco-retina

Producto

Info

Soporte

Conecta tu Negocio.

Branding

En HUB 360 encontrarás toda la tecnología y servicios para tu estrategia de comercio electrónico.

Ecommerce

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

Analytics

Los cuadros de mando de BI Studio son tu herramienta de Business Intelligence de última generación.

922-014-341

Proyecto Cofinanciado por el Fondo Europeo de Desarrollo Regional. Beneficiario: Conecta Software Soluciones SLU. Nº expediente: PI2019010001. Inversión Aprobada: 6.444,80 €. Comienzo: 17/10/2018. Finalización: 16/10/2019. El presente proyecto tiene como objetivo el desarrollo de un software conector que automatiza la generación de catálogos virtuales para que la empresa pueda ofrecer en su Tienda online productos con una amplia descripción y con imágenes que hagan la experiencia del usuario más rica y completa.

© 2020 TODOS LOS DERECHOS RESERVADOS. CONECTA SOFTWARE

Contact