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

La importancia de la Bauhaus en Diseño Web

März 16, 2018
Posted in diseño web
März 16, 2018 Conecta Software

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 Klick um zu Tweeten

Usabilidad y funcionalidad

Un buen diseño web es atractivo a la vez que funcional.

Menos es más

Form folgt Funktion

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 Klick um zu Tweeten

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. Klick um zu Tweeten

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Kontakt aufnehmen
Mitteilungsblatt

Abonniere den Newsletter über E-Commerce und digitale Transformation

Trends, Tipps, Ebooks und mehr
rund um Ecommerce und Business Intelligence

Ausserdem schenken wir Dir das 1º Kapitel aus unserem Buch «Verbinde Dein Unternehmen. Die digitale Transformation del Vertriebskanäle»

Mitteilungsblatt
Kontakt aufnehmen
Kontakt
connect-logo-white-retinue

Produkt

Infos

Support

Verbinde Dein Unternehmen.

Branding

In HUB 360 findest Du alle Technologien und Services für Deine ECommerce-Strategie.

Ecommerce

Integriere Dein E-Commerce in ERP mit allen Online Kanälen.

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.

Projekt kofinanziert durch den Europäischen Fonds für regionale Entwicklung. Begünstigter: Conecta Software Soluciones SLU. Aktenzeichen: PI2019010001. Genehmigte Investition: 6.444,80 Startdatum: 17/10/2018. Abschluss: 16.10.2019. Ziel des vorliegenden Projekts ist die Entwicklung einer Konnektor-Software, die die Erstellung virtueller Kataloge automatisiert, so dass das Unternehmen in seinem Online-Shop Produkte mit einer umfassenden Beschreibung und mit Bildern anbieten kann, die die Benutzererfahrung reicher und vollständiger machen.

2020 ALLE RECHTE VORBEHALTEN. SOFTWARE VERBINDEN

Kontakt
Deutsch
Deutsch Español English (UK)