Wenn ein Element einen asymmetrischen Raum verwendet, hebt es sich von anderen umgebenden Elementen ab. Es wirkt lebendiger, was besonders hilfreich ist, wenn Sie Bereiche einer Seite entwerfen, in denen ein Link / Button mehr Aufmerksamkeit als andere erfordert.
Heute werden wir uns die Asymmetrie durch Kontrast, Abstand und Layout genauer ansehen. Wir denken über den beobachtbaren Kontrast nach und wie der Weltraum die Aufmerksamkeit erregt.
Bei der Asymmetrie geht es nicht immer um äußere Beziehungen mit Rändern, Füllungen oder Regenrinnen.
Asymmetrie kann sich auch mit den internen Beziehungen wie Bildminiaturen oder Textausrichtung befassen. Zum Beispiel kann eine Bildergalerie 5 Miniaturbilder zeigen, bei denen der mittlere Daumen etwas größer als die anderen ist und hauptsächlich dazu verwendet wird, Aufmerksamkeit zu erregen. Asymmetrie ist ideal, um die Aufmerksamkeit auf einen bestimmten Bereich auf der Seite oder auf ein bestimmtes Element auf der Seite zu lenken.
Und wie wir im kostenlosen E-Book-Web-UI-Design für das menschliche Auge beschrieben haben, ist Asymmetrie manchmal nur aus Gründen der Asymmetrie nützlich.
Schauen wir uns die Asymmetrie durch Kontrast, Abstand und Layout genauer an.
Beobachtbarer Kontrast
Durch das Entfernen von Ablenkungen zwingen Sie die Benutzer, sich nur auf das zu konzentrieren, was sofort sichtbar ist.
Sie können dann Designeffekte auf diese Bereiche anwenden, z. B. Hintergrundverläufe oder sogar jQuery-Animationen. Diese Effekte können für ein oder zwei Elemente verwendet werden, um sie von den anderen Elementen abzuheben.
Eines unserer Lieblingsbeispiele für diesen Effekt lebt auf der Homepage von Sketch by Bohemian Coding. Die Startseite mischt dunkle und helle Farben, um den Kontrast zu einem einheitlichen Layout zu mischen.
In der Kopfzeile finden Sie zwei Schaltflächen: eine für eine kostenlose Testversion und die andere für den Kauf der Software. Beide Tasten sind blau und nehmen den gleichen Platz ein. Die Schaltfläche für die kostenlose Testversion verwendet jedoch ein leeres Hintergrund, der gemeinhin als Geister-Taste bezeichnet wird. Die Schaltfläche "Kostenlose Testversion", die über dem dunklen Header angeordnet ist, scheint unscharf in den Hintergrund zu geraten.
Da der Kauf-Button einen hellblauen Hintergrund und weißen Text verwendet, hebt er sich stark und laut vom dunklen Hintergrund ab. Wenn Sie Ihre Augen schnell über die Kopfzeile scannen, ist es offensichtlich, dass der Kauf-Button Ihre Aufmerksamkeit fast sofort auf sich zieht. Dies wird durch Farbauswahl, aber auch durch Leerraum zwischen den Elementen verursacht.
Vertikale und horizontale Leerzeichen werden verwendet, sodass die Schaltflächen vom Kopfzeilentext getrennt angezeigt werden. Da eine Taste heller ist als die andere, ist sie natürlich auffallend, da viel Platz vorhanden ist und nicht viel anderes im Weg ist, um Aufmerksamkeit zu erregen.
Im Fußzeilenbereich sehen Sie einen ähnlichen Schaltflächenstil:
In diesem Fall haben Benutzer nur die Möglichkeit, ihre E-Mail zu senden oder die Informationen zurückzuhalten.
Da Sie möchten, dass Sketch Ihre E-Mail nach der Eingabe so schnell wie möglich übermittelt, ist der Abstand zwischen dem Eingabefeld und der Schaltfläche "Senden" viel geringer. Dies folgt dem Fitts'schen Gesetz, da Sie die Entfernung verringern (und die Größe unverändert bleibt), um die Zeit zu beschleunigen, die Sie benötigen, um sich zwischen Elementen zu bewegen.
Beachten Sie schließlich, dass die asymmetrische Größe des Eingabeformulars im Vergleich zur Schaltfläche "Übergeben" auch Ihren Blick auf diesen Teil der Seite lenkt. Genau das möchte Sketch.
Verwenden Sie Leerzeichen zu Ihrem Vorteil, um wandernde Augen auf bestimmte Seitenelemente zu ziehen. Um zu experimentieren und herauszufinden, was am besten funktioniert, probieren Sie verschiedene Methoden des A / B-Tests für verschiedene Abstandswerte aus.
Hier einige allgemeine Hinweise, die auf der Sketch-Website zu finden sind:
- Kontrast bezieht sich nicht immer auf Farbe. Es kann sich auch auf kontrastierende Elemente von Raum, Größe und Position relativ zu anderen Elementen auf der Seite beziehen.
- Leere Räume können je nach Kontext entweder offensichtlich oder unauffällig sein.
- Umliegende Elemente spielen eine große Rolle für die natürliche Sichtbarkeit anderer Elemente.
- Symmetrie schafft Erinnerung und Harmonie, während die Asymmetrie die Aufmerksamkeit auf sich zieht. Beide entsprechend ausgleichen.
Speicherplatz Achtung
Ein etwas anderes Beispiel finden Sie auf der Homepage von Procreate, einem digitalen Zeichen- und Malwerkzeug für das iPad. Wenn Sie die Seite überfliegen, werden Sie feststellen, dass das gesamte Layout dunkel ist und stark übergroße Seitenelemente enthält.
Das Design zeigt, wie Sie den Fokus auf einzelne Elemente auf einer sehr großen Seite ziehen können. Screenshots, Demo-Bilder und Features umfassen jeweils eigene Bereiche.
Leerzeichen trennen Text und visuellen Inhalt. Das Design ist besonders bemerkenswert, wenn Textfarben verwendet werden, um zwischen Überschriften (höherer Kontrast) und allgemeinem Seitentext (niedrigerer Kontrast) zu unterscheiden.
Durch Aufteilen einer Seite in Abschnitte erstellen Sie eine natürliche Inhaltshierarchie. Durch das Unterteilen dieser Abschnitte mit einzigartigen Stilen (Vollbildhintergründe, übergroße Typografie, App-Screenshots) werden die Einteilungen noch deutlicher.
Beachten Sie, dass nicht alle Websites von großen Inhalten profitieren können. Dies scheint jedoch bei Designern ein sehr beliebter Trend zu sein. Es sieht fantastisch aus, wenn es richtig ausgeführt wird.
Das abwechselnde Layout
Auf der Oberfläche können abwechselnde Inhalte als störend empfunden werden, weil Sie den Blick des Lesers dazu zwingen, herumzuspringen. Da der Inhalt jedoch so gut verteilt ist, ist es viel einfacher, ein Z-Pattern zu lesen, als Sie sich vielleicht vorstellen.
Das Muster zwingt die Besucher außerdem dazu, auf den Zehen zu bleiben, da das Design keine Informationen über Löffel gibt. Natürlich ist dieses Muster nur möglich, weil der geschmackvolle weiße Raum den Pfad für das Scannen darstellt.
Wenn man sich die Seite für Wunderlist ansieht, können wir dieses asymmetrische Muster im weißen Raum erkennen. Der asymmetrische Abstand wird sorgfältig ausgeführt, so dass er interessant aussieht, ohne störend zu wirken.
Wir können viel von den Entwurfsmustern lernen, die Wunderlist bei der Verwendung von Abständen demonstriert:
- Asymmetrie hat ihren Zweck, wenn versucht wird, auf bestimmte Bereiche der Seite aufmerksam zu machen.
- Asymmetrie in einem sich wiederholenden Muster wird zur Symmetrie.
- Leerzeichen zwischen Text oder Grafiken werden auch als ein größeres Muster angezeigt.
- Leerzeichen sollten das Durchsuchen von Inhalten einfacher und vorhersagbarer machen.
Lesen Sie weiter
Im ebook von Web Design Trends 2016 können Sie mehr umsetzbare Designtechniken erlernen. In dem 185-seitigen Handbuch werden 10 Best Practices ausführlich erläutert. Sie finden 165 analysierte Beispiele von heutigen Top-Unternehmen.