Weißraum ist mehr als der Leerraum zwischen Elementen einer Website. In Wahrheit ist es ein leistungsstarkes Werkzeug, das intelligent eingesetzt werden kann, um dem Benutzer eine Atempause zu geben, seine Aufmerksamkeit zu lenken und seine Reise zu erleichtern.
Finde heraus wie.
Beim Webdesign gibt es viele verschiedene Ansätze – von Minimalismus über Flat Design, Materialdesign bis hin zum kreativen Einsatz von Kontrasten. Ein weiteres unglaublich wichtiges Werkzeug im Webdesign ist Weißraum.
Weißraum fördert Minimalismus und Ausgewogenheit. Es kann auch die Benutzererfahrung verbessern, indem es beispielsweise Absatzumbrüche und Leerzeichen für eine bessere Lesbarkeit erstellt.
Die Verwendung von Leerzeichen sollte jedoch verantwortungsbewusst und korrekt erfolgen. Wenn Sie zu wenig verwenden, können Sie die Lesbarkeit und Benutzerfreundlichkeit einer Website stark beeinträchtigen. Verwenden Sie zu viel und Sie riskieren, die falsche Nachricht zu senden.
In diesem Artikel besprechen wir, was Leerraum ist, welche Arten von Leerräumen es gibt, warum Sie ihn verwenden sollten, und zeigen Ihnen vor allem Beispiele für eine gute Implementierung von Leerräumen.
Was ist Weißraum?
Weißraum oder Negativraum ist ein Designbegriff, mit dem wir uns auf die Leere um oder innerhalb von Elementen des Designs beziehen.
Wenn Sie sich die Homepage der Website von The New Yorker, Sie werden überall Beispiele dafür sehen:
Die großen Flächen rund um das Logo von The New Yorker:
Die äquidistanten Leerzeichen, die jeden der Navigationslinks trennen:
Die Stempel, die um jeden der Inhaltsblöcke der Startseite herum erstellt wurden:
Auch die Richtungswahl und das Typografie-Tracking zeigen die Nützlichkeit von Whitespace im Website-Design.
Werfen Sie einen Blick auf die Website von 2008 und Sie werden sehen, wie viel Weißraum einen großen Unterschied macht:
Es gibt weiße Flächen, obwohl sie nicht so stilvoll oder strategisch sind wie das, was wir heute auf der Website sehen.
Woher kommt Weißraum?
Der Begriff „Weißraum“ ist etwas irreführend. Während einige Beispiele für Weißraum tatsächlich weiß sind (wie das Beispiel von The New Yorker oben), ist dies normalerweise nicht der Fall.
Um zu verstehen, warum Weißraum seinen Namen hat, müssen wir uns ansehen, woher er kommt.
Obwohl bei der Erstellung des Leerraums niemand genannt wird, können wir ihn den folgenden Teilen zuordnen:
Der erste sind die chinesischen Künstler und Kalligraphen des 20. Jahrhunderts. Die leeren Stellen auf dem weißen Reispapier, an dem sie arbeiteten, wurden nicht als verschwendeter Platz behandelt. Sie fanden einen Sinn in der Leere und glaubten, dass dies zum Gesamtverständnis des Gesamtbildes beitrug.
Sie nannten es „weißes Design“.
Carol Douglas erklärt den Wert des Weißraums in der chinesischen Kunst:
„In der chinesischen Kunst wird vom leeren Raum erwartet, dass er Informationen durch seinen Mangel an Bildern vermittelt. Die Größen und Umrisse leerer Formen schaffen Rhythmus und Einheit. Feste Formen geben der Leere eine Bedeutung und umgekehrt.
Weißraum wurde später dank des Modernismus, der sich auf Minimalismus, strukturierte Raster und Negativraum konzentrierte, zu einem Grundnahrungsmittel im Druckdesign.
Daher ist es auch wahrscheinlich, dass wir es aufgrund des weißen Papiers, auf das die Modernisten geschrieben haben, oder der weißen Leinwände, auf die sie gemalt haben, als Weißraum bezeichnen.
Die verschiedenen Arten von Leerzeichen, die Sie kennen müssen
Normalerweise teilen wir Weißraum in zwei verschiedene Kategorien ein:
Mikro vs. Leerraum. Makro
Mikro- und Makro-Weißraum definieren den Weißraum nicht nur anhand der Größe.
Mikroweiße Räume beziehen sich auf die kleineren Räume und Puffer, die um den Inhalt herum aufgebaut sind. Zum Beispiel kann ein Mikro-Leerraum gefunden werden zwischen:
- Briefe
- Text
- Absätze
- Navigationslinks
- Bilder oder Inhalte in einem Raster
- Formularfelder
Der Zweck von Mikroweißraum besteht darin, die Lesbarkeit Ihrer Inhalte zu verbessern.
Der Makro-Weißraum bezieht sich auf größere Bereiche ohne Inhalt. Zum Beispiel kann Makro-Leerraum gefunden werden:
- Am Rand einer Website
- Um das Logo in der Kopfzeile
- Zwischen Abschnitten einer Seite
- In den Heldenbildern
- In der Trennung von Hauptinhalt und Seitenleiste
- In Bildern
- Um die CTA-Schaltflächen
Der Zweck von Makro-Leerräumen besteht darin, das Layout der Website zu verbessern und die Verständlichkeit und Navigation zu erleichtern.
Passiver Weißraum und aktiver Weißraum
Weiße Räume können auch in passive und aktive Kategorien unterteilt werden.
Passive Leerzeichen beziehen sich auf Lücken, die im Design oder in der Typografie natürlich vorkommen. Sie können die Größe dieser Räume in Bezug auf die Ästhetik steuern, aber sie werden vorhanden sein, ob Sie sie dort platzieren oder nicht.
Aktiver Leerraum bezieht sich auf leere Bereiche, die absichtlich zu einer Seite hinzugefügt wurden, um die Bewegung zu erleichtern. Das Ziel besteht darin, den Blick eines Besuchers über die Seite oder durch einen Prozess zu führen, bis er die unvermeidliche Schlussfolgerung und Konversion erreicht.
Warum Sie Leerzeichen auf Websites verwenden sollten
Hier sind einige der wichtigsten Gründe, warum Whitespace in jede von Ihnen entworfene Website eingebaut werden sollte:
Es ist ein Klassiker
Unterschiedliche Trends im Webdesign, die vielleicht nur gut aussehen oder nur für kurze Zeit relevant sind, White Space ist ein dauerhafter Klassiker. Schauen Sie sich nur an, wie lange es sie schon gibt und wie sie sich von der chinesischen Kalligraphie zu modernistischen Werken entwickelt hat – und jetzt ins Internet.
Wenn Sie Ihre Webdesigns nachhaltig gestalten möchten, sollte Weißraum einer davon sein.
Es führt zu attraktiveren Schnittstellen
Das Betreten einer Website ist ein bisschen so, als würde man jemandes Haus betreten. Sie brauchen nur ein paar Sekunden, um ein Gefühl dafür zu bekommen, wie wohl Sie sich fühlen werden.
Mit der richtigen Menge an Weißraum können Sie den perfekten Kontrast zwischen Inhalt und Raum schaffen.
Aber es liegt an Ihnen, das richtige Verhältnis zu bestimmen. Für eine Marke wie Google funktioniert dieser Leerraum:
Bei einer anderen Marke könnte eine zu vereinfachte Benutzeroberfläche die Website jedoch zu leer und die Marke wertlos machen. Wenn Sie jedoch die richtige Balance finden, kann Ihre Wahl des Leerraums definitiv dazu beitragen, dass eine Website für ihre Zielbenutzer attraktiv ist.
Es macht Websites einfacher zu verwenden
Wenn Sie sich mit den Prinzipien des Webdesigns beschäftigen, werden Sie feststellen, dass Positionierung und Abstände darin stark vertreten sind.
Wenn Sie diese Designprinzipien auf Websites anwenden, nutzen Sie die Benutzerpsychologie, um Benutzeroberflächen und Journeys zu erstellen, die leicht zu verstehen und zu befolgen sind.
Nehmen Sie dieses Beispiel aus dem Fitts-Gesetz:
Leerzeichen um Inhalte, Links und die CTA-Schaltfläche verbessern nicht nur das Aussehen dieser Seiten. Sie können auch das Vertrauen der Benutzer und die Klickgenauigkeit verbessern.
Es verbessert die Konzentration
Wenn Sie den Besuchern zu viele Inhalte auf einmal zuwerfen, können sie überfordert sein und es fällt ihnen schwer, sich auf eine Sache zu konzentrieren.
Es ist ein Phänomen, das erklärt wird durch Hicks Gesetz :
Je mehr Reize gleichzeitig vorhanden sind, desto länger dauert es, bis die Menschen darauf reagieren. Und im Falle einer Website kann dies ausreichen, um sie von einer Entscheidung abzuhalten.
Indem Sie um jeden Bereich Ihrer Webseite Platz schaffen, können Sie Ihren Besuchern einen Moment Zeit nehmen, um durchzuatmen und darüber nachzudenken, was sie sehen. Dies verlangsamt den Entscheidungsprozess… aber auf eine gute Art und Weise.
Es ist nützlich für dieOrganisation
Wenn Sie eine Menge Inhalte in eine Website aufnehmen müssen, ist es ziemlich einfach herauszufinden, wie Sie sie in verschiedene Abschnitte und Seiten aufteilen können. Es reicht jedoch nicht aus, Inhalte einfach in verschiedene Container zu legen.
Wenn Sie Platz um Inhalt oder seinen Container hinzufügen, senden Sie ein Signal über die Bedeutung dieses Inhalts und seine Beziehung zu dem, was ihn umgibt.
Le Nielsen Norman Group erklärt wie es funktioniert:
In dieser Grafik sehen Sie keine 20 Punkte. Sie sehen links einen größeren Punktbereich und rechts einen kleineren Bereich. Es sind die äquidistanten Abstände zwischen den gruppierten Punkten und die größten zwischen den Gruppen, die es uns ermöglichen, sie als zusammenhängende Einheiten im Gegensatz zu den einzelnen Punkten zu sehen.
Es verbessert die Lesbarkeit Ihrer Inhalte
Wenn es sich um einen kurzen Text in a . handelt Heldenbild, ein langer Blog-Beitrag oder eine sehr anschauliche Produktseite, möchten Sie, dass die Besucher den Inhalt dort lesen.
Die Größe Ihrer Schriftart hilft dabei, die Aufmerksamkeit auf Ihre Wörter zu lenken, aber es ist der Abstand zwischen Buchstaben, Wörtern und Absätzen, der dafür sorgt, dass sie leicht gelesen werden können.
Die Nielsen Norman Group ist der Ansicht, dass der Schriftabstand einer der drei Faktoren ist, die ein Design schön machen:
Diese Grafik zeigt die verschiedenen Möglichkeiten, wie dadurch die Lesbarkeit verbessert wird.
11 inspirierende Beispiele für Weißraum im Webdesign
Da es so viele Möglichkeiten gibt, Whitespace zur Verbesserung einer Website zu verwenden, werde ich 11 Beispiele vorstellen, die verschiedene Arten von Whitespace besonders gut verwenden.
Das Logo des Pittsburgh Zoo und des PPG Aquariums
Wenn Sie einen kurzen Blick auf das Logo der Pittsburgh Zoo, werden Sie wahrscheinlich zuerst den weißen Baum und die herumfliegenden Vögel sehen. Bei genauerem Hinsehen entdeckt man jedoch ein verstecktes Bild im Negativraum: einen Gorilla, der einem Löwen gegenübersteht.
Diese kreative Verwendung von Weißraum macht dieses Logo und seine Marke zu einem unvergesslichen Erlebnis. Außerdem ist die versteckte Überraschung eine großartige Möglichkeit, bei Besuchern einen starken ersten Eindruck zu hinterlassen.
Circa 1886 Heldenbildergalerie
Das Hero-Image auf einer Website muss die Aufmerksamkeit des Besuchers effektiv auf sich ziehen können. Dazu gibt es mehrere Möglichkeiten. Sie können das Heldenbild hauptsächlich mit Farben und Formen gestalten, um den Druck glänzen zu lassen. Oder Sie können wie auf Circa 1886 und lassen Sie Ihre Bilder im Mittelpunkt stehen.
Beachten Sie, wie diese Galerie weiße Teller, weiße Bettwäsche, klare Glaswaren und glänzendes Besteck verwendet, um das Hauptmotiv jedes Fotos zu umrahmen. Dieser buchstäblich weiße Raum hält den Fokus auf das Essen, nicht auf die Ablenkungen des Restaurants oder der Gäste um ihn herum.
Fotos von Florian Schulz Productions
Dies ist die kuratorische Website für Fotografen und Filmemacher von Florian und Emil Schulz. Wie zu erwarten, ist die Website voll von auffälligen Naturfotos.
Es ist ein Beweis dafür, dass White Space nicht nur das Design einer Website verbessert. Durch die Verwendung von Fotos, die den Weißraum gut nutzen, können Sie die Augen Ihrer Besucher effektiver auf Ihre Motive lenken.
Im obigen Beispiel sehen wir, wie die dunkle Masse von Stachelrochen als weißer Raum dient und es ermöglicht, dass Stachelrochen, die sich in grünem Wasser bewegen, den Hauptfokus bilden.
Navigationslinks für Überbestände
Sie denken vielleicht nicht, dass Sie 13 Navigationslinks sauber hintereinander einfügen können, aber die Website vonzu viel lagern beweist, dass Sie falsch liegen. Hier sehen wir, wie der richtige Abstand zwischen den Links die Navigation in einem Menü dieser Größe erleichtert.
Außerdem zwingt es den Einzelhändler nicht, seine Kategorien unter einem Mega-Kategorienmenü oder unter einem Hamburger-Menüsymbol zu verbergen (was heutzutage viele tun).
Udemy-Zeilenabstand
Schauen Sie sich an, wie die Module und Lektionen aufgeteilt sind Udemy. Die Kombination aus hellen Blöcken, fett gedruckten Überschriften und reichlich Abstand um jede Zeile ermöglicht es dem Lernenden, schnell durch den Kurs zu navigieren.
Wenn auf einer Website mehr als 150 Kurse zur Verfügung stehen, müssen Benutzer schnell einschätzen können, ob ein Kurs für sie geeignet ist. Und dabei hilft viel Spielraum – aber nicht zu viel.
Meetup organisierte Benutzeroberfläche
Meetup ist eine Website, die Einheimischen hilft, Gruppen von Menschen mit ähnlichen Interessen zu finden und Veranstaltungen um sie herum zu planen. In großen Städten könnte eine Website wie diese für Benutzer, die scheinbar zu viele Gruppen und Veranstaltungen zur Auswahl haben, überwältigend werden.
Dank der gut organisierten Benutzeroberfläche und des Whitespace, der sie aufgliedert, können Benutzer schnell die Optionen oben auf der Website und der Sidebar auf der rechten Seite filtern. Dann können sie ihre Aufmerksamkeit auf die reduzierten Tagesergebnisse im Zentrum richten.
Die Ränder des Maison De La Luz
Haus von Luz ist ein luxuriöses Boutique-Hotel in New Orleans. Nicht nur die wunderschön illustrierte Website wird ihre Gäste begeistern.
Auf der About-Seite sehen die Besucher zunächst eine Illustration des Interieurs des Hotels. Während sie nach unten scrollen, ahmt es nach, wie sich ihr Blick auf und ab bewegt, während sie das Hotel persönlich bewundern. Auch ohne Animation sieht dieses Layout durch die schmalen Ränder der Grafik im unteren Text sehr ansprechend aus.
Der Fokus der Apple Produkte
Apple gibt es schon lange genug, um kaum ein Wort über seine Produkte zu verlieren. Aus diesem Grund lässt die Mehrheit der Website Produkte sprechen.
Auch wenn Kopien und CTAs vorhanden sind, nehmen sie im Vergleich zu Produkten und den großen Weißflächen, die die Aufmerksamkeit der Besucher auf sich ziehen, wenig Platz ein.
CTAs von Flaute
Der Call-to-Action-Button spielt eine wichtige Rolle in der Reise des Benutzers. Es zwingt sie, eine Pause einzulegen, zu überlegen, was sie bisher gelernt haben, und zu entscheiden, ob sie bereit sind, den nächsten Schritt zu gehen.
Damit die Leute auf den CTA aufmerksam werden, brauchen Sie mehr als eine gute Platzierung oder eine farbige App, um ihn hervorzuheben. Der reichlich weiße Raum um einen CTA ermöglicht es Ihnen, alles andere beiseite zu legen, während Ihr Besucher seine Wahl trifft.
Schwungrad-Preisblöcke
Wenn Sie viele Details auf einmal freigeben möchten, können Sie mithilfe von Größe Hierarchien und Abstände festlegen, um relevante Details zu gruppieren. Dies macht den Entscheidungsprozess für Ihre Besucher reibungsloser, da sie nicht nur eine Textwand zu berücksichtigen haben.
Was wir hier betrachten, ist ein Beispiel für Preisblöcke auf Schwungrad, Diese Art von luftigem Abstand ist für jede Art von Produkt- oder Inhaltsblockdesign nützlich.
Layout des Salesforce-Formulars
Unabhängig von der Art der Formen die Ihre Website verwendet, möchten Sie, dass sie einfach auszufüllen sind. In der kostenlosen Testversion von Salesforce Wir sehen, wie der richtige Abstand ein Formular einladender machen kann.
Leerraum um jedes Feld hilft Benutzern, sich auf jeweils ein Feld zu konzentrieren. Es gibt noch einen weiteren Grund, warum dieser ausreichende Abstand nützlich ist. Wenn jemand beginnt, die Felder auszufüllen, wird jedes Etikett nach oben verschoben. Und wenn ein Fehler auftritt, erscheint die entsprechende Meldung unten.
Nutze gekonnt Leerräume, um bessere Websites zu erstellen
Leerräume können sich auf die Leere einer Website beziehen, aber es gibt eine Menge Bedeutung und Zweck, die in dieser Leere leben.
Indem Sie die Kontrolle über die Abstände auf einer Website übernehmen, können Sie ein besseres Erlebnis für alle Besucher schaffen.
Wir haben Ihnen zwar einige Möglichkeiten gezeigt, dies zu tun, aber die Anwendung auf Ihre Designs ist eine andere Geschichte.
Aber keine Sorge. das Page Builder Elementor erleichtert das Hinzufügen von Leerzeichen zu Ihren Designs.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
Hier ! Das war's für diesen Artikel, der sich dem White Space im Webdesign widmet. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...