Asymmetrische Balance im Webdesign
Als ich zuerst die Idee von symmetrische Designmuster Ich hatte hier bei Webdesigner Depot nicht die Absicht, mich mit dem Begriff des asymmetrischen Designs auseinanderzusetzen.
Doch je mehr ich darüber nachdachte, desto mehr fühlte ich mich gezwungen, das Thema zu behandeln, um einige der Ideen, die sich um symmetrische Entwurfsmuster drehten, gegenüberzustellen.
Im asymmetrischen Design finden wir Designs, die Elemente enthalten, die kein Spiegelbild erzeugen. Meistens sind diese asymmetrischen Designs tatsächlich ausgeglichen, aber eben nicht durch vollkommen ähnliche Hälften.
Diese Art von Design ist eigentlich viel einfacher zu bekommen, wenn man bedenkt, dass die meisten Inhalte nicht perfekt symmetrisch sind.
Betrachten wir eine Vielzahl von Websites, die diesen Designansatz umsetzen und vielleicht einige Ideen entdecken, die sich auf Ihre eigene Designarbeit auswirken können.
Einführung in die Verwendung von Asymmetrie
Bully Unterhaltung
Als Einführung in die Idee des asymmetrischen Designs bietet dieses dramatische Design einen guten Ausgangspunkt. Zwar gibt es wirklich keinen Grund, warum dieses Design nicht rekonfiguriert werden könnte, um eine perfekte Symmetrie zu erzeugen, aber es würde einfach nicht so gut funktionieren. Die großen, reich illustrierten Designs versetzten den Text der Homepage wunderschön. Ihre Größe sorgt dafür, dass sie extrem sichtbar sind und sie sind die wichtigste visuelle Antriebskraft des Designs. Dieses natürliche Gleichgewicht zwischen einem einzelnen großen Element und einer dichter gepackten Alternative ist ein sehr gebräuchlicher Ansatz.
Jorge Rigabert
Dieses Layout zeigt ein ziemlich standardmäßiges Weblayout. Eine kleine Seitenspalte, die die Schlüsselnavigation enthält, gepaart mit einer viel größeren Spalte für den Websiteinhalt. Dies ist vielleicht eines der wenigen Standardlayouts, die täglich von Designern verwendet werden. Ich glaube, dass ein Großteil des Designprozesses in diesem Fall halb automatisch geschieht. Betrachten Sie in diesem Fall die Seitenleiste, die die Inhaltsspalte asymmetrisch ausgleicht. Die Seitenleiste hat eine dunklere Farbe, wodurch der leichtere Inhaltskanal ausgeglichen wird. Ohne den dunkleren Hintergrund würde die Seitenleiste wahrscheinlich verloren gehen und nicht so gut hervortreten.
Bilder zum Ausbalancieren von Text
Ein weiterer Standardansatz für Webdesign, der zu einem asymmetrischen Designelement wird, ist die Paarung von Text und Bildern. Wie Sie in den folgenden Beispielen sehen werden, hat jedes ein großes Bild. Dieses Bild ist in gewisser Weise mit einem Textblock gepaart. Diese Kombination ist sehr häufig.
Der Trick ist ziemlich offensichtlich, nur sicherstellen, dass die beiden sich in irgendeiner Weise ergänzen. Da diese beiden Elemente normalerweise eine Schleife für die Augen erzeugen, ist es wichtig, dass sie irgendwie zusammenarbeiten. Der naheliegendste Ansatz ist, das Bild wörtlich darzustellen oder zu zeigen, worüber der Text spricht. Eine andere übliche Taktik ist, dass das Bild die im Text dargestellte Idee erweitert.
Hier sind einige Beispiele zu beachten.
Kuchen Süßer Kuchen
Dieses Design ist sicherlich gut ausbalanciert, nutzt dafür aber mehrere asymmetrische Elemente. Beachten Sie das große Bild eines Kuchens mit dem Text kombiniert. Die Bildsprache ist ziemlich offensichtlich, aber fundamental wichtig. In diesem Fall informiert uns der Kuchen nicht nur darüber, dass es sich um eine Konditorei handelt, sondern auch, welchen besonderen Stil sie bieten könnte. Kombinieren Sie dies mit dem klärenden Text, der damit verbunden ist, und Sie haben ein ziemlich klares Verkaufsargument. Das ist nicht alles, um das unglaublich leckere Design dieser Seite zu erwähnen.
Mehr Soda
Dieses Beispiel verwendet auch asymmetrische Designelemente, die auf einem großen Bild kombiniert mit einem Textblock basieren. In diesem Fall ist die Verbindung nicht annähernd so klar. Es gibt kein offensichtliches Verkaufselement. Stattdessen wird das Bild dekorativer und schafft einen allgemeinen Stil für die Website. Meiner Meinung nach ist es etwas weniger funktional, aber es ist wirklich schwer zu sagen, ohne genau zu wissen, wie effektiv die Seite ist. Es scheint so, als ob ein solches Bild das einzigartige Ziel hat, dich dazu zu verleiten, ein wenig mehr nachzuforschen, um zu sehen, worum es geht. Eine Art Teaser, wenn du willst.
Adaptives Webdesign
Wie Sie wahrscheinlich schon herausgefunden haben, ist dieses Muster ungefähr so häufig wie die Farbe Blau. Ich würde es wagen zu spekulieren, dass fast jede Seite irgendwann ein solches visuelles Werkzeug zur Verfügung stellt. Ich denke, dass dieser Gemeinplatz die Natur zu einem Thema macht, das es sich lohnt zu diskutieren. Oft finde ich die meiste Inspiration und frische Ideen, wenn ich Dinge überdenke, die ich immer wieder und wieder überlege.
Diese einfache Seite fördert ein Buch. Und natürlich ist das Hauptelement, wenn Sie darauf landen, ein großes Bild des Buches. Kombinieren Sie dies mit dem großen Textblock und Sie haben einen ausgewogenen Bereich, der alle kritischen Elemente enthält. Am wichtigsten ist, dass es mit einem auffälligen Aufruf zum Handeln abgeschlossen ist. Die Kontinuität dieses Bereichs ist einfach und genau. Die Augen fließen leicht durch und verbrauchen die kritischen Informationen. Es ist nicht verwirrend oder kompliziert oder clever oder knifflig. Der Ansatz ist einfach und klar.
Vordergrund- und Hintergrundelemente
Ein neuer Ansatz für ein asymmetrisches Design besteht darin, Hintergrundelemente zu verwenden, die die Vordergrundelemente asymmetrisch ausgleichen. Diese Art von Ansatz erzeugt eine interessante Dynamik, bei der der Hintergrund eher eine funktionale Rolle als Teil des Inhalts spielt und dennoch Teil des Hintergrunds der Site ist. Meistens geschieht dies durch einfache Überschneidungen, die die Illusion von Tiefe erzeugen. Hier sind einige Beispiele zu beachten.
Peter McLeavey Galerie
Die Webseiten dieser Galerie sind eine perfekte Demonstration dieser Idee. Hier spielt das Hintergrundelement viele Rollen. Zum einen schafft er in diesem Abschnitt eine asymmetrische Balance mit dem großen grauen Kreis im Vordergrund. Diese visuelle Kombination erzeugt zwei Bereiche, in denen die Augen hin und her springen. Dies ist meiner Meinung nach eine gute Sache.
Das Element auf der linken Seite enthält das Haupt-Branding und Links zum Inhalt der Site, während das Hintergrundelement Sie über den Kontext der Site informiert. Sie sehen sich eine Galerie-Site an, und dies wird innerhalb weniger Sekunden nach der Landung auf der Website deutlich. Ich finde es toll, dass so ein informatives Element wie der Hintergrund auch eine große Rolle für das Design und den Stil der Seite spielen kann. Besonders, wenn es so perfekt mit dem Kontext des Produkts übereinstimmt, das die Seite bietet. Solch ein einfacher Ansatz, aber sehr effektiv.
Aleksandar Grkinic
Das ist einfach über mich Seite umfasst auch diese einfache Idee, wo ein Hintergrundelement einen Vordergrund asymmetrisch ausbalanciert. In diesem Fall ist der Hintergrund jedoch nicht vollständig klar. Und das ist es, was ich wirklich daran liebe. Die Illusion von Tiefe ist völlig da, und ohne irgendeine Art von Überlappung ist es tatsächlich schwierig zu entscheiden, was der Hintergrund eigentlich ist. Ich vermute, wir könnten argumentieren, dass die Person, die springt, überhaupt nicht im Hintergrund ist. Unabhängig davon ist das asymmetrische Gleichgewicht klar. Und ohne die schöne Kombination verschiedener Elemente würde die Seite nicht existieren. Das Design basiert in vielerlei Hinsicht ausschließlich auf dem Konzept der asymmetrischen Balance. Oft scheint es, dass extrem einfache Designs mit schönen Kontrasten so außergewöhnlich aussehen können.
Robert Dabi
In diesem Fall spielt der Hintergrund eine interessante Rolle im Design, erzeugt aber nicht die asymmetrischen Elemente, die wir bisher gesehen haben. Meiner Meinung nach ist das große Bild eindeutig ein Vordergrundelement des Designs. Was ich jedoch liebe, ist, wie es diese Linie mit etwas so Einfachem wie dem Schatten unter dem Bild subtil verwischt. Dies fügt es effektiv mit dem Hintergrund und schafft eine schöne Dynamik. Offensichtlich ist das große Bild asymmetrisch mit der Kopie daneben ausgeglichen. Treten Sie durch die Seiten der Website und Sie werden feststellen, dass sich der Hintergrund auf sehr interessante Weise ändert und mit der Grafik verschmilzt. Ein atemberaubendes Design, das sich frisch, sauber und super glatt anfühlt. Scheint mir eine verdammt gute Präsentation für eine Portfolio-Website.
Zehn weitere Designs
Im Folgenden habe ich zehn weitere Designs vorgestellt, die asymmetrische Elemente verwenden. Wie ich bereits erwähnt habe, könnte ich viele Websites in diese Kategorie aufnehmen. Also, für die Zwecke dieses Artikels habe ich sorgfältig Designs ausgewählt, die ich benutze den Ansatz in leicht atypischen und kreativen Wegen. Betrachten Sie jedes Design im Hinblick auf dieses Thema und ich hoffe, dass Sie einige neue Ideen erhalten werden, um Ihr nächstes Design zu inspirieren.
Greenluv
Andersson Weise
Prognose
13 Frauen
Raffles-Einrichtung
Städtischer Svensson
Karussell
Purlize
Busse in der Brauerei
Humanisch
Fazit
Balance ist ein grundlegender Teil des Designprozesses, und die Verwendung von asymmetrischen Elementen ist ebenso grundlegend. Ich liebe es immer wieder, in die Grundlagen des Designs einzutauchen, da ich feststelle, dass ich es immer auf eine neue Art und Weise verstehe, die sich auf meine Arbeit auswirkt. Es gibt unzählige Möglichkeiten, Dinge anzugehen und unsere Muster zu brechen, kann oft zu frischen und neuen Designs führen, die unsere Leidenschaft für unsere Arbeit verjüngen.
Was sind deine bevorzugten asymmetrischen Website-Designs? Wer macht etwas anderes mit Asymmetrie? Lass es uns in den Kommentaren wissen!