Was Weissraum wirklich ist – und was nicht
Weissraum ist nicht Verschwendung. Weissraum ist kein Designfehler. Weissraum ist keine leere Fläche die du «noch füllen musst».
Weissraum ist ein aktives Gestaltungsmittel. Er ist der Raum zwischen und um Elemente herum – zwischen Absätzen, um Bilder, zwischen Menüpunkten, zwischen dem Headline und dem Button. Und er muss nicht weiss sein. Er kann grau sein, schwarz, beige. Die Farbe ist irrelevant. Es geht um den Raum selbst.
Es gibt zwei Arten:
Makro-Weissraum – der grosse Raum zwischen Sektionen, um Bilder, zwischen Hero und nächstem Block. Er bestimmt das Gefühl der ganzen Seite.
Mikro-Weissraum – der kleine Raum zwischen Zeilen, Buchstaben, Listeneinträgen. Er bestimmt ob Text angenehm zu lesen ist oder nicht.
Beides zusammen macht den Unterschied zwischen einer Website die erschlägt – und einer die einlädt.
Die Psychologie dahinter – warum Leere verkauft
1. Weissraum signalisiert Premium
Das Gehirn verbindet Leere mit Exklusivität. Warum?
Weil teure Dinge Raum brauchen. Ein Juwelier legt einen Ring auf ein weisses Kissen – nicht neben zwanzig andere Ringe. Ein Luxusauto steht alleine im Showroom – nicht zwischen fünfzehn anderen Modellen. Ein Hochpreisprodukt auf einer Website: auf weissem Hintergrund, mit viel Luft, allein.
Das ist kein Zufall. Apple hat das verstanden wie kein anderes Unternehmen. Ihre Produktseiten sind zu 70% leer. Und trotzdem – oder genau deshalb – wirken die Produkte begehrenswert.
Wenn du also deine Website vollpackst, sendest du unbewusst das Signal: «Das hier ist billig. Wir haben viel und verkaufen günstig.»
2. Weissraum lenkt den Blick
Das Auge braucht einen Ruhepunkt. Auf einer vollen Seite wandert es ziellos. Auf einer Seite mit viel Weissraum wird es automatisch zu dem geführt was übrig ist.
Wenn du einen Button auf einer vollen Seite platzierst, ist er einer von zwanzig Elementen. Wenn du denselben Button mit viel Raum drum herum zeigst, ist er das einzige was zählt.
Das ist keine Designmeinung. Das ist Wahrnehmungspsychologie. Isolierte Elemente werden zuerst wahrgenommen – weil das Gehirn Kontrast sucht. Je mehr Raum ein Element hat, desto mehr Gewicht bekommt es.
3. Weissraum reduziert kognitive Last
Wenn jemand auf deine Website kommt, muss sein Gehirn in Millisekunden entscheiden: Was ist hier wichtig? Was soll ich lesen? Was soll ich tun?
Auf einer vollen Seite kostet diese Entscheidung Energie. Und wenn etwas Energie kostet, weicht das Gehirn aus. Es entscheidet sich für die einfachste Option: weggehen.
Weissraum nimmt diese Entscheidung weg. Er sagt dem Gehirn: «Hier. Schau da hin. Das ist wichtig.»
Laut einer Studie von Wichita State University erhöht grosszügiger Weissraum die Lesbarkeit um bis zu 20% – und das Vertrauen in eine Website spürbar.
4. Weissraum signalisiert Selbstbewusstsein
Eine volle Website sagt: «Wir haben Angst dass du gehst wenn wir nicht alles zeigen.»
Eine Website mit viel Weissraum sagt: «Wir sind sicher. Was wir anbieten, reicht. Wir brauchen keine Ablenkung.»
Das ist ein psychologischer Effekt den Besucher spüren – auch wenn sie ihn nicht benennen können. Und dieses Gefühl überträgt sich direkt auf dein Angebot.
5 konkrete Beispiele – Weissraum in der Praxis
Beispiel 1: Apple – das Lehrbuch
Apple ist das beste Beispiel weltweit für Weissraum als Verkaufsstrategie. Ihre iPhone-Seiten sind zu über 60% leer. Das Produkt steht alleine im Raum. Der Headline ist kurz. Der Text minimal.
Was das auslöst: Das Produkt wirkt teuer. Begehrenswert. Premium. Nicht weil es beschrieben wird – sondern weil ihm Raum gegeben wird.
Was du lernst: Dein wichtigstes Angebot verdient Raum. Stell es alleine hin. Lass es atmen.
Beispiel 2: Linear – Weissraum als Positionierung
Linear ist Projektmanagement-Software für Tech-Teams. Ihre Website ist extrem leer. Dunkler Hintergrund, wenige Wörter, viel Raum.
Das Signal: Das hier ist für Menschen die Qualität schätzen. Wer ein überfülltes Jira gewohnt ist und auf Linear trifft, spürt sofort: das ist anders. Das ist für uns.
Weissraum ist hier Zielgruppenfilter. Er spricht an – und schreckt bewusst andere ab.
Was du lernst: Weissraum kann Positionierung kommunizieren. Eine aufgeräumte Seite sagt: «Wir sind Premium. Nicht für jeden.»
Beispiel 3: Notion – Weissraum im Content-Block
Notion hat viel Inhalt auf ihrer Website. Aber sie arbeiten mit grossen Abständen zwischen den Sektionen. Jeder Block atmet. Kein Block klebt am nächsten.
Das Ergebnis: Obwohl viel Information vorhanden ist, fühlt sich die Seite leicht an. Der Leser scrollt gerne – weil es sich nicht anfühlt wie Arbeit.
Was du lernst: Weissraum zwischen Sektionen ist genauso wichtig wie der Raum innerhalb von Sektionen. Grosszügige Abstände zwischen Blöcken machen Inhalt verdaulich.
Beispiel 4: Stripe – Weissraum im Text
Stripe schreibt kurze Sätze. Kurze Absätze. Und zwischen jedem Absatz: viel Luft. Das ist bewusstes Mikro-Weissraum-Design.
Auf Websites wird Text oft zu eng gesetzt. Zeilenabstand zu gering, Absätze zu lang, keine Atempause. Das Ergebnis: niemand liest.
Stripe zeigt: Wenn du willst dass Texte gelesen werden, gib ihnen Raum.
Was du lernst: Zeilenabstand von 1.6 bis 1.8. Absätze maximal 3–4 Sätze. Nach jedem Absatz mindestens 16px Abstand. Das ist der Unterschied zwischen «wird gelesen» und «wird überflogen».
Beispiel 5: Eine lokale Handwerker-Website – Vorher / Nachher
Kein berühmtes Unternehmen – sondern ein konkretes Beispiel aus der Praxis. Ein Schreiner aus Zürich hatte eine vollgepackte Startseite: Willkommenstext, drei Spalten mit Dienstleistungen, Referenzbilder, Google-Bewertungen, Kontaktformular – alles on der Startseite, alles gleichzeitig sichtbar.
Nach der Überarbeitung: Ein Hauptbild eines Projekts. Ein kurzer Headline. Ein Button. Referenzen und Dienstleistungen weiter unten nach dem Scrollen.
Ergebnis: Die Anfragen verdoppelten sich innerhalb von sechs Wochen. Nicht weil mehr Information vorhanden war – sondern weil weniger im Weg stand.
Weissraum richtig einsetzen – konkrete Regeln
Was du konkret auf deiner Website änderst
1. Sektionen auseinanderziehen
Der häufigste Fehler: Sektionen kleben aneinander. Kein Atemraum. Der Besucher weiss nicht wo eine Sektion endet und die nächste beginnt.
Was du tust: Erhöhe den Abstand zwischen Sektionen auf mindestens 80–120 Pixel. Auf mobil mindestens 60px. Das fühlt sich anfangs nach «zu viel» an. Es ist es nicht.
2. Text kürzen – nicht strecken
Viele kompensieren zu wenig Inhalt mit zu viel Text. Lange Absätze, enge Zeilenabstände, kein Raum.
Was du tust: Kürze jeden Absatz auf 3–4 Sätze. Setze den Zeilenabstand auf 1.7. Füge nach jedem Absatz 20px Abstand ein. Dann schau dir die Seite an. Sie wirkt sofort grösser – obwohl du Inhalt entfernt hast.
3. Den CTA isolieren
Der wichtigste Button auf deiner Seite steht meistens zwischen anderen Elementen. Er hat links einen Text, rechts eine Grafik, oben eine Überschrift.
Was du tust: Gib dem primären CTA-Button mindestens 40px Raum nach oben und unten. Kein anderes Element direkt daneben. Lass ihn alleine stehen. Dein Auge – und das Auge deiner Besucher – wird sofort dorthin gehen.
4. Bilder nicht vollflächig kleben
Bilder die direkt am Rand oder direkt am Text kleben, wirken billig. Als ob man sich den Rahmen nicht leisten wollte.
Was du tust: Gib jedem Bild mindestens 24px Abstand zum Text. Auf grossen Bildschirmen mehr. Das Bild wirkt sofort hochwertiger – obwohl du nichts am Bild selbst geändert hast.
5. Navigation auflockern
Menüpunkte die zu nah beieinander sind, sehen überladen aus – und sind auf dem Handy schwer zu tippen.
Was du tust: Erhöhe den Abstand zwischen Navigationspunkten auf mindestens 24px. Entferne Punkte die niemand klickt. Weniger Punkte mit mehr Raum wirken immer besser als viele Punkte ohne Raum.
Der häufigste Einwand – und die ehrliche Antwort
«Aber dann sieht die Seite so leer aus. Die Kunden denken wir haben nichts zu bieten.»
Das Gegenteil ist der Fall.
Eine volle Seite signalisiert Unsicherheit. «Wir zeigen alles, weil wir Angst haben dass du nicht scrollst.»
Eine aufgeräumte Seite signalisiert Selbstbewusstsein. «Was wir zeigen, reicht. Wir brauchen keine Ablenkung.»
Das billigste Restaurant hat die vollste Karte. Das beste hat die kürzeste.
Wenn ein Besucher auf deiner Website landet und denkt «hier ist nicht viel» – dann hast du das Falsche weggelassen. Wenn er denkt «hier weiss man was man will» – dann hast du es richtig gemacht.
Checkliste: Weissraum-Check für deine Website
Punkt | Optimiert? |
|---|---|
Sektionen haben min. 80px Abstand zueinander | ☐ |
Zeilenabstand ist mindestens 1.6 | ☐ |
Absätze sind max. 3–4 Sätze lang | ☐ |
CTA-Button hat 40px Raum nach oben und unten | ☐ |
Bilder haben min. 24px Abstand zum Text | ☐ |
Navigation hat min. 24px zwischen den Punkten | ☐ |
Keine zwei gleichwichtigen Elemente direkt nebeneinander | ☐ |
Mobile: alle Abstände auf kleinem Bildschirm geprüft | ☐ |
Fazit: Weissraum ist keine Leere. Er ist Entscheidung.
Jedes Mal wenn du auf deiner Website etwas weglässt, entscheidest du dass das was bleibt wichtiger ist. Das ist keine Schwäche. Das ist Stärke.
Die Websites die am meisten verkaufen, sind nicht die vollsten. Sie sind die klarsten. Sie wissen was sie zeigen wollen – und sie geben dem Raum.
Schau dir deine Website an. Was würde passieren wenn du die Hälfte der Elemente entfernst?
Wahrscheinlich: mehr Anfragen.
Du willst dass deine Website klarer und überzeugender wird?
Ich analysiere deine Website und zeige dir konkret wo Weissraum fehlt – und was du heute noch ändern kannst.
Jetzt kostenlose Website-Analyse anfragen →
Häufige Fragen
Kann zu viel Weissraum schaden?
Theoretisch ja – wenn so viel Raum da ist dass der Besucher nicht weiss wo er hinschauen soll. In der Praxis ist das aber kaum das Problem. Das wirkliche Problem ist fast immer zu wenig Weissraum. Die Faustregel: Wenn du denkst du hast genug – verdopple es. Du wirst selten übertreiben.
Funktioniert Weissraum auch auf mobilen Websites?
Ja – und auf Mobile ist er noch wichtiger. Kleine Bildschirme verzeihen Enge noch weniger als grosse. Wer auf Mobile zu viel auf einmal zeigt, verliert sofort. Gleichzeitig gilt: Mobile-Abstände dürfen etwas kleiner sein als auf Desktop – weil der Bildschirm kleiner ist. 60px Sektionsabstand auf Mobile ist besser als 80px auf Desktop.
Muss ich meine ganze Website neu aufbauen um mehr Weissraum zu haben?
Nein. Meistens reichen gezielte Anpassungen: Sektionsabstände vergrössern, Absätze kürzen, den CTA isolieren. Das sind Änderungen die in einer halben Stunde gemacht sind – und sofort sichtbar wirken. Ein kompletter Neuaufbau ist nur nötig wenn die Grundstruktur grundlegend falsch ist.
Bereit für eine Website, die wirklich funktioniert?
Ich analysiere dein Projekt kostenlos und zeige dir, was möglich ist.