# Bauhaus-muotoilu: muodot, päävärit ja kestävät ideat

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

Vain neljätoista vuotta toiminut koulu vaikuttaa yhä julisteisiin, huonekaluihin, sovelluksiin ja logoihin. Näin Bauhaus opetti ja näin lainaat sitä ilman pastissia.

## The short version

- Bauhaus oli saksalainen taiteen, käsityön ja muotoilun koulu, jonka Walter Gropius perusti Weimariin vuonna 1919 ja joka suljettiin Berliinissä vuonna 1933 natsihallinnon painostuksesta.
- Bauhaus-muotoilu suosii yksinkertaisia geometrisia muotoja, päävärejä, päätteetöntä typografiaa, epäsymmetristä taittoa ja ajatusta muodon seuraamisesta tehtävää.
- Vuonna 1923 Wassily Kandinsky pyysi koulun väkeä yhdistämään kolmion, neliön ja ympyrän keltaiseen, punaiseen ja siniseen. Hän ehdotti keltaista kolmiota, punaista neliötä ja sinistä ympyrää.
- Herbert Bayer suunnitteli vuonna 1925 pelkistä pienaakkosista koostuvan universal-fontin, varhaisen esimerkin koulun pyrkimyksestä yksinkertaisempaan ja järkiperäisempään typografiaan.
- Nykyään Bauhaus-tyyliä kannattaa lainata selkeän rakenteen ja rajatun värimäärän periaatteina muotojen suoran kopioinnin sijaan.

**Bauhaus-muotoilu** syntyi Bauhausissa, saksalaisessa taiteen, käsityön ja muotoilun koulussa, joka toimi vuodesta 1919 vuoteen 1933. Se tunnetaan yksinkertaisista geometrisista muodoista, pääväreistä, päätteettömistä kirjaimista, epäsymmetrisestä taitosta ja ajatuksesta, että hyvän suunnittelun tulee olla hyödyllistä, hyvin tehtyä ja teolliseen tuotantoon sopivaa. Sen ideat ovat edelleen modernin graafisen suunnittelun pohjalla julisteen ruudukosta puhelimesi kuvakkeisiin.

## Bauhausin lyhyt historia

| Vuosi | Mitä tapahtui |
| --- | --- |
| 1919 | Walter Gropius perustaa Staatliches Bauhausin Weimariin yhdistäen kuvataiteen ja käsityön opetuksen. |
| 1923 | Suuri näyttely esittelee koulun töitä. Kandinsky toteuttaa muoto- ja värikyselynsä. |
| 1925 | Koulu muuttaa Dessauhun. Herbert Bayer suunnittelee pienaakkosista koostuvan universal-fonttinsa. |
| 1926 | Gropiuksen suunnittelema Dessaun rakennus avautuu lasiseinineen. |
| 1928 ja 1930 välisenä aikana | Hannes Meyer johtaa koulua kohti arkkitehtuuria ja yhteiskunnallista tehtävää. |
| 1930 ja 1933 välisenä aikana | Ludwig Mies van der Rohe johtaa. Koulu muuttaa Berliiniin vuonna 1932 ja sulkeutuu vuonna 1933. |
| Vuoden 1933 jälkeen | Opettajat muuttavat maasta. Gropius ja Marcel Breuer opettavat Harvardissa, Mies Chicagossa, Josef Albers Black Mountain Collegessa ja myöhemmin Yalessa. |

Neljätoista vuotta, kolme kaupunkia ja kolme johtajaa. Vuoden 1933 jälkeinen maastamuutto selittää pitkälti ideoiden laajan leviämisen.

Opettajakunta oli poikkeuksellinen: Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy ja Josef Albers muiden muassa. Albers kirjoitti myöhemmin *Interaction of Colorin*, joka on yhä parhaita kirjoja värien keskinäisestä vaikutuksesta. Se liittyy suoraan moderniin [värioppiin](https://gradiently.design/fi/guide/color-theory-basics).

## Bauhausin värit ja muodot CSS:llä

Useimmat kuvittelevat punaisen, keltaisen ja sinisen sekä mustan luonnonvalkoisella pohjalla, ympyröistä, neliöistä ja kolmioista rakennettuna. Kandinskyn vuoden 1923 kyselyssä ehdottamat keltainen kolmio, punainen neliö ja sininen ympyrä alkoivat edustaa koko koulua, vaikka sen töissä käytettiin paljon muitakin värejä.

- Bauhaus-punainen: #be1e2d
- Bauhaus-keltainen: #f2c12e
- Bauhaus-sininen: #21409a
- Musta: #111111
- Paperi: #f1ece1

Bauhaus-henkinen paletti. Päävärit ovat hieman lämpimämpiä ja syvempiä, lähempänä painomustetta kuin näytön RGB-värejä.

- Sininen ympyrä: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Punainen neljännesympyrä: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Keltainen kolmio: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Musta puoliympyrä: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Neljä neljännestä: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Punaiset raidat: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Bauhaus-muotoja pelkällä CSS:llä ja terävillä värirajoilla. Kukin on yksi kopioitava liukuväri.

Terävät rajat, joissa väri loppuu täsmälleen seuraavan alkaessa, ovat avain. Ne tekevät liukuväristä tarkan muodon. [Liukuvärimuodot](https://gradiently.design/fi/guide/gradient-shapes) näyttää lisää, ja alla oleva koodi yhdistää neljä muotoa yhteen laattaan.

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

Neliosainen Bauhaus-laatta: punainen neljännesympyrä, keltainen kolmio, sininen ympyrä ja musta neliö omissa neljänneksissään.

## Bauhausin typografia

Bauhaus-suunnittelijat tavoittelivat selkeää, järkiperäistä ja modernia typografiaa. Herbert Bayer piti suuraakkosia turhina ja piirsi universalin, geometrisen kirjaimiston ilman niitä. Monet koulun omat painotuotteet luopuivat suuraakkosista hetkeksi. Julisteissa päätteetön teksti asettui vahvoihin, usein käännettyihin lohkoihin, ja paksut viivat sekä palkit järjestivät sivua.

- **Geometriset päätteettömät fontit:** pyöreä o, suorat pystyviivat ja tasaiset vedot. Vuonna 1927 julkaistu Futura ei ole Bauhaus-fontti, mutta jakaa sen hengen. Google Fontsin Jost on ilmainen samanhenkinen vaihtoehto.
- **Otsikot pienaakkosin:** hillitty viittaus Bayerin universaliin.
- **Käännetty teksti:** julisteen reunaa ylös kulkeva teksti luo epäsymmetrisen, dynaamisen tunnun.
- **Palkit ja viivat:** paksut mustat viivat jakavat ja ohjaavat laatikoiden sijaan.

## Bauhaus-muotoilun käyttö tänään

Muotojen ja päävärien tarkka kopiointi näyttää museon lahjakaupalta. Bauhausin kestävä arvo on periaatteissa, jotka toimivat millä tahansa paletilla.

1. **Aloita tehtävästä** Päätä, mitä suunnitelman pitää tehdä, esimerkiksi ilmoittaa päivä tai myydä tuote. Anna sen määrittää taitto.
2. **Rakenna ruudukolle ja riko se kerran** Aseta kaikki selkeään ruudukkoon ja anna yhden muodon tai viivan kulkea sen poikki. Jännite on hyvin Bauhaus-henkinen. [Sveitsiläinen muotoilu](https://gradiently.design/fi/guide/swiss-design) kehitti ruudukkoa edelleen.
3. **Rajaa värit** Kolme väriä, musta ja paperipohja. Vaihda päävärit brändiväreihisi, ja rakenne tuntuu yhä Bauhausilta.
4. **Käytä muotoja rakenteena** Ympyrä kehystää kuvan, palkki kantaa otsikon ja kolmio osoittaa toimintakehotteeseen.
5. **Pidä typografia pelkistettynä** Yksi geometrinen päätteetön fontti, kaksi leikkausta, suuri koko ja vasen tasaus.

Pystytapahtumajulkaisu: muoto seuraa tehtävää pienaakkosin, pieni yläotsikko ja tietorivi

Pienaakkosotsikko, pieni yläotsikko ja selkeät tiedot: Bauhausin hillitty ote modernissa tapahtumajulkaisussa.

Vaakakansi: Muoto, väri, viiva ja sen yläpuolella numerotieto

Samat periaatteet 1600×1200-kannessa. Elävä tausta korvaa tasaiset päävärit.

Toinen esimerkki näyttää modernin muunnelman. Bauhaus-taitto pysyy täsmällisenä, mutta taustalla on Gradiently Mark tasaisen punaisen tai sinisen sijaan. Paletti on edelleen rajattu ja rakenteellinen, mutta siinä on oma valo ja rae. Lunastuksen jälkeen se kuuluu vain sinulle. Jämäkkä teksti asettuu rauhallisimpaan kohtaan, joten ruudukko pysyy terävänä.

Jos pidät Bauhausista, vertaa sitä [art decon](https://gradiently.design/fi/guide/art-deco-design) koristeelliseen loistoon, [brutalistisen muotoilun](https://gradiently.design/fi/guide/brutalist-design) paljaaseen rehellisyyteen ja 1980-luvun leikkisään kapinaan [Memphis-muotoilussa](https://gradiently.design/fi/guide/memphis-design).

## FAQ

### Mitä Bauhaus-muotoilu on?

Saksalaisen Bauhaus-koulun tyyli vuosien 1919 ja 1933 väliseltä ajalta: geometriset muodot, päävärit, päätteetön typografia, epäsymmetrinen taitto ja toiminnallisuus.

### Mitkä ovat Bauhausin värit?

Punainen, keltainen ja sininen sekä musta ja valkoinen yhdistetään siihen vahvimmin, osin Kandinskyn vuoden 1923 muoto- ja värikyselyn vuoksi.

### Mitä fonttia Bauhaus-muotoilussa käytetään?

Geometrisiä päätteettömiä fontteja. Herbert Bayer piirsi pienaakkosfontti universalin vuonna 1925. Nykyään Futura tai ilmainen Jost antaa samanhenkisen vaikutelman.

### Miksi Bauhaus suljettiin?

Koulu suljettiin Berliinissä vuonna 1933 natsihallinnon painostuksesta. Hallinto piti sen modernismia poliittisesti epäilyttävänä.

### Miten teen Bauhaus-tyylisen julisteen?

Käytä selkeää ruudukkoa, muutamaa vahvaa geometrista muotoa, kolmea väriä ja mustaa paperipohjalla sekä pelkistettyä päätteetöntä tekstiä vasemmalle tasattuna tai käännettynä.