Wenn Sie im Webdesign an Leerzeichen denken, sind Beispiele wie Apple oder Google wahrscheinlich die ersten, die Ihnen in den Sinn kommen. Während diese Unternehmen großartige Arbeit leisten, um Leerzeichen in ihren Entwürfen zu verwenden, gibt es viele andere Möglichkeiten, den Raum optimal zu nutzen. auch wenn es nicht immer weiß ist.!
Leerraum ist ein wichtiger Teil Ihres Gestaltungsplans. Hier werden wir die Bedeutung des Weltraums als Gestaltungswerkzeug und fünf Beispiele für Websites betrachten, die den weißen Raum (der überhaupt nicht weiß ist) hervorragend nutzen.
Leerraum 101
Leerraum bezieht sich auf alle Teile des Designs, die von Designelementen nicht berührt werden. Dies beinhaltet den Abstand zwischen Grafiken oder Bildern, zwischen Textzeilen und Rändern und Zwischenräumen. Der offene Raum innerhalb von Designelementen, wie zum Beispiel das "verborgene" Der Pfeil im FedEx-Logo wird als negatives Leerzeichen bezeichnet, obwohl es mittlerweile üblich geworden ist, die Terminologie auszutauschen.
Leerzeichen sind wichtig, da sie wesentlich zur Lesbarkeit und Organisation eines Entwurfs beitragen.
- Erleichtert das Scannen von Text durch Benutzer.
- Hilft beim Erstellen einer natürlichen Gruppierung ähnlicher Elemente.
- Priorisiert Elemente im Design, z. B. Aufrufe zu Aktionen, Suchen oder Navigieren.
- Erzeugt ein Gefühl von Harmonie und Raffinesse.
- Legt Balance und visuelle Hierarchie fest.
- Hilft dabei, schwere Textblöcke leichter zu verdauen (und wahrscheinlicher zu lesen)
- Führt Benutzer logisch durch das Design.
Raum muss nicht sein? Weiß?
Es gibt diesen Mythos über weiße Räume, der entlarvt werden muss: Weiße Räume müssen nicht weiß sein.
Der Leerraum kann einfarbig sein, ein unscharfer Hintergrund oder sogar ein bisschen Bewegung. Der gemeinsame Faktor ist, dass der Raum genau das ist? Platz. Es enthält keinen anderen Inhalt oder Gestaltungselement. Wenn der Benutzer an ihm vorbei oder von ihm wegschaut, gehen keine Informationen verloren.
Die Schwelle ist, dass eigentlich alle weißen Räume könnte weiß sein, aber der Designer hat sich entschieden, das Visuelle auf andere Weise zu schaffen, während er dennoch die Prinzipien des Raums nutzt.
Leerräume können in jedem Teil des Designs erscheinen und sollten als Werkzeug zur Verbesserung der Benutzerfreundlichkeit vom oberen Rand der Seite bis zum unteren Rand und auf den Sekundärseiten dienen. Bei einem guten Entwurfsmuster wird Weißraum durchgängig verwendet, um die visuelle Darstellung für den Benutzer einfacher zu machen.
Beispiel 1: U + Design
U + Design kehrt buchstäblich das Konzept des weißen Raums mit viel Offenheit auf einer schwarzen Leinwand für Textelemente um. Die Bilder leben in einem helleren Bereich, der einen Yin-Yang-Effekt erzeugt, und obwohl technisch nichts weiß ist, handelt es sich dabei nur um einen weißen Raum.
Der Raum wird gleichermaßen unter der Schriftrolle genutzt, mit viel Platz für Elemente und einem sich nahezu bewegenden Muster aus Raum und Designelementen, die das Scrollen fördern.
Wenn Sie nach einer Lektion suchen, wie lesbarer Text erstellt wird, werfen Sie einen Blick auf diesen Entwurf. Während mehrere Textstile und -farben verwendet werden, ist alles lesbar, und Platzierung und Größe des Textes bilden einen guten hierarchischen Rahmen.
Beispiel 2: Emark
Emark verwendet Ausschnitte und geometrische Muster, um weißen Raum zu schaffen und Bilder und Text visuell zu interessieren. Der Raum ist eine Mischung aus Weiß und Farbe, wobei Formen und Linien den visuellen Fluss unterstützen.
Das Design verwendet auch Farbblöcke vor einem weißen Hintergrund, die viel weißen Raum enthalten. Die helle Kombination aus Farbe und Raum schafft unverwechselbare Textcontainer, die als hochklickbare Handlungsaufforderungen dienen. Aufgrund des farbigen weißen Bereichs wissen die Benutzer, dass jeder dieser Blöcke zum Klicken ausgelegt ist.
Das gesamte Design verwendet vergrößerte weiße Flächen um Textelemente mit viel Abstand und Zeilenabstand, um die Lesbarkeit zu verbessern. (Dies ist einer dieser Trends, von denen wir wahrscheinlich noch mehr erleben werden, wenn mobile Textabstandskonzepte in immer mehr Desktop-basierte Website-Designs einfließen.)
Beispiel 3: Joke de Winter
Joke de Winter verwendet ein verschwommenes Schwarzweißfoto als Vorlage für Leerräume im Hintergrund seiner Website. Der Look ist ein modernes, geschichtetes Design, das sich deutlich anfühlt und leicht fließen kann.
Unterhalb des Bildlaufs wird um Textelemente mit übergroßen Rändern herum noch mehr weißer Raum verwendet, um die Betonung auf bestimmte Textelemente zu legen. Der weiße Raum im Design wechselt zwischen weiß und grau und enthält wie im vorherigen Beispiel mehr Abstände als wir oft zwischen den Zeilen f text sehen.
Im gesamten Design haben alle Ränder einen asymmetrischen Stil mit viel Platz. Das Off-Balance-Guthaben ist harmonisch und optisch interessant.
Beispiel 4: Astronauten gesucht
Die rasante Aktion von Astronauten Wanted ist vielleicht nicht das, was zuerst in den Sinn kommt, wenn man über den weißen Raum nachdenkt. Aber das Logo, der Text und die Elemente auf dem Video funktionieren genauso. Die wichtigen Informationen über dem Bildlauf sind trotz der Aktion im Hintergrund leicht zu lesen und zu sehen. Es ist mit viel Platz auf beiden Seiten und rundum zentriert. (Und das Logo mit negativem Leerzeichen hilft, die Aufmerksamkeit auf den Gesamteffekt zu lenken.)
Das gleiche Konzept wird unter der Bildlaufleiste mit Textblöcken über Standbildern verwendet. Der Raum ist wunderschön gestaltet und das einzige weiße Element im Design ist der Text selbst.
Beispiel 5: Le Farfalle
Le Farfalle verwendet einen einfachen Ausschnitt im Heldenbild (z. B. eines der vorherigen Beispiele). Die eindrucksvollste Verwendung von Platz erscheint jedoch beim Scrollen mit großen abwechselnden Leerzeichen für Bilder, die mit übergroßen weißen Räumen mit Text ausgeglichen sind.
Dieser Stil macht es Benutzern leicht, von Bild zu Text zu wechseln und die Seite durch den gesamten Inhalt zu durchsuchen. Was ein schweres Design sein könnte, wird leicht und gut lesbar.
Darüber hinaus verwendet das Design breite Ränder und Polsterungen, so dass jedes Element wirklich Platz für sich selbst hat.Diese Raumnutzung erzeugt eine anspruchsvolle Ästhetik, die zur Atmosphäre des Restaurants passt.
Fazit
Der heutige Imbiss - Weißraum muss nicht weiß sein. Lass dich nicht in diese Falle fallen. Es gibt einige Beispiele, wie Sie den Raum mit Farben, Bildern und Videos nutzen können, um Ihre Kreativität zu steigern.
Jetzt sind Sie an der Reihe, einige Beispiele für Leerraum zu präsentieren. Teilen Sie einige Designs, die Sie in der Design Shack-Galerie erstellt haben, oder teilen Sie Websites, die Sie lieben, mit mir auf Twitter. (Sie wissen nie? Sie könnten in einem zukünftigen Beitrag enden!)