# Design Bauhaus: formas, primárias e ideias duradouras

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

Uma escola que existiu apenas catorze anos continua a moldar o aspeto de cartazes, mobiliário, aplicações e logótipos. Eis o que a Bauhaus realmente ensinou, e como pedir-lhe emprestado sem fazer um pastiche.

## The short version

- A Bauhaus foi uma escola alemã de arte, ofícios e design fundada por Walter Gropius em Weimar, em 1919, e encerrada em Berlim, em 1933, sob pressão do governo nazi.
- O design Bauhaus privilegia formas geométricas simples, cores primárias, letra sem serifa, layouts assimétricos e a ideia de que a forma deve seguir a função.
- Em 1923, Wassily Kandinsky pediu às pessoas da escola que associassem um triângulo, um quadrado e um círculo ao amarelo, vermelho e azul; propôs um triângulo amarelo, um quadrado vermelho e um círculo azul.
- Herbert Bayer desenhou em 1925 um tipo de letra só em minúsculas chamado universal, um dos primeiros exemplos do impulso da escola para uma tipografia mais simples e racional.
- Para usar hoje o estilo Bauhaus, toma emprestados os seus princípios de estrutura clara e cor limitada em vez de copiar as formas à letra.

O **design Bauhaus** é o estilo que saiu da Bauhaus, uma escola alemã de arte, ofícios e design que funcionou de 1919 a 1933. É conhecido pelas formas geométricas simples, cores primárias, letras sem serifa, layouts assimétricos e pela convicção de que o bom design deve ser útil, bem feito e adequado à produção industrial. As suas ideias continuam por baixo da maior parte do design gráfico moderno, da grelha de um cartaz aos ícones do teu telemóvel.

## Uma breve história da Bauhaus

| Ano | O que aconteceu |
| --- | --- |
| 1919 | Walter Gropius funda a Staatliches Bauhaus em Weimar, unindo o ensino das belas-artes e dos ofícios. |
| 1923 | Uma grande exposição apresenta o trabalho da escola; Kandinsky faz o seu questionário de formas e cores. |
| 1925 | A escola muda-se para Dessau. Herbert Bayer desenha o tipo de letra universal em minúsculas. |
| 1926 | Abre o edifício de Dessau desenhado por Gropius, com as suas paredes de vidro. |
| 1928 a 1930 | Hannes Meyer dirige a escola e empurra-a para a arquitetura e o propósito social. |
| 1930 a 1933 | Ludwig Mies van der Rohe dirige; a escola muda-se para Berlim em 1932 e fecha em 1933. |
| Depois de 1933 | Os professores emigram. Gropius e Marcel Breuer ensinam em Harvard, Mies em Chicago, Josef Albers no Black Mountain College e mais tarde em Yale. |

Catorze anos, três cidades, três diretores. A emigração depois de 1933 é uma grande parte da razão pela qual as ideias se espalharam tanto.

Os professores eram notáveis: Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy e Josef Albers, entre outros. Albers escreveu mais tarde *A Interação da Cor*, ainda hoje um dos melhores livros sobre como as cores se alteram umas às outras, o que se liga diretamente à [teoria da cor](https://gradiently.design/pt-pt/guide/color-theory-basics) moderna.

## Cores e formas Bauhaus, com CSS

O visual que a maioria das pessoas imagina é vermelho, amarelo e azul com preto, sobre um fundo branco-sujo, construído com círculos, quadrados e triângulos. O questionário de Kandinsky de 1923, que propôs o triângulo amarelo, o quadrado vermelho e o círculo azul, tornou-se a abreviatura de toda a escola, apesar de o trabalho da Bauhaus usar muitas mais cores do que essas.

- Vermelho Bauhaus: #be1e2d
- Amarelo Bauhaus: #f2c12e
- Azul Bauhaus: #21409a
- Preto: #111111
- Papel: #f1ece1

Uma paleta de inspiração Bauhaus. As primárias estão ligeiramente aquecidas e aprofundadas, mais perto da tinta impressa do que do RGB de ecrã.

- Círculo azul: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Quarto de círculo vermelho: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Triângulo amarelo: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Meio círculo preto: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Quatro quartos: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Riscas vermelhas: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Formas Bauhaus feitas só em CSS com paragens de cor duras. Cada uma é um único gradiente que podes copiar.

As paragens duras, em que uma cor termina exatamente onde a seguinte começa, são a chave. Transformam um gradiente numa forma nítida. As [formas em gradiente](https://gradiently.design/pt-pt/guide/gradient-shapes) tratam de mais exemplos, e o código abaixo combina quatro num só mosaico.

```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;
}
```

Um mosaico Bauhaus de quatro partes: um quarto de círculo vermelho, um triângulo amarelo, um círculo azul e um quadrado preto, cada um no seu quadrante.

## Tipografia Bauhaus

Os designers da Bauhaus queriam letra clara, racional e moderna. Herbert Bayer defendeu que as maiúsculas eram desnecessárias e desenhou o universal, um alfabeto geométrico sem maiúsculas; muitos dos materiais impressos da própria escola dispensaram as maiúsculas durante algum tempo. Os cartazes compunham letra sem serifa em blocos fortes, muitas vezes rodados, com filetes e barras grossos para organizar a página.

- **Sem serifas geométricas:** o o redondo, hastes retas, traços uniformes. A Futura, lançada em 1927, não é um tipo de letra Bauhaus mas partilha o espírito; a Jost, no Google Fonts, é um tipo gratuito na mesma linha.
- **Títulos em minúsculas:** uma discreta homenagem ao universal de Bayer.
- **Texto rodado:** letra a subir pelo lado de um cartaz dá a sensação assimétrica e dinâmica.
- **Barras e filetes:** linhas pretas grossas que dividem e orientam, em vez de caixas.

## Como usar o design Bauhaus hoje

Copiar exatamente as formas e as primárias dá algo que parece uma loja de recordações de museu. O valor duradouro da Bauhaus está nos seus princípios, que funcionam com qualquer paleta.

1. **Parte da função** Decide o que o design tem de fazer, como anunciar uma data ou vender um produto, e deixa isso decidir o layout.
2. **Constrói numa grelha e quebra-a uma vez** Dispõe tudo numa grelha clara e deixa depois uma forma ou linha atravessá-la. Essa tensão é muito Bauhaus. O [design suíço](https://gradiently.design/pt-pt/guide/swiss-design) desenvolveu a grelha mais além.
3. **Limita a cor** Três cores mais preto e um fundo de papel. Troca as primárias pelas cores da tua marca e a estrutura continua a ler-se como Bauhaus.
4. **Usa formas como estrutura** Um círculo pode enquadrar uma fotografia, uma barra pode segurar um título, um triângulo pode apontar para o apelo à ação.
5. **Mantém a letra simples** Uma sem serifa geométrica, dois pesos, grande e alinhada à esquerda.

Uma publicação vertical de evento com o texto a forma segue a função em minúsculas, com uma pequena sobrelinha e uma linha de pormenor

Um título em minúsculas, uma pequena sobrelinha e pormenor simples: contenção Bauhaus numa publicação de evento moderna.

Uma capa horizontal com o texto Forma, cor, linha e um número de edição por cima

Os mesmos princípios numa capa 1600×1200, com um fundo vivo no lugar das primárias lisas.

Esse segundo exemplo mostra o toque moderno. O layout Bauhaus continua rigoroso, mas o fundo é um Mark do Gradiently em vez de vermelho ou azul liso: ainda uma paleta limitada, ainda estrutural, mas com luz e grão próprios, e depois de reservado é só teu. O texto rígido assenta na sua zona mais calma, por isso a grelha continua nítida.

Se gostas da Bauhaus, compara-a com o glamour decorativo do [design Art Déco](https://gradiently.design/pt-pt/guide/art-deco-design), a honestidade crua do [design brutalista](https://gradiently.design/pt-pt/guide/brutalist-design) e a sua rebeldia lúdica dos anos 1980 no [design Memphis](https://gradiently.design/pt-pt/guide/memphis-design).

## FAQ

### O que é o design Bauhaus?

O estilo da escola Bauhaus na Alemanha, de 1919 a 1933: formas geométricas, cores primárias, letra sem serifa, layouts assimétricos e um foco na função.

### Quais são as cores Bauhaus?

Vermelho, amarelo e azul com preto e branco são as cores mais associadas, em parte por causa do questionário de formas e cores de Kandinsky, de 1923.

### Que tipo de letra se usa no design Bauhaus?

Sem serifas geométricas. Herbert Bayer desenhou em 1925 um tipo de letra em minúsculas chamado universal; hoje a Futura ou a gratuita Jost dão um ambiente parecido.

### Porque fechou a Bauhaus?

A escola fechou em 1933, em Berlim, sob pressão do governo nazi, que via o seu modernismo como politicamente suspeito.

### Como posso fazer um cartaz de estilo Bauhaus?

Usa uma grelha clara, algumas formas geométricas fortes, três cores mais preto sobre um fundo de papel, e letra sem serifa simples alinhada à esquerda ou rodada.