So verwenden Sie negativen Raum, um atemberaubende Websites zu erstellen

Websites und Apps haben alle möglichen visuellen Elemente, die nebeneinander existieren müssen – Schaltflächen, Spalten, Symbole, Bilder, Linien, Medien und Typografie. Alle diese Elemente benötigen eine Leinwand (die leere Webseite), und diese Leinwand benötigt Leerraum, dh Negativ- oder Leerraum. Ohne sie kann das Auge des Betrachters das Gesehene nicht verarbeiten.

Abonnieren Sie unseren Youtube-Kanal

Was ist negativer Raum?

Positiver Raum ist der Teil der Arbeit, der mit dem Thema oder anderen Schwerpunkten gefüllt ist. Der negative Raum nimmt den Rest ein. Es kann leer oder weiß sein, kontrastierend in Farbe oder Design, ein subtiles Hintergrundbild – was auch immer es ist, es fühlt sich leer an statt voll oder überladen. Aber nur weil der negative Raum hohl ist, heißt das nicht, dass er unwichtig ist – er lenkt die Aufmerksamkeit auf den positiven Raum und wird manchmal sogar selbst zum positiven Raum, wenn man ihn anders betrachtet.

Beispiele für Negativraum

Negativer Raum – und sein Gegenstück, positiver Raum – findet sich in allen Arten von Kunst und Design, einschließlich Webdesign. Schauen wir uns das FedEx-Logo an. Sie sehen violette und orangefarbene Buchstaben, oder? Darin befindet sich jedoch ein Pfeil im weißen Bereich:

Dieser versteckte FedEx-Pfeil verwendet den negativen Raum ähnlich wie beim Zeichnen und Malen – der Umriss wird genauso erstellt, wie der positive Raum erstellt wird. In einem Beispiel wie diesem wird der negative Raum nicht einfach deshalb erstellt, weil er dort nicht ist .

Der NBC-Pfau macht dasselbe:

Während der Sinn des negativen Raums normalerweise darin besteht, den Fokus auf den positiven Raum zu legen, wird er manchmal in cleveren Designs zum Fokus. Hier ist ein weiteres Beispiel – sehen Sie sich an, wie die Zähne des Wolfes einen Baum bilden:

Dafür gibt es einen Begriff: Figur-Grund-Umkehrung. Es bedeutet im Grunde, dass die Vorder- und Hintergrundfarben die Plätze tauschen, um Perspektive und Interpretationen zu ändern. Wenn Sie daran interessiert sind, sehen Sie sich die Arbeiten von MC Escher an, insbesondere seine Verwandlungsdrucke.

Die gleiche Rolle spielt der Negativraum in der Fotografie. Sehen Sie sich dieses Porträt an, das ich vom Sohn meines Cousins, Julian, aufgenommen habe. Der schwarze Hintergrund rückt ihn in den Mittelpunkt:

Negativen Raum findet man in der Natur, wie im Zwischenraum zwischen Blütenblättern, und im funktionalen Design, wie im Raum durch den Henkel einer Kaffeetasse.

Wir verwenden es auch auf unserer Website. Unsere Homepage hat eine Menge Informationen, aber sie ist nicht überwältigend, weil wir sie so verteilt haben. Und obwohl der Hintergrund Farbtupfer und einige Formen hat, die das Design ergänzen, lenkt er in keiner Weise ab – er wirkt dennoch angenehm leer, ohne langweilig zu sein ( und es ist markenkonform).

Arten von Negativraum

Es gibt einige Arten von Negativräumen. Mikro und Makro beziehen sich auf die Größe des negativen Raums in einer Komposition. Aktiv und passiv beziehen sich darauf, was diese Bereiche für den Benutzer tun.

Mikro- vs. Makro-Negativraum

Mikronegativraum bezieht sich auf die kleinen Abstände zwischen Elementen – den Abstand zwischen Textzeilen oder den Bereich zwischen Links in einem Navigationsmenü. Dies wirkt sich auf die Lesbarkeit des Inhalts für den Leser aus. Wenn nicht genügend Platz zwischen den Zeilen vorhanden ist oder Text über die Ränder hinausgeht, wird es dem Benutzer schwer fallen, ihn zu lesen und zu verstehen.

Makro-Negativraum ist größer; es ist der Raum um das Layout und die Abstände zwischen großen Designelementen. Ein Beispiel ist der Bereich zwischen Inhaltsblöcken. Es sind die leeren Teile des Containers, die das gesamte Design enthalten.

Websites mit geringem Makro-Negativ-Raum sind in der Regel sehr informativ. Websites mit großen Mengen an Makro-Negativ-Raum sind oft minimalistisch oder zeugen von Luxus. Das erste Beispiel ist ein kleiner Makronegativraum und das zweite ein großer Makronegativraum:

Aktiver vs. passiver negativer Raum

Aktiver Negativraum trägt zur Seitenstruktur bei, verbessert den Inhaltsfluss und führt den Benutzer dorthin, wo er hin soll. Passiver negativer Raum verbessert das Aussehen der Website, bewegt den Benutzer jedoch nicht durch einen bestimmten Fluss. Wenn der Raum außermittig und asymmetrisch ist, ist er normalerweise aktiv. Wenn es ausgewogen und symmetrisch ist, ist es normalerweise passiv – es ruft weniger Bewegung hervor, was den Benutzer nicht dazu zwingt, es auf eine bestimmte Weise zu betrachten. Hier ist ein Beispiel für einen aktiven negativen Raum:

Und hier ist ein Beispiel für passiven negativen Raum:

Negativer Raum und Komposition

Negativraum ist aus mehreren Gründen für die Komposition wichtig:

• Sie müssen den Raum in einer Komposition sehen, um ihn gut proportioniert zu halten.
• Außerdem können Sie mit den Beziehungen zwischen verschiedenen Objekten in einem Design spielen.
• Im Webdesign kann es eine wichtige Rolle spielen, die Leute auf Ihrer Seite zu halten.
• Der Raum um ein Element herum bestimmt, wie stark das Element fokussiert wird – mehr Raum bedeutet mehr Fokus.

Die Wahl der richtigen Balance von negativem und positivem Raum

Wie viel negativen und positiven Raum Sie verwenden, hängt von dem gewünschten Look ab und davon, was Sie im Betrachter hervorrufen möchten.

• Wenn Sie ein ästhetisch ansprechendes Design wünschen, verwenden Sie wahrscheinlich zu gleichen Teilen negativen und positiven Raum.
• Für ein Design, das absichtlich schlicht und minimalistisch aussieht, werden Sie sich für mehr negativen Raum entscheiden.
• Um überwältigend und direkt auszusehen, können Sie sich für einen positiveren Raum entscheiden.

Designer müssen mit dem Abstand spielen, bis sie die richtige Balance für die Marke und den beabsichtigten Zweck der Website finden.

Entrümpeln von textlastigen Websites mit Negativraum

Wenn Sie eine Menge Informationen auf eine Seite quetschen müssen, wird es schwierig herauszufinden, wo der negative Leerraum platziert werden soll – besonders wenn diese Informationen textlastig sind, was schnell überladen aussehen kann. HostingDude ist ein großartiges Beispiel für zu viel positiven Raum:

Die New York Times hingegen hat herausgefunden, wie sie ihre Homepage mit ihren Nachrichten füllen kann, ohne die Augen in den Wahnsinn zu treiben, und das alles dank der Abstände (und Farbauswahl). Obwohl es nicht viel Platz für Makroraum gibt, haben sie den Mikroraum genutzt:

Obwohl die Elemente auf HostingDude näher beieinander liegen, sehen die Elemente auf der New York Times-Website dank des zusätzlichen Abstands zwischen ihnen einheitlicher aus. Das Auge hat es leichter, die Seite zu verstehen, was ihr ein vollständigeres, zusammenhängenderes Design verleiht. Wenn das Auge die Gelegenheit hat, sich auszuruhen, kann es das Gesehene besser aufnehmen. Negativ Space glaubt, dass weniger mehr ist.

Text mit negativem Leerzeichen aufteilen

Sie haben gesehen, wie Designer eine ästhetisch ansprechende, textlastige Homepage erstellen können, aber was ist mit den längeren Textblöcken selbst? Das Mischen von kurzen mit langen Absätzen, fett gedruckte Überschriften, das Erstellen von Listen und das Hinzufügen von Medien in einem Artikel helfen dabei, negativen Raum um die Wörter herum zu schaffen und sie für den Leser einladender zu machen. Das Aussehen ist wichtig, selbst bei Texten, und großartige Designer berücksichtigen dies.

Den Kunden den Punkt des negativen Raums erklären

Website-Designer können mit Kunden über negativen Raum streiten. Die Kunden sehen noch mehr Spielraum, um wichtige Informationen zum Geldverdienen einzufügen. Sie haben das Gefühl, dass Leerraum verschwendeter Platz ist. Designer hingegen sehen die visuelle Unterbrechung, die das Auge braucht, um die bereits vorhandenen Informationen tatsächlich aufzunehmen. Sie wissen, dass der gesamte Platz auf einer Website wichtig ist, auch der Platz, der frei von Inhalten ist.

Hier kommen Mockup- und Prototyping-Tools zum Einsatz. Zeigen Sie dem Kunden zwei Versionen seiner Website, eine mit erfreulich viel Negativraum und eine, die mit positivem Raum überladen ist. Lassen Sie sie die Websites nebeneinander ansehen und bitten Sie sie, mit ihnen herumzuspielen. Ich vermute, dass sie es leicht haben werden, auf der gut gestalteten Website zu navigieren und sich auf der schlecht gestalteten Website verloren fühlen.

Einpacken

Websites haben eine Reihe verschiedener Elemente, und wenn Sie möchten, dass diese Elemente in Harmonie leben und den Betrachter anziehen, benötigen Sie weißen Raum um sie herum. Wie viel Leerraum Sie verwenden und wie er funktioniert, hängt von (a) Ihrem Branding und (b) von den Aktionen ab, die der Benutzer ausführen soll. Sie können auch mit Weißraum kreativ werden, indem Sie beispielsweise die Farben invertieren oder mit Negativraum zeichnen, um ihn auf interessante oder auffällige Weise zu definieren.

Welchen Ansatz Sie auch wählen, Weißraum sollte sich ausgewogen anfühlen – das bedeutet jedoch nicht unbedingt symmetrisch. Stattdessen bedeutet dies, dass die Elemente auf einer Seite existieren, ohne miteinander zu konkurrieren und gleichzeitig die gewünschte Aufmerksamkeit auf sich zu ziehen. Ausgeglichenheit bedeutet für den Betrachter, sich eine Website ansehen zu können, ohne verwirrt oder überfordert zu sein.

Experimentieren Sie mit dem Leerraum auf Ihrer Website. Fügen Sie einige hinzu, nehmen Sie einige heraus. Makro reduzieren und Mikro erhöhen oder umgekehrt. Testen Sie, wie mehr oder weniger Leerraum um bestimmte Elemente den Benutzer zum Handeln anregt. Das Schöne an Weißraum ist, dass es sich um eine künstlerische Technik handelt, was bedeutet, dass es keine festen Regeln gibt.

Sie planen eine Reise-Website? Sie werden wahrscheinlich viel Makrospeicherplatz verwenden. Sehen Sie sich unsere Zusammenfassung von Divi Child Themes für Reise-Websites an.

Ausgewähltes Bild über StockVector / Shutterstock.com