Weißraum im Webdesign: Definition und Praktiken

Es gibt viele verschiedene Ansätze für Webdesign – von Minimalismus über Flat Design bis hin zu Material Design und dem kreativen Einsatz von Kontrasten. Ein weiteres unglaublich wichtiges Werkzeug im Webdesign ist der Weißraum. Weißraum fördert den Minimalismus und die Ausgewogenheit. Außerdem kann er die Benutzerfreundlichkeit verbessern, indem er beispielsweise Absatzumbrüche und Platz für eine bessere Lesbarkeit schafft.

Allerdings muss der Weißraum verantwortungsvoll und korrekt eingesetzt werden. Wenn du zu wenig davon verwendest, kannst du die Lesbarkeit und Benutzerfreundlichkeit einer Website erheblich beeinträchtigen. Wenn du zu viel davon verwendest, besteht die Gefahr, dass du die falsche Botschaft über die Marke aussendest.

In diesem Artikel werden wir erörtern, was Weißraum ist, welche verschiedenen Arten es gibt, warum du ihn verwenden solltest, und – was noch wichtiger ist – Beispiele für einen guten Einsatz von Weißraum.

Was ist Weißraum?

Weißraum oder negativer Raum ist ein Designbegriff, der sich auf die Leere um oder innerhalb von Elementen im Design bezieht.
Wenn du dir die Startseite von The New Yorker ansiehst, werden wir überall Beispiele dafür finden:

.• Die großen Flächen, die das Logo von The New Yorker einrahmen
• Die äquidistanten Abstände, die die einzelnen Navigationslinks voneinander trennen
• Die Puffer, die die einzelnen Inhaltsblöcke der Homepage umschließen
• Sogar die Wahl des Designers in Bezug auf Kerning, Zeilenabstand und Laufweite für die Typografie zeigt, wie nützlich Weißraum im Website-Design ist.

Schaue dir mal die Website aus dem Jahr 2008 an, und du wirst sehen, was für einen großen Unterschied der Weißraum macht:

Es gibt zwar etwas Weißraum, aber er ist nicht so elegant oder strategisch eingesetzt, wie wir es heute auf der Website sehen.

Woher kommt der Weißraum?

Der Begriff „Weißraum“ ist etwas irreführend. Zwar sind einige Beispiele für Weißraum tatsächlich weiß (wie das obige Beispiel von The New Yorker), aber das ist normalerweise nicht der Fall. Um zu verstehen, woher der Weißraum seinen Namen hat, müssen wir uns ansehen, woher er stammt. Es gibt zwar keine Person, die für die Schaffung des Weißraums oder dessen Namensgebung verantwortlich war, aber wir können ihn den folgenden Parteien zuschreiben:

Der ersten sind die chinesischen Künstler und Kalligraphen des 20. Jahrhunderts. Die leeren Stellen auf dem weißen Reispapier, auf dem sie arbeiteten, wurden nicht als vergeudeter Raum betrachtet. Sie sahen in der Leere einen Sinn und glaubten, dass sie zum Gesamtverständnis des Bildes beiträgt. Sie bezeichneten dies als „Gestaltung des Weiß“. Carol Douglas erklärt den Wert des Weißraums in der chinesischen Kunst: „In der chinesischen Kunst wird vom leeren Raum erwartet, dass er allein durch seine Abwesenheit von Bildern Informationen vermittelt. Die Größen und Konturen der leeren Formen schaffen Rhythmus und Einheit. Die festen Formen geben der Leere eine Bedeutung und umgekehrt.“ Der Weißraum wurde später dank der Moderne, die sich auf Minimalismus, strukturierte Raster und negativen Raum konzentrierte, zu einem festen Bestandteil des Druckdesigns.
Es ist also wahrscheinlich, dass wir den Weißraum wegen des weißen Papiers, auf dem die Modernisten schrieben, oder wegen der weißen Leinwände, auf denen sie malten, als Weißraum bezeichnen.

Arten von Weißraum, die du kennen solltest

Normalerweise wird der Weißraum in zwei verschiedene Kategorien unterteilt:

Mikro- vs. Makro-Weißraum

Mikro- und Makro-Weißraum definiert Weißraum nicht nur anhand seiner Größe. Mikro-Weißraum bezieht sich auf die kleineren Lücken und Puffer, die um den Inhalt herum aufgebaut werden. Mikro-Weißraum befindet sich zum Beispiel zwischen:

• Buchstaben
• Wörtern
• Absätzen
• Navigationslinks
• Bildern oder Inhalten in einem Raster
• Formularfelder

Der Zweck von Mikro-Weißraum besteht darin, die Lesbarkeit und Verständlichkeit Ihres Inhalts zu verbessern.
Makro-Weißraum hingegen bezieht sich auf größere Bereiche ohne Inhalt. Makro-Weißraum kann zum Beispiel vorkommen:

• An den Rändern einer Website
• Um das Logo in der Kopfzeile
• Zwischen den Abschnitten einer Seite
• In Hero-images
• Zwischen dem Hauptinhalt und der Seitenleiste
• In Bildern
• Um CTA-Schaltflächen herum

Der Zweck von Makro-Weißraum besteht darin, das Layout der Website zu verbessern und sie verständlicher und übersichtlicher zu machen.

Passiver vs. aktiver Weißraum


Weißraum kann auch in passive und aktive Kategorien unterteilt werden.

Passiver Weißraum bezieht sich auf die Lücken, die natürlich im Design oder in der Typografie vorkommen. Du kannst aus ästhetischen Gründen bestimmen, wie groß oder klein diese Lücken sind, aber sie sind vorhanden, egal ob du sie dort platzierst oder nicht.
Aktiver Weißraum bezieht sich auf leere Bereiche, die absichtlich auf einer Seite hinzugefügt werden, um den „Verkehrsfluss“ zu unterstützen. Das Ziel ist es, den Blick des Besuchers über die Seite oder durch einen Prozess zu leiten, bis er zum unvermeidlichen Schluss kommt und konvertiert.

Warum du Weißraum auf Websites verwenden solltest

Hier sind einige der wichtigsten Gründe, warum Weißraum in jede von dir gestalteten Websites eingebaut werden sollten:

Er ist klassisch

Im Gegensatz zu Webdesign-Trends, die vielleicht nur für eine kurze Zeit gut aussehen oder relevant sind, ist der Weißraum ein dauerhafter Klassiker. Schaue dir nur an, wie lange es ihn schon gibt und wie er sich von der chinesischen Kalligrafie zu den Werken der Moderne – und jetzt zum Web entwickelt hat. Wenn du deine Webdesigns zukunftssicher machen willst, muss Weißraum ein Teil davon sein.

Er führt zu attraktiveren Interfaces

Das Betreten einer Website ist so ähnlich wie das Betreten eines Hauses. Man braucht nur ein paar Sekunden, um ein Gefühl dafür zu bekommen, wie wohl man sich darin fühlen wird. Mit der richtigen Menge an Weißraum kannst du den perfekten Kontrast zwischen Inhalt und Raum schaffen. Aber es liegt an dir, das richtige Verhältnis zu finden. Für eine Marke wie Google funktioniert viel Weißraum sehr gut:

Für eine andere Marke hingegen könnte eine zu stark vereinfachte Benutzeroberfläche die Website zu leer und die Marke wertlos erscheinen lassen. Wenn du jedoch das richtige Gleichgewicht findest, kann die Wahl des Weißraums sicherlich dazu beitragen, dass eine Website für die Benutzer*innen attraktiv aussieht.

Er macht Websites Benutzerfreundlicher

Wenn du die Grundsätze der Website-Gestaltung studierst, wirst du feststellen, dass Positionierung und Abstände eine wichtige Rolle spielen. Wenn du diese Designprinzipien auf Websites anwendest, nutzt du die Psychologie der Nutzer, um Schnittstellen und User Journeys zu schaffen, die einfach zu verstehen und zu befolgen sind.
Nehmen wir dieses Beispiel des Fitts’schen Gesetzes:

Die Freiräume um den Inhalt, die Links und die CTA-Schaltfläche verbessern nicht nur das Aussehen dieser Seiten. Sie können auch die Klicksicherheit und -genauigkeit des Nutzers verbessern.

Er verbessert den Fokus

Wenn man den Besuchern*innen zu viele Inhalte auf einmal vorsetzt, kann sie das überwältigen und sie werden Schwierigkeiten haben, sich auf eine Sache zu konzentrieren. Dieses Phänomen wird durch das Hicksche Gesetz erklärt: Je mehr Reize auf einmal vorhanden sind, desto länger dauert es, bis die Menschen darauf reagieren. Und im Falle einer Website könnte dies ausreichen, um sie davon abzuhalten, überhaupt eine Entscheidung zu treffen. Indem du um jeden Bereich deiner Website herum Platz schaffst, gibst du deinen Besuchern die Möglichkeit, einen Moment zu verschnaufen und darüber nachzudenken, was sie sich ansehen. Das verlangsamt den Entscheidungsprozess … aber auf eine gute Art.

Er ist nützlich für die Organisation

Wenn du eine große Menge an Inhalten in deine Website aufnehmen willst, ist es einfach, diese in verschiedene Abschnitte und Seiten aufzuteilen. Es reicht jedoch nicht aus, die Inhalte einfach in verschiedene Container zu packen.
Wenn du Raum um den Inhalt oder seinen Container herum einfügst, signalisierst du, wie wichtig dieser Inhalt ist und wie er sich zu dem, was ihn umgibt, verhält.
Die Nielsen Norman Group erklärt, wie das funktioniert:

In dieser Grafik sehen Sie keine 20 Punkte. Sie sehen einen größeren Bereich von Punkten auf der linken Seite und einen kleineren auf der rechten Seite. Es sind die äquidistanten Abstände zwischen den gruppierten Punkten und der größere Abstand zwischen den Gruppen, die es uns ermöglichen, sie als zusammengehörige Einheiten und nicht als einzelne Punkte zu sehen.

Er verbessert die Lesbarkeit und Verständlichkeit deiner Inhalte

Egal, ob es sich um einen kurzen Text in einem Hero-Bild, einen langen Blog-Beitrag oder eine sehr beschreibende Produktseite handelt, du möchtest, dass deine Besucher den Inhalt lesen können. Die richtige Größe deiner Schriftarten trägt dazu bei, die Aufmerksamkeit auf deine Worte zu lenken, aber es sind die Abstände zwischen den Buchstaben, Wörtern und Absätzen, die sicherstellen, dass sie leicht gelesen werden können.
Die Nielsen Norman Group ist der Meinung, dass die Abstände in der Typografie einer der drei Faktoren sind, die ein Design gut aussehen lassen:

Diese Grafik veranschaulicht die verschiedenen Möglichkeiten, wie Lesbarkeit und Leserlichkeit dadurch verbessert werden.

11 inspirierende Beispiele für Weißraum im Web-Design

Da es so viele Möglichkeiten gibt, Weißraum zu nutzen, um eine Website zu verbessern, möchte ich 11 Beispiele vorstellen, die verschiedene Arten von Weißraum besonders gut nutzen.

1. Pittsburgh Zoo & PPG Aquarium Logo

Wenn du einen kurzen Blick auf das Logo des Zoos von Pittsburgh wirfst, siehst du wahrscheinlich zuerst den weißen Baum und die Vögel, die um ihn herumfliegen. Bei genauerem Hinsehen erkennt man jedoch ein Bild, das sich im negativen Raum versteckt: Ein Gorilla, der einem Löwen gegenübersteht. Diese kreative Nutzung des Weißraums macht dieses Logo und seine Marke sehr einprägsam. Darüber hinaus ist die versteckte Überraschung eine gute Möglichkeit, einen starken ersten Eindruck bei den Besuchern zu hinterlassen.

2. Circa 1886s Hero-Bildgalerie

Das Hero-Bild einer Website muss die Aufmerksamkeit der Besucher auf sich ziehen. Es gibt mehrere Möglichkeiten, dies zu erreichen. Du kannst das Hero-Bild hauptsächlich mit Farben und Formen gestalten, um den Text zur Geltung zu bringen. Oder du machst es wie Circa 1886 und lässt deine Bilder in den Mittelpunkt rücken. Beachte, wie diese Galerie weiße Teller, weiße Bettwäsche, klare Gläser und glänzendes Besteck verwendet, um das Hauptmotiv jedes Fotos einzurahmen. Dieser buchstäblich Weißraum lenkt den Fokus auf das Essen und nicht auf die Ablenkung durch das Restaurant oder die Gäste drumherum.

3. Florian Schulz Productions-Fotos

Dies ist die Website der Naturschutzfotografen und Filmemacher Florian und Emil Schulz. Wie nicht anders zu erwarten, ist die Seite voll von auffälligen Naturfotos. Der perfekte Beweis dafür, dass Weißraum nicht nur das Design einer Website verbessert. Wenn du Fotos verwendest, die den Weißraum gut nutzen, kannst du den Blick deiner Besucher effektiver auf dein Themen lenken. Im obigen Beispiel dient die dunkle Masse der Rochen als Weißraum, so dass der sich bewegende Rochen im grünen Wasser im Mittelpunkt steht.

4. Overstock Navigation Links

Man könnte meinen, dass 13 Navigationslinks nicht in eine Zeile passen, aber die Overstock-Website beweist das Gegenteil. Hier sehen wir, wie der richtige Abstand zwischen den Links dafür sorgt, dass ein Menü dieser Größe übersichtlich bleibt. Außerdem ist der Händler nicht gezwungen, seine Kategorien unter einem Kategorien-Megamenü oder unter einem Hamburger-Menü-Symbol zu verstecken (was viele heutzutage tun).

5. Udemy Zeilenabstände

Wirf einen Blick darauf, wie die Module und Lektionen dieser Udemy-Kurse aufgeteilt sind. Die Kombination aus leicht gefärbten Blöcken, fettgedruckten Überschriften und reichlich Abstand um jede Zeile herum macht es einem Lernenden sehr leicht, den Kurs schnell zu durchforsten. Wenn über 150.000 Kurse auf einer Website verfügbar sind, müssen die Nutzer in der Lage sein, schnell zu beurteilen, ob ein Kurs das Richtige für sie ist. Eine gute Menge an Freiraum – aber nicht zu viel – hilft dabei.

6. Meetups organisiertes UI

Meetup ist eine Website, die Einheimischen dabei hilft, Gruppen von Menschen mit denselben Interessen zu finden und Veranstaltungen in deren Umfeld zu planen. In großen Städten könnte eine solche Website für Nutzer, die scheinbar zu viele Gruppen und Veranstaltungen zur Auswahl haben, überwältigend werden. Dank der gut organisierten Benutzeroberfläche und des Weißraums, der sie auflockert, können die Benutzer*innen schnell durch die Optionen am oberen Rand der Website und in der Seitenleiste auf der rechten Seite filtern. Dann können sie ihre Aufmerksamkeit auf die nach Tagen eingegrenzten Ergebnisse in der Mitte richten.

7. Die Ränder von Maison de la Luz

Maison de la Luz ist ein Boutique-Luxushotel in New Orleans. Seine wunderschön illustrierte Website ist nicht das Einzige, was seine Gäste beeindrucken wird. Auf der Über-uns-Seite sehen die Besucher zunächst eine Illustration der Inneneinrichtung des Hotels. Wenn sie nach unten scrollen, ahmt das nach, wie sich ihr Blick auf und ab bewegen könnte, während sie das Hotel persönlich bewundern. Auch ohne Animation wirkt dieses Layout dank der sich verengenden Ränder der Grafik zum darunter liegenden Text sehr ansprechend.

8. Apples Produktfokus

Apple gibt es schon so lange, dass es kaum noch ein Wort über seine Produkte verlieren muss. Deshalb überlässt der Großteil der Website den Produkten das Sprechen. Selbst wenn Texte und CTAs vorhanden sind, nehmen sie nur wenig Platz im Vergleich zu den Produkten und dem großen Weißraum ein, der die Aufmerksamkeit der Besucher auf sie lenkt.

9. Lulls CTAs

Der Call-to-Action-Button spielt eine wichtige Rolle in der Reise des Nutzers. Er zwingt sie dazu, innezuhalten, zu überlegen, was sie bisher gelernt haben und zu entscheiden, ob sie bereit sind, den nächsten Schritt zu tun. Um die Aufmerksamkeit der Nutzer auf die CTA-Schaltfläche zu lenken, bedarf es mehr als nur einer guten Platzierung oder Farbanwendung, damit sie auffällt. Wie bei den beiden Schaltflächen von Lull oben kannst du mit reichlich Weißraum um die CTA herum alles andere beiseiteschieben, während deine Besucher ihre Wahl treffen.

10. Flywheels Preisgestaltungsblöcke

Wenn du viele Details auf einmal mitteilen müsst, kannst du die Größe nutzen, um eine Hierarchie zu schaffen, und die Abstände nutzen, um relevante Details zusammenzufassen. Dies erleichtert deinen Besuchern die Entscheidungsfindung, da sie nicht nur eine Wand aus Text sehen. Obwohl es sich hier um ein Beispiel für Preisblöcke auf der Flywheel-Website handelt, ist diese Art von luftigen Abständen für jede Art von Produkt- oder Inhaltsblockdesign nützlich.

11. Salesforce-Formular-Layout

Ganz gleich, welche Art von Formularen du auf deiner Website verwendest, du möchtest, dass sie leicht auszufüllen sind. In diesem Salesforce-Formular für kostenlose Testversionen sehen wir, wie die richtigen Abstände ein Formular einladender machen können. Der Leerraum um die einzelnen Felder hilft den Benutzern, sich auf ein Feld nach dem anderen zu konzentrieren. Es gibt noch einen weiteren Grund, warum diese großzügigen Abstände nützlich sind. Wenn jemand mit dem Ausfüllen der Felder beginnt, wird jede Beschriftung nach oben verschoben. Und wenn ein Fehler auftritt, wird die entsprechende Meldung darunter angezeigt.

Übersetzt von Sarah van der Linden
von Website Freiburg

Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/white-space-web-design