„Form follows function“ heißt auf Deutsch „Form folgt Funktion“: Die Gestalt eines Dings ergibt sich aus dem, wofür es da ist. Erst steht fest, was ein Gebäude, ein Stuhl oder eine Website leisten soll, dann wird die Form gefunden, die genau das kann. Nicht umgekehrt.
Der Satz stammt vom amerikanischen Architekten Louis Sullivan, wird oft mit dem Bauhaus verbunden und passt auf Websites besonders gut, weil dort jedes Element etwas tun soll. Er wird allerdings häufig missverstanden: als Aufforderung zu Grau und Weglassen. Das ist er nicht.
Woher der Satz kommt
Sullivan schrieb ihn 1896 in seinem Aufsatz „The Tall Office Building Artistically Considered“, erschienen in Lippincott’s Magazine. Das Thema war das Hochhaus, damals eine neue Bauaufgabe. Sullivans Frage: Wie soll ein Bürohaus mit vielen Stockwerken aussehen, für das es kein historisches Vorbild gibt? Seine Antwort: so, wie es benutzt wird. Technik im Keller, Läden im Erdgeschoss, gleichförmige Büroetagen darüber, oben ein Abschluss für Tanks und Leitungen, und das darf man von außen sehen.
Im Original heißt es übrigens „form ever follows function“, Form folgt der Funktion immer. Die kurze Fassung ist das, was hängen blieb.
Was das Bauhaus damit zu tun hat
Das Bauhaus hat den Satz nicht erfunden und nicht als Parole geführt. Im Rückblick steht es aber wie keine andere Schule für die Haltung dahinter. In Weimar und Dessau wollte man Gestaltung aus Material, Herstellung und Gebrauch ableiten statt aus Stilvorlagen. Ein Stuhl sollte gut sitzen und sich in Serie bauen lassen, eine Schrift sollte gut lesbar sein. Ornamente, die nichts tun, flogen raus.
Daraus ist später ein Stil geworden: klare Formen, Grundfarben, viel Weißraum. Und genau da beginnt das Missverständnis. Das Bauhaus hatte kein Rezept für Aussehen, sondern eine Reihenfolge fürs Entscheiden. Welche Bauhaus-Prinzipien im Web heute tragen, habe ich in Bauhaus Design im Webdesign aufgeschrieben.
Das häufigste Missverständnis: Funktion heißt nicht karg
„Form folgt Funktion“ wird gern als Ausrede benutzt. Für langweilige Seiten, für Grau in Grau, für „das braucht kein Mensch“. Der Designer Hartmut Esslinger, Gründer von frog design, entwarf ab 1982 die Designsprache für Apple, zuerst am Apple IIc. In den 1980ern setzte er dem Satz „form follows emotion“ entgegen: Produkte sollen auch etwas auslösen, nicht nur funktionieren.
Ich halte beide Sätze für richtig, wenn man die Funktion ehrlich aufschreibt. Eine Website hat selten nur die Aufgabe „Information anzeigen“. Sie soll auch Vertrauen herstellen, auf den ersten Blick zeigen, wer hier spricht, und jemanden zum Anrufen bringen. Das sind Funktionen. Ein gutes Foto vom Team, eine Schrift mit Haltung, eine Farbe, die man wiedererkennt: Das ist kein Schmuck, wenn es diese Aufgaben erfüllt. Schmuck ist nur das, was keine erfüllt.
Die Frage lautet also nicht „schlicht oder schön?“, sondern: Welche Aufgabe hat dieses Element? Wer darauf keine Antwort hat, streicht es. Wer eine hat, gestaltet es so gut wie möglich.
Form folgt Funktion im Webdesign: fünf Entscheidungen
So sieht das Prinzip in der Arbeit aus. Jede dieser Entscheidungen treffe ich bei Kundenseiten regelmäßig, und jede fängt bei der Funktion an.
1. Die Aufruf-Farbe gehört nur den Knöpfen
Eine Seite hat eine Farbe für „Hier geht es weiter“: anrufen, anfragen, Termin. Diese Farbe taucht nirgends sonst auf, nicht in Überschriften, nicht in Rahmen, nicht als Deko. Sonst lernt das Auge nicht, was sie bedeutet, und der wichtigste Knopf geht in der Fläche unter. Die Form, eine sparsame Farbe, folgt direkt aus der Funktion: Wegweiser sein.
2. Die Startseite fängt mit dem Angebot an, nicht mit einem Slider
Der wechselnde Bilder-Slider im Kopf ist das Paradebeispiel für Form vor Funktion. Er sieht nach etwas aus, versteckt aber die eigentliche Aussage hinter wechselnden Bildern, und was nach dem ersten kommt, sieht nur, wer wartet. Was die erste Ansicht leisten muss: sagen, was angeboten wird, für wen und wo, und einen Weg anbieten. Daraus folgen eine klare Überschrift, ein Satz und ein Knopf. Wie der Rest der Startseite daraus entsteht, steht in Struktur einer Webseite.
3. Formularfelder haben mindestens 16 Pixel Schrift
Das klingt nach Kleinkram und ist reine Funktion. Auf dem iPhone zoomt Safari automatisch heran, sobald man ein Eingabefeld antippt, dessen Schrift kleiner als 16 Pixel ist. Die Seite springt, der Besucher muss zurückzoomen, mitten im Ausfüllen. Eine zierliche 14-Pixel-Schrift im Formular sieht auf dem Desktop eleganter aus und macht auf dem Handy genau den Schritt umständlich, um den es geht.
4. Schrift wird nach dem Lesen ausgesucht, nicht nach dem Logo
Die Hausschrift aus dem Logo darf in die Überschriften. Für Fließtext auf dem Bildschirm zählen andere Dinge: Wie hoch sind die Kleinbuchstaben, wie offen die Formen, wie gut hält die Schrift in 17 Pixeln auf einem billigen Display? Eine Schrift, die als Logo großartig ist, kann als Lesetext eine Zumutung sein.
5. Was nicht gebraucht wird, kommt gar nicht erst auf die Seite
Ein Newsletter ohne Newsletter-Plan, ein Blog, der nie befüllt wird, ein Chat, den niemand beantwortet: Das sind Funktionen, die es nur als Form gibt. Sie versprechen etwas und halten es nicht. Weniger Elemente heißt hier nicht minimalistischer Stil, sondern ehrliche Seite.
Ein Prüfsatz für jede Gestaltungsentscheidung
Wer das Prinzip in den Alltag holen will, braucht keine Designtheorie, sondern eine Frage: „Was soll das hier tun?“ Sie funktioniert bei einem Bild, einer Animation, einem Menüpunkt und einer Farbe gleich gut. Lautet die Antwort „sieht gut aus“, ist das noch keine Funktion. Lautet sie „zeigt, dass hier echte Menschen arbeiten“ oder „macht klar, wo man klicken soll“, ist es eine, und dann darf die Form dafür auch schön sein.
Diese Frage ist auch der Grund, warum ich vor dem ersten Entwurf mehr über Ziele, Besucher und Anfragen wissen will als über Lieblingsfarben. Wenn du sehen willst, wie das bei einem Projekt abläuft, findest du hier mein Angebot für Webdesign.
Fazit: Erst die Aufgabe, dann die Gestalt
„Form follows function“ ist kein Stil und kein Verbot von Schönheit. Es ist eine Reihenfolge: zuerst klären, was etwas leisten soll, dann die Form suchen, die das am besten kann. Bei Websites gehören Vertrauen und Wiedererkennung ausdrücklich zu dieser Leistung. Deshalb darf eine funktionale Seite warm und eigenständig aussehen. Sie darf nur nichts enthalten, das keine Aufgabe hat.
Häufige Fragen
Was bedeutet „Form follows function“ auf Deutsch?
Übersetzt heißt es „Form folgt Funktion“. Gemeint ist, dass die Gestalt eines Gegenstands, Gebäudes oder einer Website aus seiner Aufgabe abgeleitet wird: Erst wird geklärt, was es leisten soll, dann wird die passende Form gesucht.
Wer hat „Form follows function“ gesagt?
Der amerikanische Architekt Louis Sullivan, 1896 in seinem Aufsatz „The Tall Office Building Artistically Considered“. Im Original lautet der Satz „form ever follows function“. Später wurde das Prinzip zum Leitsatz der Moderne und wird heute oft mit dem Bauhaus verbunden.
Heißt „Form follows function“, dass Design schlicht sein muss?
Nein. Das Prinzip verlangt nur, dass jedes Element eine Aufgabe hat. Auf einer Website gehören dazu auch Vertrauen und Wiedererkennung, deshalb darf funktionales Design warm und eigenständig aussehen. Raus fliegt nur, was keine Aufgabe erfüllt.
Pappelbaum Design
Design direkt vom Designer.
Web, Print oder Marke: ein Ansprechpartner, der alles selbst macht. Eine halbe Stunde reicht, um zu klären, was dein Projekt braucht. Das Gespräch kostet nichts.