Ausrichtung und Nähe

Die Designerin Robin Williams hat in ihrem vielgelesenen Buch für Nicht-Gestalter vier Grundprinzipien beschrieben, mit denen sich fast jede Gestaltung verbessern lässt: Kontrast, Wiederholung, Ausrichtung und Nähe. Kontrast und Nähe haben Sie in den vorigen Modulen kennengelernt. In dieser Lektion geht es um die Ausrichtung und darum, wie sie mit der Nähe zusammenwirkt. Ihre Grundregel ist einfach: Nichts sollte willkürlich auf einer Seite platziert werden. Jedes Element sollte eine sichtbare Verbindung zu einem anderen haben.

1. Unsichtbare Linien

Wenn Elemente an einer gemeinsamen Kante ausgerichtet sind, entsteht eine unsichtbare Linie, die das Auge wahrnimmt und der es folgt. Diese Linien verbinden Elemente, auch wenn sie weit auseinanderliegen, und geben der Seite Halt. Umgekehrt erzeugen viele verschiedene Startpunkte eine unruhige, zerfaserte Wirkung. Oft sind es nur wenige Pixel Unterschied – zu wenig, um bewusst bemerkt zu werden, aber genug, um die Seite unordentlich wirken zu lassen. Probieren Sie es aus:

Die unkorrigierte Version hat fünf verschiedene linke Kanten und einen zentrierten Block mitten in einem ansonsten linksbündigen Layout. Einzeln betrachtet ist jedes Element in Ordnung, aber zusammen wirken sie zufällig. Die korrigierte Version nutzt eine einzige Kante und ordnet die Gruppen über Abstände. Inhalt, Schrift und Farbe sind identisch – nur die Ordnung hat sich geändert.

2. Links, zentriert oder rechts?

Abb. 3.1Drei Arten der Ausrichtung

Die linksbündige Ausrichtung ist in Sprachen mit Leserichtung von links nach rechts die natürlichste. Sie erzeugt eine harte, klare Kante, an der das Auge jede Zeile beginnt. Für Texte, Formulare, Listen und die meisten Layouts ist sie die beste Wahl. Die zentrierte Ausrichtung wirkt symmetrisch, formell und ruhig, eignet sich aber nur für kurze Elemente: eine Überschrift, ein kurzer Einleitungssatz, ein Knopf in einem Einstiegsbereich. Bei längeren Texten muss das Auge jede Zeile neu suchen, und die ausgefransten Ränder auf beiden Seiten wirken unruhig. Die rechtsbündige Ausrichtung ist Sonderfällen vorbehalten, etwa Zahlen in Tabellen, damit Einer unter Einern stehen, oder kurzen Angaben am rechten Rand einer Zeile.

Der häufigste Fehler ist die Mischung ohne Grund. Eine zentrierte Überschrift über linksbündigem Text, darunter ein rechtsbündiges Bild und ein zentrierter Knopf – jede Entscheidung für sich ist vertretbar, zusammen entsteht Chaos. Die Regel lautet deshalb: Eine Ausrichtung pro Bereich, und Wechsel nur mit klarer Absicht.

3. Nähe und Ausrichtung zusammen

Ausrichtung verbindet Elemente über Linien, Nähe verbindet sie über Abstände. Beide wirken zusammen. Ein typisches Beispiel ist das Formular. Beschriftungen gehören direkt über ihr Feld, mit kleinem Abstand, und alle Felder beginnen an derselben linken Kante. Zwischen den Feldern liegt ein größerer Abstand als zwischen Beschriftung und Feld, damit klar ist, welche Beschriftung zu welchem Feld gehört. Zusammengehörige Felder wie Postleitzahl und Ort stehen in einer Zeile, und thematische Gruppen wie Rechnungs- und Lieferadresse werden durch noch größere Abstände oder Zwischenüberschriften getrennt. Studien zur Formulargestaltung zeigen, dass Beschriftungen über dem Feld schneller erfasst werden als Beschriftungen links daneben, besonders auf schmalen Bildschirmen.

4. Optische und mathematische Ausrichtung

Eine Besonderheit verdient Erwähnung: Was mathematisch genau ausgerichtet ist, wirkt nicht immer ausgerichtet. Runde Formen wie ein O oder ein Kreis wirken kleiner als ein Quadrat gleicher Höhe und werden deshalb in der Typografie leicht über die Linien hinaus gezeichnet. Ein Dreieck in einem Abspielknopf wirkt in der mathematischen Mitte nach links verschoben, weil sein optischer Schwerpunkt nicht in der Mitte liegt. Anführungszeichen am Anfang eines Zitats lassen den Text eingerückt erscheinen und werden deshalb oft in den Rand gezogen. Gute Gestaltung korrigiert solche Effekte nach dem Auge, nicht nach dem Lineal. Für die meisten Alltagsaufgaben genügt die mathematische Ausrichtung, aber bei Logos, Symbolen und großen Überschriften lohnt der zweite Blick.

5. Ausrichtung prüfen

Wie prüft man die Ausrichtung einer Seite? Die einfachste Methode ist ein Screenshot, auf den man mit einem Bildprogramm einige senkrechte Hilfslinien legt. Gestaltungswerkzeuge wie Figma zeigen beim Verschieben automatisch an, an welchen Kanten ein Element anliegt. Im Browser helfen Erweiterungen, die ein Raster oder Lineale einblenden. Wer keine Werkzeuge nutzen will, kann ein Blatt Papier senkrecht an den Bildschirm halten und prüfen, ob Überschriften, Texte, Bilder und Knöpfe an derselben Kante beginnen. Diese kleine Übung schärft den Blick erstaunlich schnell. Nach wenigen Seiten fallen Abweichungen auch ohne Hilfsmittel auf.

In der Umsetzung helfen feste Komponenten. Wenn Karten, Abschnitte und Formularfelder als wiederverwendbare Bausteine mit festen Innenabständen angelegt sind, entstehen Ausrichtungsfehler gar nicht erst. Die meisten Fehler entstehen dort, wo Inhalte frei im Editor platziert werden – mit Leerzeilen, Leerzeichen oder individuell eingestellten Abständen. Ein eingeschränkter Editor, der nur festgelegte Bausteine erlaubt, ist deshalb nicht nur für Typografie, sondern auch für die Ordnung einer Website ein Gewinn.

Ein Beispiel zeigt, wie viel diese Kleinigkeiten ausmachen. Bei der Überarbeitung des Kontaktformulars eines Dienstleisters wurden die Beschriftungen von links neben den Feldern über die Felder verschoben, alle Felder an einer gemeinsamen Kante ausgerichtet und die Abstände nach Zusammengehörigkeit gestaffelt. Der Inhalt des Formulars blieb gleich. Trotzdem wurde es spürbar häufiger vollständig ausgefüllt, vor allem auf dem Handy, wo die alten, nebeneinanderstehenden Beschriftungen die Felder stark verkürzt hatten.

Ausrichtung ist damit eines der günstigsten Mittel, um eine Website hochwertiger wirken zu lassen. Sie kostet keine neuen Fotos, keine neuen Texte und keine neue Technik – nur Aufmerksamkeit für die Kanten. Wer diese Aufmerksamkeit einmal entwickelt hat, sieht Ausrichtungsfehler künftig überall, auch in Präsentationen, Angeboten und Anzeigen – und kann sie mit wenigen Handgriffen beheben.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.