{"id":253930,"date":"2023-12-09T10:04:00","date_gmt":"2023-12-09T07:04:00","guid":{"rendered":"https:\/\/inform.click\/20-beispiele-fuer-die-verwendung-von-white-space-im-webdesign\/"},"modified":"2023-12-09T10:04:00","modified_gmt":"2023-12-09T07:04:00","slug":"20-beispiele-fuer-die-verwendung-von-white-space-im-webdesign","status":"publish","type":"post","link":"https:\/\/inform.click\/de\/20-beispiele-fuer-die-verwendung-von-white-space-im-webdesign\/","title":{"rendered":"20 Beispiele f\u00fcr die Verwendung von White Space im Webdesign"},"content":{"rendered":"

\n Nehmen wir an, Sie befinden sich in einer Bibliothek. Es w\u00e4re \u00fcberhaupt nicht sch\u00f6n, wenn Sie sich wegen der \u00fcberf\u00fcllten Regale und Flure nicht bewegen k\u00f6nnten, w\u00e4hrend die Bibliothekarin Sie st\u00e4ndig mit den neusten B\u00fcchern, die eingetroffen sind, auffordert. Genauso verh\u00e4lt es sich mit dem im Webdesign verwendeten Wei\u00dfraum: Er gibt vielen Website-Elementen Raum zum Atmen.\n<\/p>\n

\n Wei\u00dfraum ist im Webdesign f\u00fcr die Benutzerfreundlichkeit und Lesbarkeit \u00e4u\u00dferst wichtig und betont bestimmte Elemente. Stellen Sie sich vor, wie es w\u00e4re, wenn viele W\u00f6rter zusammenkleben w\u00fcrden. Die Benutzererfahrung w\u00e4re definitiv sehr unangenehm und es w\u00fcrde viel M\u00fche kosten, die Botschaften auf einer Website zu verstehen.\n<\/p>\n

\n Wei\u00dfraum wird auch als \u201enegativer Raum“ bezeichnet und bezieht sich auf den leeren Raum um und zwischen mehreren Elementen eines Designs oder Seitenlayouts. Er wird auch als \u201eAtmungsraum“ bezeichnet. Und er muss nicht wei\u00df sein. Eigentlich jeder Farbe w\u00fcrde passen, solange sie ein sauberes und sch\u00f6nes Design schafft Selbst wenn der negative Raum nichts enth\u00e4lt, kann sie den positiven Raum definieren und verbessern.\n<\/p>\n

\n Wei\u00dfraum \u2013 ein aktives Element
\n<\/h5>\n

\n Negativraum wurde als passives Element angesehen, spielt jedoch eine \u00e4u\u00dferst wichtige Rolle bei der Verbesserung der Markenpr\u00e4senz und der Verbesserung des gesamten visuellen Layouts. Das Erstellen und Bereitstellen einer gro\u00dfartigen Benutzererfahrung umfasst mehr als nur die Verwendung von Leerraum, aber wir k\u00f6nnen die enorme Bedeutung dieses Elements nicht leugnen. Es f\u00fchrt Benutzer auf einer Seite, schafft Raffinesse und ein harmonisches Layout, kommuniziert, was auf einer Website mehr Aufmerksamkeit erfordert, und erleichtert die Scanbarkeit.\n<\/p>\n

\n Leerraum wird zwischen mehreren Elementen wie Seitenleisten, Texten, Fu\u00dfzeilen, Kopfzeilen und Bildern verwendet. Eine \u00fcberladene Seite, insbesondere wenn keine Hierarchie im Text vorhanden ist, verschlechtert die Lesegeschwindigkeit und das Verst\u00e4ndnis.\n<\/p>\n

\n Negativer Raum kann so wertvoll werden wie der Inhalt selbst. Dies gilt insbesondere f\u00fcr wichtige Marken, da es eine elegante Note hinzuf\u00fcgt.\n<\/p>\n

\n Die Rolle von Whitespace im Webdesign
\n<\/h5>\n

\n Es gibt zwei Arten von Leerraum: Mikro- und Makro-Leerraum. Mikrowei\u00dfraum ist der Raum zwischen diesen kleineren Elementen: zwischen Buchstaben, W\u00f6rtern, 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\u00e4tzen haben, damit der Inhalt leicht lesbar ist und der Zeitung ein sauberes und leichtes Gef\u00fchl vermittelt wird.\n<\/p>\n

\n Makroraum bedeutet den Raum zwischen gr\u00f6\u00dferen Elementen, der zum Beispiel f\u00fcr Google-Websites sehr verwendet wird. Es hat ein klares Design, wobei der Fokus auf dem Hauptzweck der Seite liegt, w\u00e4hrend andere Aspekte nicht so betont werden.\n<\/p>\n

\n Um zu testen, wie die von Ihnen erstellte Website farblich aussieht, ist Adobe Kuler das richtige Tool. Sie k\u00f6nnen verschiedene Farbschemata erstellen, bearbeiten und hochladen.\n<\/p>\n

\n Wenn Sie Zweifel haben und nicht wissen, welche Schriftarten besser geeignet sind, probieren Sie Google Webfonts aus. W\u00e4hlen Sie verschiedene Schriftarten aus und sehen Sie, wie sie sich mit Leerraum verflechten.\n<\/p>\n

\n 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 \u00fcber Ihren Computer.\n<\/p>\n

\n Da alle Websites Webformulare haben. Es ist \u00e4u\u00dferst 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\u00f6tigen 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.\n<\/p>\n

\n Wei\u00dfraum kann aktiv und passiv sein. Aktiver Negativraum f\u00fchrt einen Leser von einem Element zum anderen, schafft Harmonie und kann eine Marke viel besser positionieren. Passiver Leerraum ist eigentlich der wei\u00dfe Raum, der die Au\u00dfenseite einer Seite oder leere Bereiche innerhalb des Inhalts umgibt, was manchmal als schlechtes Design angesehen wird.\n<\/p>\n

\n Negativer Raum schafft Balance, einen guten Gesamtfluss und beeinflusst die Leser, sodass sie l\u00e4nger auf einer Seite bleiben. Und das gilt nicht nur f\u00fcr eine Online-Zeitung, sondern f\u00fcr jede Website. Manchmal werden Webdesigner mit verschiedenen Plattformen, Bildschirmaufl\u00f6sungen oder Browsern konfrontiert. Deshalb gibt es Kompositions\u00fcbungen f\u00fcr Webdesign-Studenten. Diese \u00dcbungen helfen ihnen, die Bedeutung des negativen Raums zu erkennen und ihn effektiv zu nutzen.\n<\/p>\n

\n Negativraum hat einen gro\u00dfen Einfluss. Finde heraus warum!
\n<\/h5>\n

\n Wei\u00dfraum gibt dem Gehirn visuelle Hinweise darauf, welche Elemente getrennt sind und welche zusammengeh\u00f6ren. 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.\n<\/p>\n

\n Je mehr Wei\u00dfraum vorhanden ist, desto edler sieht eine Website aus. Diese Verwendung von negativem Raum ist in teuren und eleganten Zeitschriften f\u00fcr Frauen \u00fcblich. Fast alle Anzeigen haben viel Wei\u00dfraum, es gibt genug Platz f\u00fcr Hintergrundfotos und Texte sind knapp.\n<\/p>\n

\n 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\u00dfen Textbl\u00f6cken, die nicht gut aussahen? Es hat also einen enormen Einfluss. Aus diesem Grund m\u00fcssen Webdesigner daran denken, bevor sie eine bestimmte Website erstellen und anpassen.\n<\/p>\n

\n Es gibt einige Grundprinzipien, um ein gutes Webseitendesign zu erstellen. Negative Leerzeichen sollten Elemente wie Kopfzeile, Fu\u00dfzeile und Navigation trennen. Und wenn Sie das n\u00e4chste Mal eine Seite entwerfen, analysieren Sie die R\u00e4nder und die Auff\u00fcllung mehr, anstatt sich zu fragen, wie viel Platz Sie f\u00fcr einen Text ben\u00f6tigen.\n<\/p>\n

\n Kunden sollten auch die Bedeutung von Leerraum verstehen
\n<\/h5>\n

\n Wenn Sie Zweifel haben oder Ihre Kunden die Bedeutung des Negativraums nicht ganz verstehen, k\u00f6nnen 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\u00dfraum f\u00fcr ein anspruchsvolles Gef\u00fchl. 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 \u00e4ndern.\n<\/p>\n

\n Vielleicht ist der beste Weg, um zu sehen, wie Leerraum verwendet wird, und mehr \u00fcber seine Bedeutung zu erfahren, ein Blick auf mehrere Websites. Sie k\u00f6nnen Sie inspirieren und Ihnen bei Ihren zuk\u00fcnftigen Projekten helfen. Werfen Sie einfach einen Blick auf die folgenden Websites, lassen Sie Ihrer Fantasie freien Lauf und die Ergebnisse werden hervorragend sein!\n<\/p>\n

\n Madebysofa.com<\/a> verwendet Wei\u00dfraum, um einen sauberen, minimalistischen Look zu schaffen. Auf diese Weise liegt der Schwerpunkt auf Website-Kategorien und Links.\n<\/p>\n

\n <\/a>\n<\/p>\n

\n Vertigo Visual<\/a> h\u00e4lt es einfach und verwendet viel Wei\u00dfraum, um einen Hauch von Stil und Pers\u00f6nlichkeit hinzuzuf\u00fcgen.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Cultured Code<\/a> ist ein Beispiel, bei dem Leerraum nicht wei\u00df, sondern hellblau ist. Es gibt auch ein paar farbige geometrische Elemente, die bestimmte Kategorien aufwerten.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Philip House NYC<\/a> bietet viel Wei\u00dfraum. Der Zweck hier ist, die Aufmerksamkeit auf sich zu ziehen und einige Bilder und Kategorien auf der Webseite zu verbessern.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Built by Buffalo<\/a> 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\u00fchren. W\u00e4hrend Sie nach unten scrollen, k\u00f6nnen Sie feststellen, dass Leerzeichen immer noch dominieren, aber der Fokus liegt immer noch auf anderen Abschnitten.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Ditto<\/a> ist auch eine Website, die Wei\u00dfraum verwendet, um Raffinesse und Eleganz hinzuzuf\u00fcgen. Gleichzeitig wird Negativraum genutzt, um die Produkte besser in Szene zu setzen.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Metta Skincare<\/a> hat ein schlankes Design. Im Fokus stehen Produkte, USP und Website-Kategorien.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Fell Swoop<\/a> f\u00fcgte Leerzeichen hinzu, um Emotionen zu erzeugen und die Benutzerbindung zu erh\u00f6hen.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Attitude Design<\/a> kombiniert Wei\u00dfraum mit \u201efarbigem“ Wei\u00dfraum, um die Aufmerksamkeit auf einige wichtige Punkte auf der Website zu lenken. Einfach aber effektiv!\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Die Super Real-<\/a> Website hat aufgrund der wei\u00dfen Fl\u00e4chen einen Hauch von Eleganz und Raffinesse. Negativraum wird hier verwendet, um die Hauptkategorien hervorzuheben.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Handiemail<\/a> verf\u00fcgt \u00fcber ein einfaches, wei\u00dfes Layout, das das Interesse der Besucher weckt. Alles ist aufgrund eines so sauberen Designs so einfach zu lesen.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Suki<\/a> ist eine Website, die Ihre Aufmerksamkeit fast sofort erregt. Es ist erstaunlich, wie sich Negativraum mit Bildern, Videos und Handlungsaufforderungen abwechselt. Mal schauen!\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Tom Reinert<\/a> ist eine Website, auf der das Vorherrschen von Wei\u00dfraum mehrere Elemente voneinander trennt. Der Gesamteindruck ist eine saubere, sch\u00f6ne und gut lesbare Seite.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Webydo<\/a> nutzt Negativraum aus und verwendet ihn um Bilder, Spalten und Handlungsaufforderungen herum, um verschiedene Teile der Website, Kontaktdaten und mehr zu pr\u00e4sentieren.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n PlainWhite<\/a> ist ein weiteres gro\u00dfartiges Beispiel f\u00fcr Whitespace, der im Webdesign verwendet wird. Wie wir hier sehen k\u00f6nnen, f\u00fchrt es Ihre Augen und tr\u00e4gt zu einem sch\u00f6nen und luftigen Design bei. Auf diese Weise werden alle Website-Kategorien sch\u00f6n angezeigt.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Beanstalk<\/a> ist ein gro\u00dfartiges Beispiel daf\u00fcr, dass wei\u00dfer Raum nicht nur \u201ewei\u00df“ ist. Es schafft Harmonie, Balance, l\u00e4sst die Website aufger\u00e4umt wirken und hebt die Inhalte hervor.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Pulp Fingers<\/a> demonstriert auch die Wirksamkeit von \u201efarbigem“ Negativraum. Hier haben wir eine kr\u00e4ftige Farbe, die die Nachrichten, Handlungsaufforderungen, Schaltfl\u00e4chen f\u00fcr soziale Medien, Kontaktfelder und Website-Kategorien hervorhebt.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n No Leath<\/a> verf\u00fcgt \u00fcber wei\u00dfe Fl\u00e4chen, die eigentlich ein hellgrauer Farbton sind, kombiniert mit gro\u00dfen Grafiken, um ihre Produkte so gut wie m\u00f6glich darzustellen.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Dropbox<\/a> 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\u00f6hen die Lesbarkeit und Benutzerfreundlichkeit, wodurch alles auf der Website extrem einfach zu lesen und zu verstehen ist.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n Something Splendid<\/a> hat viel Wei\u00dfraum kombiniert mit bunten Elementen. Dies macht die Seite extrem einfach zu navigieren. Dar\u00fcber hinaus ist die Interaktion mit einer solchen Website eine angenehme Erfahrung. Jede Kategorie ist auff\u00e4lliger, ohne dass das Design \u00fcberladen wird.\n<\/p>\n

\n \"\"<\/a>\n<\/p>\n

\n 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\u00e4gt Negativraum zu gro\u00dfartigen Benutzererlebnissen bei.\n<\/p>\n

\n Leerraum f\u00fchrt 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\u00fcssen Designer ihren Kunden die Rolle des Negativraums erkl\u00e4ren.\n<\/p>\n

\n Es kann zumindest f\u00fcr Anf\u00e4nger schwierig sein, den Einfluss davon zu artikulieren. Betrachten Sie Whitespace dennoch nicht als \u201eleeren Raum“ ohne Bedeutung. Ja, es mag leer und gew\u00f6hnlich 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\u00fcgen gab. Es kann schwierig sein, es Ihren Kunden zu erkl\u00e4ren, aber ich hoffe, dieser Artikel wird Ihnen dabei helfen.\n<\/p>\n<\/p>\n

\n Aufnahmequelle: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Nehmen wir an, Sie befinden sich in einer Bibliothek. Es w\u00e4re \u00fcberhaupt nicht sch\u00f6n, wenn Sie sich wegen der \u00fcberf\u00fcllten Regale und Flure nicht bewegen k\u00f6nnten, w\u00e4hrend die Bibliothekarin Sie st\u00e4ndig mit den neusten B\u00fcchern, die eingetroffen sind, auffordert. Genauso verh\u00e4lt es sich mit dem im Webdesign verwendeten Wei\u00dfraum: Er gibt vielen Website-Elementen Raum zum Atmen. Wei\u00dfraum ist im Webdesign f\u00fcr die Benutzerfreundlichkeit und Lesbarkeit \u00e4u\u00dferst wichtig und betont bestimmte Elemente. Stellen Sie sich vor, wie es w\u00e4re, wenn viele W\u00f6rter zusammenkleben w\u00fcrden. Die Benutzererfahrung w\u00e4re definitiv sehr unangenehm und es w\u00fcrde viel Aufwand erfordern \u2026<\/p>\n","protected":false},"author":1,"featured_media":131571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[55,146,198],"tags":[],"class_list":["post-253930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-und-wordpress","category-web-tipps-und-tricks","category-webdesign"],"_links":{"self":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/comments?post=253930"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media\/131571"}],"wp:attachment":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media?parent=253930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/categories?post=253930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/tags?post=253930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}