Share
Der Raum ist ein grundlegender Parameter im Webdesign, aber auch einer der am meisten unterschätzten. Wenn wir die Kontrolle über den Leerraum erfassen, können wir ein subtiles, aber definierendes Element einer Webseite steuern und es sinnvoll nutzen.
In einer Nussschale ist der weiße Raum der Abstand zwischen verschiedenen Elementen, sei es zwischen den tatsächlichen Abschnitten der Seite oder bis zu den Abständen zwischen den Buchstaben. In den meisten Fällen verwenden wir Leerzeichen (auch als negatives Leerzeichen bezeichnet), um Inhalte für ein einfacheres und letztendlich schnelleres Scannen einer Seite auszulagern, ohne dass spezielle Trennelemente eingefügt werden müssen.
Heute erfahren Sie, wie Sie negativen Bereich in Ihren Entwürfen verwenden können, und ermitteln, wie genau dies dazu beiträgt, dass Ihr Entwurf sauber und ordentlich aussieht.
Wie ich gerade erklärt habe, ist der weiße Raum (oder der negative Raum) der Abstand zwischen verschiedenen Elementen, der nichts enthält. Zu Vergleichszwecken bezeichnen wir den ausgefüllten Raum als positiv. Der negative Raum hilft tatsächlich, den positiven Raum zu formen und zu definieren. Dies kann durch Betrachten der optischen Täuschung unten gezeigt werden.
Was siehst du? Die Vase oder die zwei Gesichter? Wenn Sie die Gesichter sehen, liegt dies daran, dass in diesem speziellen Design der weiße Raum als negativer Raum fungiert, während schwarz das Positive ist. Wir können die Rollen umkehren und eine völlig andere Sichtweise erhalten, da beide zusammenarbeiten, um das Bild zu formen.
Dieses Beispiel versucht zu verstehen, dass Ihr negativer Bereich ziemlich wichtig ist, da er dazu beitragen kann, den Inhalt zu bestimmen, der sich im positiven Bereich befindet. Stellen Sie sich weiße Flächen nicht als das übriggebliebene Bit vor, für das Sie keinen Inhalt erstellt haben, sondern eher einen wichtigen strukturellen Akteur im Layout Ihrer Website.
Es gibt auch zwei Ebenen von Leerzeichen. Hierbei handelt es sich um Makro- und Mikroweißräume, die sich auf den Raum zwischen den Kernelementen bzw. den Raum zwischen den kleineren Elementen beziehen.
Wie Sie sehen, ist Google ein großer Befürworter von Leerraum in ihren Entwürfen. Die Suchmaschine hat allgemein ein sauberes Design, da der Fokus auf dem Hauptziel der Seite liegt, ohne sich auf andere Bereiche zu konzentrieren (im Gegensatz zu anderen Bereichen)..
Ich bewundere die Designarbeit, die das Envato-Team mit dieser Site geleistet hat. Zwischen den Titeln, den Kreditlinien und den Absätzen wird eine ausgewogene Verwendung von Leerzeichen verwendet.
Negativer Raum muss eigentlich kein einzelner Farbblock sein. In der Fotografie kann jeder Bereich, der nicht scharfgestellt ist, als negativer Raum eingestuft werden. In diesem Beispiel lenkt der mangelnde Fokus im Hintergrund Ihre Augen auf die Tasse. (Und hat Starbucks auch nicht ihr Logo geändert?)
Wenn man entwirft, liegt sein Fokus normalerweise auf dem positiven Raum. Es ist fast unbewusst, dass der negative Raum folgt und tatsächlich dazu beiträgt, wie der positive Raum angelegt und dann gelesen wird. Diese Eigenschaft kann dann angepasst werden, um die Erfahrung für eine bessere Zeit anzupassen und mit dem positiven Raum zu interagieren.
Nehmen wir an, Sie sind in einem Laden. Es wäre keine angenehme oder angenehme Erfahrung, wenn Sie aufgrund der überfüllten Gänge Schwierigkeiten hätten, sich zu bewegen, neben dem Verkäufer, der Sie ständig mit Sonderangeboten anspricht. Es gibt einfach zu viel zu sehen und Sie haben weder die Zeit noch die Geduld, das zu finden, wonach Sie ursprünglich gesucht haben. Es ist nicht nett.
Dies ist eines der Hauptmerkmale dafür, warum Apple Stores so gut funktionieren. Sie sind sehr minimalistisch und ein Großteil der Ladenfläche wird den Produkten selbst zugewiesen. Sollten Sie sich jedoch in einen anderen PC-Laden begeben, werden Sie von endlosen Gängen von Maschinen in Anspruch genommen, die anders aussehen und funktionieren. Nach meiner Erfahrung ist das minimalistische Einkaufserlebnis viel angenehmer.
Nun, was hat das mit Webdesign zu tun? Eigentlich viel. Wir sind nicht online, um eine bestimmte Textfolge unter einer Fülle von sinnlosen Inhalten zu finden, die Sie nicht interessieren. Negativer Platz hilft bei beiden Problemen, da Entwürfe gleichzeitig unübersichtlich bleiben und auf den Schwerpunkt der Seite aufmerksam werden.
Sie fragen sich vielleicht, warum sollte ich mich darum kümmern, dass mein negativer Raum genau richtig ist?
Text im Internet unterscheidet sich von Text auf jeder anderen Plattform. Wir passen unsere Entwürfe so an, dass der Endbenutzer die einfachsten Erfahrungen beim Lesen unserer Inhalte hat. Im Gegensatz zu einer Zeitung kann es im Web frustrierend sein, herauszufinden, wo sich der Inhalt befindet, an dem Sie wirklich interessiert sind. Durcheinander gewürfelte Designs, die zu schwer sind, um sie zu bewältigen, bieten keine saubere und einfache Leseerfahrung, da wir die Webseite zuerst genau prüfen müssen, um die Elemente voneinander zu unterscheiden. Leerzeichen hacken einen Puffer zwischen den Elementen, so dass wir den Inhalt, den uns wichtig ist, leichter finden können.
Wir können uns auch auf einen kürzlich erschienenen Artikel über Typografie beziehen, in dem ich acht wichtige Faktoren untersuchte, die zu einer guten Web-Typografie beitragen. Durch das Aufbrechen der räumlichen Elemente (z. B. Abstand von Buchstaben und Buchstaben) können wir die Lesbarkeit erhöhen. Wenn Sie auf dieser Ebene arbeiten, arbeiten wir mit Micro-White-Space.
In einer Nussschale (eine andere als die zuvor erwähnte), räumt der weiße Raum alles aus, gibt den Elementen ihren eigenen Raum, um sich selbst zu sein, erkannt zu werden und leicht zu lesen und mit ihnen zu interagieren.
Negativer Raum wird in vielen kreativen Bereichen verwendet, insbesondere in der Fotografie. Negativer Raum in der Fotografie ist jeder Raum, der nicht für ein Motiv verwendet wird, das nicht allzu weit von seiner Rolle im Webdesign entfernt ist. Wenn wir einen Blick auf das Webdesign von Apple werfen, verwenden sie natürlich sowohl Makro- als auch Mikro-Leerzeichen, um Elemente auszulagern und ihnen einen eigenen Platz auf der Webseite einzuräumen.
Apples Design verwendet sowohl Makro- als auch Mikroweißflächen, die durch die zwei verschiedenen Farben definiert werden, die auf dem Bild darunter angeordnet sind. Das Ergebnis ist ein klares, elegantes Design, das sich elegant auszeichnet. Sie wissen es vielleicht nicht, aber Ihre Aufmerksamkeit für den Inhalt wird durch den inhaltlichen Leerraum beeinflusst. Unsere Aufmerksamkeitsspanne ist im Internet nachweislich kürzer. Daher waren die überladenen, schweren Druckdesigns kein Trend, der sich auf die virtuellen Designbereiche übertrug.
Natürlich muss der Raum nicht wirklich weiß sein. Jede Art von Leerstelle, die nicht mit dem Fokusinhalt in Konkurrenz steht, kann als "Leerraum" klassifiziert werden, wie das Design unten zeigt.
Beim Druckdesign stellen Sie möglicherweise fest, dass Ihr Kunde jedes letzte Stück seiner Immobilien für seine Produkte verwenden möchte. Beim Entwerfen für virtuelle Länder ist dies jedoch eine andere Geschichte. Weißer Raum kann einer allgemeinen Webseite ein Gefühl von Raffinesse und Luxus verleihen, indem er das Gefühl vermittelt, dass das Produkt wichtiger ist als die Immobilie, in der es lebt. Es kann ein Produkt luxuriös erscheinen lassen, indem es das Prinzip "Weniger ist mehr" verwendet. Wenn Sie sich die Website von Apple anschauen - eine Marke, die wir für das hochwertigste Ende des Computerwesens halten - ist dies sehr wenig nötig, da die Produkte für sich sprechen, wenn auch neben einigen minimalistischen Slogans. Dies ist ein Phänomen, das auch bei Premium-Websites für Gesundheit und Wohlbefinden beliebt ist, auf denen wenig Inhalt benötigt wird, um die allgemeine Idee des beworbenen Produkts oder der angebotenen Dienstleistung zu kommunizieren.
Oft scheinen billigere Marken so viele Informationen wie möglich in einen Raum zu stopfen. verschiedene Märkte, unterschiedliche Endverbraucher. Markieren Sie beispielsweise die HP- und Apple-Sites. Apple sind bekanntermaßen zuversichtlich und lassen ihre Produkte für sich sprechen. Wenn Sie das Produkt haben möchten, schauen Sie sich um, wenn nicht. Andererseits setzt der HP-Standort verstärkt Up- und Cross-Selling-Angebote ein, fördert Angebote und drückt billige Preise in den Kopf des Benutzers und versucht, eine Auswahl alternativer Produkte zu präsentieren, an denen Sie interessiert sein könnten.
Inzwischen sollten Sie erkennen, was ein negativer Raum ist und wie Sie ihn in Ihrem Entwurf identifizieren können. Wenn Sie neu in diesem Feld sind, werden Sie möglicherweise verwirrt, wenn jemand vorschlägt, den Leerraum zu verbessern. Ich wäre nicht völlig überrascht, wenn Sie mit etwas wie "das ist nur der Raum übrig" geantwortet hat. Tatsächlich kann Ihr negativer Raum erheblich verbessert werden, indem einige häufige Probleme angepasst werden, um seine Existenz wesentlich effektiver zu gestalten.
Inkonsistente Abstände können eines der größten Probleme sein, das jedoch leicht angepasst werden kann. Alles wirkt ausgewogener und insgesamt besser, wenn die Polsterung um ein Element gleich ist. Wenn wir uns das Beispiel unten ansehen, das Design (das unserer Schwestersite ActiveTuts +), sieht das reale auf der rechten Seite so viel besser aus, da die Auffüllung zwischen Elementen viel konsistenter ist.
Ränder sollten auch nicht das Gefühl haben, dass ein Design nicht verbunden ist. Zu große Ränder können die Beziehung zwischen Elementen zerstören und das Einheitsgefühl im Design verringern. Große Margen verschwenden auch Ihre Immobilien und verringern möglicherweise die Effektivität Ihrer Arbeit.
Wie bereits erwähnt, ist der Abstand zwischen den Mikroebenen der negative Abstand zwischen den kleinsten Elementen auf der Seite, genau wie die Buchstaben in einem Absatz.
Der Zeilenabstand kann die Lesbarkeit eines Textkörpers drastisch verbessern und ist ein entscheidender Dealbreaker für Ihre Fallstudie der gut zugeschnittenen Typografie. Der Zeilenabstand oder der führende Abstand ist der Mikro-Leerraum zwischen den Textzeilen. Im Allgemeinen gilt: Je größer die Führungsstärke, desto besser wird der Benutzer beim Lesen, aber zu viel kann die Einheit zerstören und das Design trennen.
Ich habe das Bild unten in verschiedenen Artikeln hier bei Tuts + verwendet, und ich möchte es noch einmal darauf hinweisen. Das Beispiel auf der rechten Seite ist führender und sollte bei einer größeren Textauswahl besser lesbar sein.
In ähnlicher Weise kann der Buchstabenabstand zu einem gut genutzten negativen Abstand beitragen. Enge Buchstaben machen nicht so viel Spaß beim Lesen, aber auch solche, die Sie mit einzelnen Wörtern verwechseln könnten. Auch hier geht es nur darum, die perfekte Balance zu finden.
Wenn Sie Ihr Webdesign entwerfen und anpassen, tun Sie dies mit einem frischen Geist, der nicht mit dem verunreinigt ist, was Sie beim letzten Mal richtig gemacht haben. Jedes Projekt ist anders und da es keine vordefinierten Richtlinien oder konsistente Berechnungen gibt, müssen Sie Ihr neu entwickeltes Auge verwenden, um jedes Produkt separat zu analysieren.
Negativer Platz, wie ich in diesem Artikel bereits mehrmals erwähnt habe, macht sowohl das Entwerfen als auch das Formulieren und den Fokus auf den Inhalt der Seite. Um auf die Einkaufsanalogie zurückzukommen, möchte niemand arbeiten müssen, um das gewünschte Ergebnis zu erzielen. Stattdessen möchten sie, dass es auf einem leicht zu identifizierenden Teller serviert wird, der nicht durch sinnlose Beilagen gestört wird, nach denen sie nicht gefragt haben oder wollen.
Um es zusammenzufassen: Wir können die negative Speicherplatznutzung auch verbessern, indem Sie die Margen analysieren und verfeinern, indem Sie sie unter den meisten Umständen konsistent halten und auf Typografie und Mikroebenenabstand achten. Idealerweise sollten Sie jedes Projekt auch anders nehmen, um den Sweetspot im Design zu erkennen.
Abgesehen von den praktischen Vorteilen einer sauberen, übersichtlichen Webseite kann ein negativer Bereich ein Gefühl von Raffinesse und Eleganz erzeugen, indem der Inhalt "für sich selbst sprechen" kann, ohne dass große Eingriffe erscheinen, die billig erscheinen.
Vielen Dank für das Eintauchen in eine interessante Reise in einem anderen Gebiet. Ich hoffe, Sie haben etwas über die Wichtigkeit des negativen Raums im Design gelernt (ich habe es sicherlich getan), und denken Sie vielleicht zweimal darüber nach, bevor Sie versuchen, eine Million unsinnige oder unnötige Objekte in Ihre Seite zu schieben. Bevor ich Sie verlasse, ein letzter Tipp: Testen Sie den 5-Sekunden-Test (fünf Sekunden lang eine Webseite anzeigen und notieren, was Sie sich merken), nur um zu bestätigen, dass Ihr Design übersichtlich ist und den weißen Bereich gut verwendet.
Accentsconagua