# Diseño Bauhaus: formas, primarios e ideas duraderas

[Canonical HTML page](https://gradiently.design/es/guide/bauhaus-design)

Una escuela que existió solo catorce años sigue marcando el aspecto de carteles, muebles, apps y logos. Aquí tienes lo que la Bauhaus enseñaba de verdad y cómo tomar prestado sin caer en el pastiche.

## The short version

- La Bauhaus fue una escuela alemana de arte, artesanía y diseño fundada por Walter Gropius en Weimar en 1919 y cerrada en Berlín en 1933 bajo la presión del gobierno nazi.
- El diseño Bauhaus favorece las formas geométricas simples, los colores primarios, la tipografía de palo seco, las maquetas asimétricas y la idea de que la forma debe seguir a la función.
- En 1923 Wassily Kandinsky pidió a la gente de la escuela que asociara un triángulo, un cuadrado y un círculo con amarillo, rojo y azul; él propuso un triángulo amarillo, un cuadrado rojo y un círculo azul.
- Herbert Bayer diseñó en 1925 una tipografía solo en minúsculas llamada universal, un ejemplo temprano del empeño de la escuela por una letra más simple y racional.
- Para usar hoy el estilo Bauhaus, toma prestados sus principios de estructura clara y color limitado en lugar de copiar sus formas al pie de la letra.

El **diseño Bauhaus** es el estilo que salió de la Bauhaus, una escuela alemana de arte, artesanía y diseño que funcionó de 1919 a 1933. Es conocido por sus formas geométricas simples, colores primarios, rotulación de palo seco, maquetas asimétricas y la creencia de que el buen diseño debe ser útil, estar bien hecho y adaptarse a la producción industrial. Sus ideas siguen bajo casi todo el diseño gráfico moderno, desde la cuadrícula de un cartel hasta los iconos de tu móvil.

## Una breve historia de la Bauhaus

| Año | Qué pasó |
| --- | --- |
| 1919 | Walter Gropius funda la Staatliches Bauhaus en Weimar, uniendo la enseñanza de las bellas artes y la artesanía. |
| 1923 | Una gran exposición presenta el trabajo de la escuela; Kandinsky realiza su cuestionario de forma y color. |
| 1925 | La escuela se traslada a Dessau. Herbert Bayer diseña su tipografía universal en minúsculas. |
| 1926 | Se inaugura el edificio de Dessau diseñado por Gropius, con sus muros de cristal y todo. |
| 1928 a 1930 | Hannes Meyer dirige la escuela y la empuja hacia la arquitectura y el propósito social. |
| 1930 a 1933 | Dirige Ludwig Mies van der Rohe; la escuela se traslada a Berlín en 1932 y cierra en 1933. |
| Después de 1933 | Los profesores emigran. Gropius y Marcel Breuer enseñan en Harvard, Mies en Chicago, Josef Albers en el Black Mountain College y más tarde en Yale. |

Catorce años, tres ciudades, tres directores. La emigración posterior a 1933 explica en gran parte por qué las ideas se difundieron tanto.

Los profesores fueron notables: Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy y Josef Albers, entre otros. Albers escribió más tarde *Interaction of Color*, todavía uno de los mejores libros sobre cómo se modifican los colores entre sí, que conecta directamente con la [teoría del color](https://gradiently.design/es/guide/color-theory-basics) moderna.

## Colores y formas Bauhaus, con CSS

El aspecto que la mayoría imagina es rojo, amarillo y azul con negro, sobre un fondo blanco roto, construido con círculos, cuadrados y triángulos. El cuestionario de Kandinsky de 1923, que proponía el triángulo amarillo, el cuadrado rojo y el círculo azul, se volvió el atajo para toda la escuela, aunque el trabajo de la Bauhaus usó muchos más colores.

- Rojo Bauhaus: #be1e2d
- Amarillo Bauhaus: #f2c12e
- Azul Bauhaus: #21409a
- Negro: #111111
- Papel: #f1ece1

Una paleta de inspiración Bauhaus. Los primarios están algo calentados y profundizados, más cerca de la tinta impresa que del RGB de pantalla.

- Círculo azul: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Cuarto de círculo rojo: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Triángulo amarillo: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Semicírculo negro: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Cuatro cuartos: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Rayas rojas: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Formas Bauhaus hechas solo con CSS y paradas de color duras. Cada una es un único degradado que puedes copiar.

Las paradas duras, donde un color termina exactamente donde empieza el siguiente, son la clave. Convierten un degradado en una forma nítida. [Formas con degradados](https://gradiently.design/es/guide/gradient-shapes) cubre más de estas, y el código de abajo combina cuatro en una sola tesela.

```css
.bauhaus-tile {
  aspect-ratio: 1 / 1;
  background-color: #f1ece1;
  background-image:
    radial-gradient(circle at 100% 100%, #be1e2d 70%, transparent 70.5%),
    linear-gradient(135deg, #f2c12e 50%, transparent 50%),
    radial-gradient(circle, #21409a 45%, transparent 45.5%),
    linear-gradient(#111111, #111111);
  background-size: 50% 50%;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
}
```

Una tesela Bauhaus de cuatro partes: un cuarto de círculo rojo, un triángulo amarillo, un círculo azul y un cuadrado negro, cada uno en su cuadrante.

## Tipografía Bauhaus

Los diseñadores de la Bauhaus querían una letra clara, racional y moderna. Herbert Bayer sostenía que las mayúsculas eran innecesarias y dibujó universal, un alfabeto geométrico sin mayúsculas; muchos materiales impresos de la propia escuela las abandonaron durante un tiempo. Los carteles componían texto de palo seco en bloques gruesos, a menudo girados, con filetes y barras gruesas para organizar la página.

- **Palo seco geométricas:** o redonda, astas rectas, trazos uniformes. Futura, lanzada en 1927, no es una tipografía Bauhaus pero comparte el espíritu; Jost, en Google Fonts, es una fuente gratuita en la misma línea.
- **Titulares en minúsculas:** un guiño discreto a la universal de Bayer.
- **Texto girado:** el texto que sube por el lateral de un cartel da la sensación asimétrica y dinámica.
- **Barras y filetes:** líneas negras gruesas que dividen y orientan, en lugar de cajas.

## Cómo usar hoy el diseño Bauhaus

Copiar exactamente las formas y los primarios produce algo que parece la tienda de regalos de un museo. El valor duradero de la Bauhaus está en sus principios, que funcionan con cualquier paleta.

1. **Parte de la función** Decide qué debe hacer el diseño, como anunciar una fecha o vender un producto, y deja que eso decida la maqueta.
2. **Construye sobre una cuadrícula y rómpela una vez** Coloca todo sobre una cuadrícula clara y deja que una forma o línea la cruce. Esa tensión es muy Bauhaus. El [diseño suizo](https://gradiently.design/es/guide/swiss-design) desarrolló más la cuadrícula.
3. **Limita el color** Tres colores más negro y un fondo de papel. Cambia los primarios por los colores de tu marca y la estructura seguirá leyéndose como Bauhaus.
4. **Usa las formas como estructura** Un círculo puede enmarcar una foto, una barra puede sostener un titular, un triángulo puede señalar la llamada a la acción.
5. **Mantén la letra simple** Una sola tipografía de palo seco geométrica, dos pesos, grande y alineada a la izquierda.

Una publicación vertical de evento que dice la forma sigue a la función en minúsculas con una pequeña ceja y una línea de detalle

Un titular en minúsculas, una pequeña ceja y detalle simple: contención Bauhaus en una publicación de evento moderna.

Una portada horizontal que dice Forma, color, línea con un número de edición encima

Los mismos principios en una portada de 1600×1200, con un fondo vivo en lugar de primarios planos.

Ese segundo ejemplo muestra el giro moderno. La maqueta Bauhaus sigue siendo estricta, pero el fondo es un Mark de Gradiently en lugar de rojo o azul planos: sigue siendo una paleta limitada y estructural, pero con su propia luz y grano, y una vez reservado es solo tuyo. El texto rígido se apoya en su zona más tranquila, así que la cuadrícula se mantiene nítida.

Si te gusta la Bauhaus, compárala con el glamour decorativo del [diseño Art Déco](https://gradiently.design/es/guide/art-deco-design), la honestidad cruda del [diseño brutalista](https://gradiently.design/es/guide/brutalist-design) y su rebeldía divertida de los años ochenta en el [diseño Memphis](https://gradiently.design/es/guide/memphis-design).

## FAQ

### ¿Qué es el diseño Bauhaus?

El estilo de la escuela Bauhaus de Alemania, de 1919 a 1933: formas geométricas, colores primarios, tipografía de palo seco, maquetas asimétricas y atención a la función.

### ¿Cuáles son los colores Bauhaus?

El rojo, el amarillo y el azul con negro y blanco son los más asociados a ella, en parte por el cuestionario de forma y color de Kandinsky de 1923.

### ¿Qué fuente se usa en el diseño Bauhaus?

Palo seco geométricas. Herbert Bayer dibujó en 1925 una tipografía en minúsculas llamada universal; hoy Futura o la gratuita Jost dan una sensación parecida.

### ¿Por qué cerró la Bauhaus?

La escuela cerró en 1933 en Berlín bajo la presión del gobierno nazi, que veía su modernismo como políticamente sospechoso.

### ¿Cómo puedo hacer un cartel de estilo Bauhaus?

Usa una cuadrícula clara, unas pocas formas geométricas atrevidas, tres colores más negro sobre fondo de papel y letra de palo seco simple, alineada a la izquierda o girada.