20 Beispiele für die Verwendung von White Space im Webdesign
Nehmen wir an, Sie befinden sich in einer Bibliothek. Es wäre überhaupt nicht schön, wenn Sie sich wegen der überfüllten Regale und Flure nicht bewegen könnten, während die Bibliothekarin Sie ständig mit den neusten Büchern, die eingetroffen sind, auffordert. Genauso verhält es sich mit dem im Webdesign verwendeten Weißraum: Er gibt vielen Website-Elementen Raum zum Atmen.
Weißraum ist im Webdesign für die Benutzerfreundlichkeit und Lesbarkeit äußerst wichtig und betont bestimmte Elemente. Stellen Sie sich vor, wie es wäre, wenn viele Wörter zusammenkleben würden. Die Benutzererfahrung wäre definitiv sehr unangenehm und es würde viel Mühe kosten, die Botschaften auf einer Website zu verstehen.
Weißraum wird auch als „negativer Raum” bezeichnet und bezieht sich auf den leeren Raum um und zwischen mehreren Elementen eines Designs oder Seitenlayouts. Er wird auch als „Atmungsraum” bezeichnet. Und er muss nicht weiß sein. Eigentlich jeder Farbe würde passen, solange sie ein sauberes und schönes Design schafft Selbst wenn der negative Raum nichts enthält, kann sie den positiven Raum definieren und verbessern.
Weißraum – ein aktives Element
Negativraum wurde als passives Element angesehen, spielt jedoch eine äußerst wichtige Rolle bei der Verbesserung der Markenpräsenz und der Verbesserung des gesamten visuellen Layouts. Das Erstellen und Bereitstellen einer großartigen Benutzererfahrung umfasst mehr als nur die Verwendung von Leerraum, aber wir können die enorme Bedeutung dieses Elements nicht leugnen. Es führt Benutzer auf einer Seite, schafft Raffinesse und ein harmonisches Layout, kommuniziert, was auf einer Website mehr Aufmerksamkeit erfordert, und erleichtert die Scanbarkeit.
Leerraum wird zwischen mehreren Elementen wie Seitenleisten, Texten, Fußzeilen, Kopfzeilen und Bildern verwendet. Eine überladene Seite, insbesondere wenn keine Hierarchie im Text vorhanden ist, verschlechtert die Lesegeschwindigkeit und das Verständnis.
Negativer Raum kann so wertvoll werden wie der Inhalt selbst. Dies gilt insbesondere für wichtige Marken, da es eine elegante Note hinzufügt.
Die Rolle von Whitespace im Webdesign
Es gibt zwei Arten von Leerraum: Mikro- und Makro-Leerraum. Mikroweißraum ist der Raum zwischen diesen kleineren Elementen: zwischen Buchstaben, Wörtern, Listenelementen, zwischen einem Bild und einer Bildunterschrift. Denken Sie zum Beispiel an eine Online-Zeitung. Es muss Platz um die Zeichen und zwischen den Absätzen haben, damit der Inhalt leicht lesbar ist und der Zeitung ein sauberes und leichtes Gefühl vermittelt wird.
Makroraum bedeutet den Raum zwischen größeren Elementen, der zum Beispiel für Google-Websites sehr verwendet wird. Es hat ein klares Design, wobei der Fokus auf dem Hauptzweck der Seite liegt, während andere Aspekte nicht so betont werden.
Um zu testen, wie die von Ihnen erstellte Website farblich aussieht, ist Adobe Kuler das richtige Tool. Sie können verschiedene Farbschemata erstellen, bearbeiten und hochladen.
Wenn Sie Zweifel haben und nicht wissen, welche Schriftarten besser geeignet sind, probieren Sie Google Webfonts aus. Wählen Sie verschiedene Schriftarten aus und sehen Sie, wie sie sich mit Leerraum verflechten.
Wenn Sie sich nicht sicher sind, wo und wie Sie Leerzeichen beim Erstellen und Anpassen einer Website verwenden sollen, kann Balsamiq hilfreich sein. Es hilft Ihnen, schneller und einfacher zu arbeiten, indem es eine Skizze auf einem Whiteboard reproduziert, aber über Ihren Computer.
Da alle Websites Webformulare haben. Es ist äußerst wichtig, wo Sie sie platzieren und wie Sie den negativen Raum in diesem Zusammenhang verwenden. Und da das Erstellen von Webformularen normalerweise mit Programmieren verbunden ist, benötigen Sie ein Tool, das Ihre Arbeit vereinfacht und Zeit spart. Der 123ContactForm-Webformular-Generator erfordert keine Programmierung und ist auch ideal, wenn Sie zum Erstellen eines Webformulars Leerraum verwenden.
Weißraum kann aktiv und passiv sein. Aktiver Negativraum führt einen Leser von einem Element zum anderen, schafft Harmonie und kann eine Marke viel besser positionieren. Passiver Leerraum ist eigentlich der weiße Raum, der die Außenseite einer Seite oder leere Bereiche innerhalb des Inhalts umgibt, was manchmal als schlechtes Design angesehen wird.
Negativer Raum schafft Balance, einen guten Gesamtfluss und beeinflusst die Leser, sodass sie länger auf einer Seite bleiben. Und das gilt nicht nur für eine Online-Zeitung, sondern für jede Website. Manchmal werden Webdesigner mit verschiedenen Plattformen, Bildschirmauflösungen oder Browsern konfrontiert. Deshalb gibt es Kompositionsübungen für Webdesign-Studenten. Diese Übungen helfen ihnen, die Bedeutung des negativen Raums zu erkennen und ihn effektiv zu nutzen.
Negativraum hat einen großen Einfluss. Finde heraus warum!
Weißraum gibt dem Gehirn visuelle Hinweise darauf, welche Elemente getrennt sind und welche zusammengehören. Das beste Beispiel besteht aus mehreren Zeilen mit Telefonnummern oder E-Mail-Adressen auf einer Website, die durch Leerzeichen getrennt sind, was Ihrem Gehirn signalisiert, dass jede eine andere Sequenz und keine sehr lange Nummer ist.
Je mehr Weißraum vorhanden ist, desto edler sieht eine Website aus. Diese Verwendung von negativem Raum ist in teuren und eleganten Zeitschriften für Frauen üblich. Fast alle Anzeigen haben viel Weißraum, es gibt genug Platz für Hintergrundfotos und Texte sind knapp.
Ein umgekehrtes Beispiel ist eine direkte E-Mail-Werbung, die wir alle mindestens einmal erhalten haben. Erinnern Sie sich, dass es so wenig negativen Raum gab, kombiniert mit vielen und großen Textblöcken, die nicht gut aussahen? Es hat also einen enormen Einfluss. Aus diesem Grund müssen Webdesigner daran denken, bevor sie eine bestimmte Website erstellen und anpassen.
Es gibt einige Grundprinzipien, um ein gutes Webseitendesign zu erstellen. Negative Leerzeichen sollten Elemente wie Kopfzeile, Fußzeile und Navigation trennen. Und wenn Sie das nächste Mal eine Seite entwerfen, analysieren Sie die Ränder und die Auffüllung mehr, anstatt sich zu fragen, wie viel Platz Sie für einen Text benötigen.
Kunden sollten auch die Bedeutung von Leerraum verstehen
Wenn Sie Zweifel haben oder Ihre Kunden die Bedeutung des Negativraums nicht ganz verstehen, können Sie Folgendes tun: Erstellen Sie Ihr Design auf zwei verschiedene Arten. Eines mit weniger negativem Raum, um einen praktischeren und dezenteren Ton zu vermitteln, und das andere mit mehr Weißraum für ein anspruchsvolles Gefühl. Denken Sie daran, dass Sie in Ihren beiden Designs dieselben Elemente verwenden sollten. Das einzige, was Sie anders machen sollten, ist, den Abstand zwischen all diesen Elementen zu ändern.
Vielleicht ist der beste Weg, um zu sehen, wie Leerraum verwendet wird, und mehr über seine Bedeutung zu erfahren, ein Blick auf mehrere Websites. Sie können Sie inspirieren und Ihnen bei Ihren zukünftigen Projekten helfen. Werfen Sie einfach einen Blick auf die folgenden Websites, lassen Sie Ihrer Fantasie freien Lauf und die Ergebnisse werden hervorragend sein!
Madebysofa.com verwendet Weißraum, um einen sauberen, minimalistischen Look zu schaffen. Auf diese Weise liegt der Schwerpunkt auf Website-Kategorien und Links.
Vertigo Visual hält es einfach und verwendet viel Weißraum, um einen Hauch von Stil und Persönlichkeit hinzuzufügen.
Cultured Code ist ein Beispiel, bei dem Leerraum nicht weiß, sondern hellblau ist. Es gibt auch ein paar farbige geometrische Elemente, die bestimmte Kategorien aufwerten.
Philip House NYC bietet viel Weißraum. Der Zweck hier ist, die Aufmerksamkeit auf sich zu ziehen und einige Bilder und Kategorien auf der Webseite zu verbessern.
Built by Buffalo verwendet Leerraum sehr klug. Es betont alle Kategorien und das Logo. In der Mitte der Seite befinden sich mehrere farbige Abschnitte, die zu wichtigen Informationen führen. Während Sie nach unten scrollen, können Sie feststellen, dass Leerzeichen immer noch dominieren, aber der Fokus liegt immer noch auf anderen Abschnitten.
Ditto ist auch eine Website, die Weißraum verwendet, um Raffinesse und Eleganz hinzuzufügen. Gleichzeitig wird Negativraum genutzt, um die Produkte besser in Szene zu setzen.
Metta Skincare hat ein schlankes Design. Im Fokus stehen Produkte, USP und Website-Kategorien.
Fell Swoop fügte Leerzeichen hinzu, um Emotionen zu erzeugen und die Benutzerbindung zu erhöhen.
Attitude Design kombiniert Weißraum mit „farbigem” Weißraum, um die Aufmerksamkeit auf einige wichtige Punkte auf der Website zu lenken. Einfach aber effektiv!
Die Super Real- Website hat aufgrund der weißen Flächen einen Hauch von Eleganz und Raffinesse. Negativraum wird hier verwendet, um die Hauptkategorien hervorzuheben.
Handiemail verfügt über ein einfaches, weißes Layout, das das Interesse der Besucher weckt. Alles ist aufgrund eines so sauberen Designs so einfach zu lesen.
Suki ist eine Website, die Ihre Aufmerksamkeit fast sofort erregt. Es ist erstaunlich, wie sich Negativraum mit Bildern, Videos und Handlungsaufforderungen abwechselt. Mal schauen!
Tom Reinert ist eine Website, auf der das Vorherrschen von Weißraum mehrere Elemente voneinander trennt. Der Gesamteindruck ist eine saubere, schöne und gut lesbare Seite.
Webydo nutzt Negativraum aus und verwendet ihn um Bilder, Spalten und Handlungsaufforderungen herum, um verschiedene Teile der Website, Kontaktdaten und mehr zu präsentieren.
PlainWhite ist ein weiteres großartiges Beispiel für Whitespace, der im Webdesign verwendet wird. Wie wir hier sehen können, führt es Ihre Augen und trägt zu einem schönen und luftigen Design bei. Auf diese Weise werden alle Website-Kategorien schön angezeigt.
Beanstalk ist ein großartiges Beispiel dafür, dass weißer Raum nicht nur „weiß” ist. Es schafft Harmonie, Balance, lässt die Website aufgeräumt wirken und hebt die Inhalte hervor.
Pulp Fingers demonstriert auch die Wirksamkeit von „farbigem” Negativraum. Hier haben wir eine kräftige Farbe, die die Nachrichten, Handlungsaufforderungen, Schaltflächen für soziale Medien, Kontaktfelder und Website-Kategorien hervorhebt.
No Leath verfügt über weiße Flächen, die eigentlich ein hellgrauer Farbton sind, kombiniert mit großen Grafiken, um ihre Produkte so gut wie möglich darzustellen.
Dropbox ist ein Verfechter des negativen Raums. Diese Website zeigt, dass weniger mehr ist. Und dies wird dadurch erreicht, dass nur die Elemente beibehalten werden, die wirklich wichtig sind. Leerzeichen hier erhöhen die Lesbarkeit und Benutzerfreundlichkeit, wodurch alles auf der Website extrem einfach zu lesen und zu verstehen ist.
Something Splendid hat viel Weißraum kombiniert mit bunten Elementen. Dies macht die Seite extrem einfach zu navigieren. Darüber hinaus ist die Interaktion mit einer solchen Website eine angenehme Erfahrung. Jede Kategorie ist auffälliger, ohne dass das Design überladen wird.
Dies sind nur einige der Websites, die Leerraum sinnvoll nutzen. Obwohl Leerraum ein umstrittenes Element ist, werden Sie ihn aufgrund seiner Vorteile auf mehreren Websites verwenden. Wenn er so verwendet wird, wie er sein sollte, trägt Negativraum zu großartigen Benutzererlebnissen bei.
Leerraum führt oft zu Spannungen zwischen Webdesignern und ihren Kunden. Manchmal wollen Kunden keinen leeren Platz auf ihrer Website sehen, weil sie denken, dass sie mit Inhalten bedeckt sein muss. Deshalb müssen Designer ihren Kunden die Rolle des Negativraums erklären.
Es kann zumindest für Anfänger schwierig sein, den Einfluss davon zu artikulieren. Betrachten Sie Whitespace dennoch nicht als „leeren Raum” ohne Bedeutung. Ja, es mag leer und gewöhnlich aussehen, aber denken Sie daran, dass Sie es vor allem deshalb verwendet haben, weil es das Gesamtdesign wirklich verbessert, nicht weil es dort nichts anderes hinzuzufügen gab. Es kann schwierig sein, es Ihren Kunden zu erklären, aber ich hoffe, dieser Artikel wird Ihnen dabei helfen.