Das Prinzip der Nähe im Webdesign
Kürzlich habe ich ein abgeholt altes Designbuch das hatte ich schon lange nicht mehr berührt, und es erinnerte mich an ein Designprinzip, das viele von uns wahrscheinlich nur unterbewusst, wenn überhaupt, in die Praxis umsetzen.
Das Buch befasst sich mit dem Design für den Druck, aber ich dachte, es wäre ein großartiges Thema, um im Kontext des Webdesigns zu diskutieren.
Das Prinzip der Nähe erfordert, dass verwandte Elemente visuell gruppiert werden, wodurch weniger Unordnung entsteht und das Layout besser organisiert wird. Gegenstände, die nichts miteinander zu tun haben, sollten weiter voneinander entfernt werden, um ihre mangelnde Beziehung zu betonen.
Ich werde Einzelheiten besprechen und einige Möglichkeiten, wie dies effektiv umgesetzt werden kann, aber diese Definition sollte ausreichen für das, was wir in diesem Artikel diskutieren werden.
Die korrekte Verwendung von Nähe in Verbindung mit anderen Designprinzipien hat einen großen Einfluss auf die Benutzererfahrung und letztlich auf den Gesamterfolg einer Website.
Keine Angst vor weißem Raum
Der erste Schritt, um das Prinzip der Nähe richtig umzusetzen, besteht darin, die Bedeutung von Leerraum im Design zu verstehen.
Ein Mangel an Leerraum ist ein häufiges Problem bei Amateur-Designs. Design ist ein Mittel zur Kommunikation von Informationen, und wenn Amateure versuchen, eine Botschaft durch Design zu vermitteln, besteht ihre natürliche Neigung darin, den Inhalt gleichmäßig auszubreiten, um den Raum zu füllen, ohne viel über das Potential von gut organisiertem Leerraum nachzudenken.
Leerraum kann das Verhalten des Benutzers so viel, wenn nicht mehr, als der tatsächliche Inhalt auf der Seite beeinflussen. Der weiße Raum führt die Augen des Benutzers in die gewünschte Richtung, schafft Kontrast und macht einen bleibenden Eindruck.
Obwohl die oben genannte Website von W3Avenue eine beträchtliche Menge an Inhalten enthält (mit Artikeln in zahlreichen Kategorien, wie jedem Design-Blog) und einer Reihe von Sidebar-Anzeigen, überwältigt sie den Benutzer nicht visuell.
Der großzügige Raum in der Kopfzeile und entsprechend platzierte Elemente in den Inhalts- und Seitenleistenbereichen tragen zu diesem sauberen und organisierten Aussehen bei. W3Avenue macht mit seinem Inhalt nichts besonders Einzigartiges, aber sein Design trägt wahrscheinlich dazu bei starker Verkehr es kommt in eine kurzer Zeitraum .
Seien Sie also nicht über den leeren Platz in Ihrem Design unsicher. Die richtige Verwendung von Leerraum ist der erste Schritt bei der Umsetzung des Prinzips der Nähe und macht so ein Design visuell ansprechender.
Visuell gruppierte Elemente
Leerraum ist jedoch nur ein Teil der Implementierung von Nähe. Ein Design kann viel Leerraum haben, aber wenn die Elemente nicht korrekt gruppiert sind , hat der Leerraum nur wenig Wirkung, wie die beiden folgenden Visitenkarten zeigen:
Die Karte auf der linken Seite ist nicht überladen; es hat etwas Leerraum. Aber die Elemente sind nicht logisch gruppiert, so dass der Effekt schwach ist.
Der Leser ist gezwungen, die Karte mehrmals zu scannen. Die Karte auf der rechten Seite hat jedoch eine angenehmere visuelle Wirkung. Der Leser muss nur einen Blick darauf werfen, um die Information aufzunehmen (mehr dazu später).
Die Gruppierung von Elementen in der Karte rechts ist ebenfalls logischer . In der ersten Gruppe von Elementen sehen wir den Firmennamen in großer Schrift mit der Position darunter. Im zweiten Satz erfahren Sie, wie Sie Informationen zu den bereitgestellten Diensten erhalten (z. B. Telefonnummer und Website-Adresse).
Dieses Beispiel veranschaulicht die Wichtigkeit der Nähe beim Druckdesign, und eine ähnliche Idee kann für Elemente im Webdesign verwendet werden, wie im Screenshot unten gezeigt.
Obwohl die Website von Arora Designs nicht komplex oder informationsintensiv ist, ist die Verwendung von Leerraum und die visuelle Trennung von gruppierten Elementen effektiv. Es sollte hier angemerkt werden, dass "Leerraum" nicht weiß sein muss; Es kann ein beliebiger leerer Raum zwischen den Elementen sein, unabhängig von der Farbe.
Im Fall von Arora Designs, obwohl der Leerraum Farbe hat, dient es dem gleichen Zweck, die Kopf-, Navigations- und Inhaltsbereiche visuell zu trennen.
Erstellen einer visuellen Hierarchie
Die effektive Verwendung von Leerräumen und das Gruppieren verwandter Elemente sind entscheidend, um Ihrer Website eine klare visuelle Hierarchie zu verleihen. Die Architektur und der Informationsfluss der Website sind natürlich die Grundlage für eine effektive Nähe .
Hierarchie wird durch die Art und Weise vermittelt, in der Elemente gruppiert und untergruppiert werden.
Diese Hierarchie hilft dem Benutzer zu verstehen, wo er gewesen ist und wohin er gehen möchte, und hilft so, den Zweck der Website zu kommunizieren. Eine Liste ist ein gutes Beispiel für ein Element, das die visuelle Hierarchie kommunizieren kann, wie im folgenden Bild gezeigt:
Durch einen Blick auf die beiden obigen Listen, ohne den Inhalt zu untersuchen, sehen Sie, dass die Liste auf der linken Seite eine klare visuelle Hierarchie aufweist, die die Beziehungen zwischen den Elementen zeigt (eingerückte Elemente sind Unterkategorien der primären Elemente).
Diese Hierarchie wäre ohne Leerzeichen nicht möglich Makro und Mikro weißer Raum). Die Liste auf der rechten Seite ist nur eine zufällige Gruppierung von Elementen ohne scheinbare Beziehung oder Hierarchie.
Die Umsetzung dieses Prinzips auf einer Website mit etwas so Einfachem wie einer HTML-Liste ist einfach. Die Herausforderung besteht darin, dieses Prinzip als Leitfaden für den Aufbau der Website von der Planung über den Drahtwurf bis hin zum Design zu verwenden.
Layouts, die einfach zu scannen und zu lesen sind
Inhalt, der in einer Hierarchie organisiert und logisch gruppiert ist, ist einfacher zu lesen und zu scannen .
Zum Beispiel sollten Überschriften dem Benutzer erlauben, zu scannen, indem Hauptpunkte deutlich angegeben werden. Unnötig zu sagen, dass Inhalte von Anfang an geplant werden sollten, um eine angemessene visuelle Hierarchie zu reflektieren; Die obige Liste mit eingerückten Elementen ist ein schlechtes Beispiel, da der Inhalt nicht mit der visuellen Hierarchie übereinstimmt.
Eine Website, die Nähe in ihrer Architektur und Design verwendet, überwältigt den Benutzer nicht mit Informationen.
Obwohl es relativ einfach ist, die Prinzipien der Nähe auf Websites zu implementieren, die wenig Inhalt haben, ist die Nähe bei inhaltsreichen Websites viel wichtiger.
Nachrichten-Websites sind gute Fallstudien zu diesem Prinzip. Unten ist ein Vergleich der Los Angeles Zeiten und das Globus und Post .
Insgesamt hat die Website der LA Times ein ansprechendes Design, hauptsächlich wegen der Farbauswahl und Typografie. Aber es hat auch ein sauberes und übersichtliches Aussehen, besonders im Header-Bereich.
Das Logo ist groß und sticht hervor, was effektiv zum Branding der Website beiträgt. Das dem Logo am nächsten liegende Objekt ist die horizontale Navigationsleiste darunter. Da die Navigationsleiste dunkel ist, kontrastiert sie mit dem Logo.
Die Textlinks über dem Logo sind übersichtlich angeordnet, mit viel Platz zwischen den beiden Bereichen. Die linke Ausrichtung des Inhalts im Header trägt ebenfalls zum sauberen Aussehen bei.
Alle Informationen im Header der LA Times sind mit verwandten Elementen gruppiert, mit Ausnahme des Logos, das für sich allein steht. Nichts in der Kopfzeile verwirrt Sie oder lässt Sie sich fragen, wo es hingehört.
Was ist mit der unten gezeigten Website von Globe and Mail?
Die Globe and Mail-Website hat einen komplexen Header-Abschnitt, der das Prinzip der Nähe nicht implementiert.
Die einzige signifikante Menge an Leerraum ist in der Mitte neben dem Logo, was nichts bewirkt. Zwei Anzeigen erscheinen in der Kopfzeile und tragen zum Durcheinander bei. Die Anzeigen können aus finanziellen Gründen notwendig sein, so dass die Probleme verständlich sind.
Das größte Problem ist der unordentliche Abschnitt über der großen Werbebanner. Es gibt keine klare Unterscheidung zwischen Elementen in diesem Abschnitt.
Drei gepunktete vertikale Linien versuchen, das Gebiet in vier Abschnitte zu unterteilen, aber das erste Trennzeichen macht keinen Sinn. Tatsächlich würde dieser Abschnitt wahrscheinlich einladender aussehen, wenn diese gepunkteten Trennzeichen entfernt würden.
Grids helfen mit Nähe
Eine Möglichkeit, Elemente zu gruppieren und Leerraum entsprechend zu verwenden, besteht darin, mit einem Gitter zu beginnen.
Aus einem flüchtigen Blick auf die Websites von LA Times und Globe and Mail scheint nur die LA Times ihren Entwurf auf einem Raster zu basieren oder zumindest Rasterprinzipien in der Planungsphase zu verwenden. Die Website von Globe and Mail zeigt wenig Anzeichen für ein Rasterformat.
Ein gitterbasiertes Layout mit entsprechenden Rinnengrößen ermöglicht viel Platz zwischen den Abschnitten und zwingt den Designer in vielen Fällen, Prinzipien der Nähe zu implementieren, ohne darüber nachzudenken.
Im Folgenden finden Sie Screenshots von zwei Websites, die die 960 Gittersystem . Sie sind beide ziemlich einfach (dh nicht inhaltlich schwer wie die oben besprochenen Nachrichtenwebsites), aber sie zeigen, dass Raster den Seitenelementen Raum zum Atmen geben und jedem Abschnitt ein eigenes visuelles Zuhause bieten.
Führen Sie Benutzer auf den richtigen Weg
Ein weiterer wichtiger Vorteil von Proximity ist, dass Benutzer die Website ohne unnötige Verzögerungen oder Hindernisse navigieren können. Wenn die primäre Navigation klar von den anderen Elementen auf der Seite getrennt ist, wird sie sofort gefunden und ist weniger wahrscheinlich in Vergessenheit geraten.
Die richtige visuelle Hierarchie durch Nähe hilft Benutzern, tiefer in Ihre Website einzutauchen, ohne sich Gedanken darüber machen zu müssen, wo sie sich gerade befinden oder wohin sie gehen.
Sie werden sich immer wohl fühlen und schnell und effizient zu den wichtigsten Bereichen Ihrer Website gelangen.
Webdesigner mit wenig oder keiner Erfahrung im Druckdesign könnten von den Prinzipien profitieren, die Printdesigner seit Jahren vor dem Webboom umsetzen.
Die Nähe ist nicht das einzige Designprinzip, das dazu beiträgt, dass eine Website benutzerfreundlicher und visuell ansprechender ist, aber es ist ein wichtiger Faktor, der aus vielen der eben genannten Gründe berücksichtigt werden muss.
Weiterführende Literatur
- Design Basics: Das Proximitätsprinzip
- Wie CRAP ist Ihr Website-Design?
- Verwenden der Gruppierung in Webseitenlayouts
Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, geschrieben. Louis rennt Beeindruckende Webs , wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Sie können Louis folgen auf Twitter oder sich mit ihm in Verbindung setzen über seine Website .