Asymmetrisches Design für schöne, ausgewogene Layouts

Was denkst du über asymmetrisches Design? Diese einfache Frage kann unter den Designern manchmal heftige Debatten auslösen. Asymmetrisches Design kann eine der komplizierteren Techniken sein, die man durchziehen kann, aber wenn man es gut macht, entstehen schöne und auffällige Designs.

Während die Definition von Asymmetrie das Fehlen einer Symmetrie oder Gleichheit zwischen zwei Hälften ist; Es ist kein Mangel an Gleichgewicht, wie manche zu Unrecht annehmen. Designer können Asymmetrie verwenden, um Gleichgewicht und Harmonie zu erzeugen, auch wenn zwei Seiten des Designs sich nicht spiegeln. So können Sie loslegen.

Warum Asymmetrie?

Asymmetrie kann eines der wirkungsvollsten Konzepte in Ihrem Design-Toolkit sein. Es ist eine aufmerksamkeitsstarke Technik, die interessant und zum Nachdenken anregt.

Die Anwendung kann schwierig sein, weshalb einige Designer sich von völlig asymmetrischen Projekten fernhalten. Aber du musst nicht. Die Verwendung von Asymmetrie kann jeder Designer tun. es braucht nur Planung.

Der beste Ausgangspunkt ist das Mischen und Abgleichen symmetrischer und asymmetrischer Konzepte in einem Designprojekt. Wenn Sie den Entwurf in kleinere Abschnitte unterteilen, gibt es Teile, die unterschiedliche Arten von Waagen enthalten. (Denken Sie an Panels in Parallax-Scrolling-Sites oder an das Design eines Bildes innerhalb der Leinwand.)

Überlegen Sie, warum Sie auch Asymmetrie verwenden. Wenn Sie wissen, was Sie mit den Visuals erreichen möchten, können Sie feststellen, wie Sie die Techniken am besten einsetzen, um dies zu erreichen. Asymmetrie ist aktiv und erregt Aufmerksamkeit; es kann schwer aber natürlich sein. Und wenn Sie etwas auf der Leinwand haben, vertrauen Sie Ihrem Bauch. Sieht es richtig aus oder fühlt es sich an?

Balance zu erreichen ist die Magie dazwischen. Gutes asymmetrisches Design beinhaltet Gleichgewicht, so dass kein Teil des Projekts für den Rest zu schwer ist. Sie können ein Gleichgewicht herstellen, indem Sie Elemente mit Leerzeichen versetzen, die Betonung mit Bewegung setzen, das Gewicht verstehen, den Fokus mit Farbe hinzufügen und ein Raster für Ausrichtung und Organisation verwenden.

Raum verwenden

Einer der Orte, an denen die Asymmetrie wirklich zu blühen beginnt, liegt im minimalistischen Designtrend. Da Designer so viel Platz benötigen, können Sie ein einfaches Objekt oder Bild gegen einen größeren weißen oder dunklen Hintergrund abgleichen.

Der Spagat zwischen weißem oder negativem Raum und Elementen im Design sollte einen Kontrast erzeugen. Dadurch wird die Bewegung des Auges über das Design geleitet.

Beispiel: Ike Kligerman Barkley zieht den Benutzer mit einer hohen Drama-Balance an. Der Richtungszug des Bildes in der unteren Ecke des Bildschirms gegen den Namen und die Navigation in der gegenüberliegenden Ecke ziehen den Blick zwischen die Elemente, wagen Sie fast, nicht hinzusehen. Das Bild gibt Ihnen eine Vorstellung davon, warum Sie die Website gefunden haben, und das minimale Rahmenwerk regt an, durch die Links zu klicken.

Bewegung betonen

Denken Sie an einen Reifen, der einen Hügel hinunterrollt. Sie können die Bewegung sofort spüren. Dasselbe passiert, wenn Sie diese Bewegung asymmetrisch gestalten.

  • Das Auge bewegt sich natürlich vom größeren, schwereren Teil des Bildschirms zum leichteren Teil.
  • Das Auge folgt Richtungshinweisen wie einem Pfeil oder einer Form, die in eine bestimmte Richtung zu zeigen scheint.
  • Das Auge folgt dem Pfad der Augen im Bildschirmbild, so dass ein Benutzer in dieselbe Richtung und auf die Person im Design blickt.
  • Der Richtungsfluss wird von links nach rechts verschoben, es sei denn, es wird ein kräftiger Zug in eine andere Richtung ausgelöst.

Beispiel: Leen Heyne Fine Jewelry verwendet Bewegung, um den Blick auf das vorgestellte Produkt zu lenken. Geometrische Formen richten das Auge buchstäblich in die richtige Richtung, während das Gefühl entsteht, dass das Armband (oder der Ring) auf natürliche Weise über die Leinwand rollen könnte. Dieser gerichtete Einfluss hat noch etwas anderes: Er verweist auf die Navigationspfeile, um zur nächsten Seite zu gelangen.

Fokus mit Farbe hinzufügen

Asymmetrische Farbmuster weisen in der Regel hohe Kontrast- und Farbkombinationen auf. Denken Sie an helle Farbtöne gegen Schwarz oder ein getöntes Foto, auf dem obige weiße Typografie zu sehen ist. Ein hoher Farbkontrast wird auf bestimmte Teile des Designs fokussiert und visuell gewichtet.

Mit dem Farbrad können asymmetrische Farbkombinationen erstellt werden. Entscheiden Sie sich für Farbpaarungen und -kombinationen, die außerhalb der herkömmlichen Farbregeln liegen, um ein Gefühl der Asymmetrie zu erzeugen. Betrachten Sie Farben, die selten für Auswirkungen verwendet werden. Verwenden Sie Farbe, um andere Elemente in der asymmetrischen Kontur hervorzuheben und hervorzuheben. Farbe funktioniert sehr gut mit Elementen wie geometrischen Formen, Typografie oder sogar im Hintergrund und dient als sekundärer Fokus, um das Gleichgewicht zu erreichen.

Beispiel: Die HLK-Agentur verwendet Farbe, um ein fast symmetrisches Design zu erhalten, das Sie zum Nachdenken anregt. Die blaue Unterstreichung und die Schaltfläche erzeugen einen einfachen Fokus mit Asymmetrie, der das subtile Hamburger-Menü und Branding-Symbole in den oberen Ecken abwägt.

Vergiss das Gitter nicht

Wenn Sie kein Raster zum Erstellen von Spiegelbildern verwenden, ist es dennoch ein wesentlicher Bestandteil des Entwurfsprozesses. Durch die Verwendung eines Rasters zur Erzeugung einer Asymmetrie können Sie Gleichgewicht und Organisation erreichen.

Betrachten Sie jedes Element im Raster wie bei jedem anderen Projekt. Ruhen die Dinge horizontal und vertikal in einer bestimmten Weise? Gibt es auf beiden Seiten der Leinwand ein Versatzgewicht - von links nach rechts und von oben nach unten.

Stellen Sie sich das Raster als eine Skala vor - für jedes Element, das Sie auf einer Seite hinzufügen, muss etwas auf der anderen Seite versetzt werden. Betrachten Sie ein Spaltenraster mit einer ungeraden Anzahl von Spalten, um eine sofortige Asymmetrie zu erzeugen. Erstellen Sie auf einer Seite des Gitters Elemente, die einer Spaltenbreite entsprechen, auf der anderen Seite verdoppeln Sie sie.

Beispiel: BrightByte Studio verwendet ein Säulenraster zum Erstellen von Spalten, das die Elemente in einer Mischung aus symmetrischen und asymmetrischen Elementen ausgerichtet und organisiert hält. (Der erste, den Sie sehen, ist jedoch wahrscheinlich der linksbündige Text in der Mitte des Bildschirms. Diese Verwendung eines Rasters erzeugt ein angeborenes Gleichgewicht zwischen den Elementen.Beachten Sie, wie die Linkseiten-Navigation und die Seitenverknüpfungen in die Zeile fallen, sowie der Platz, der vom Haupttext und den Navigationselementen eingenommen wird.

Gewicht erstellen

Asymmetrie wurzelt in der Vorstellung, dass etwas so "schwer" ist. dass Sie zuerst davon angezogen werden. Bestimmen Sie, welcher Teil Ihres Bildes dieses visuelle Gewicht hat. Es kann sich um ein Bild oder eine Typografie oder sogar um ein Leerzeichen handeln.

Balance zwischen dem schweren Element und dem Kontrast - ein leichteres Element, das die Aufmerksamkeit der Benutzer auf andere Weise auf sich zieht. Das Gewicht funktioniert am besten, wenn es mit den anderen oben genannten Techniken kombiniert wird, so dass der gewichtete Artikel das Design nicht überfordert und Sie durch es trägt.

Beispiel: Cranes of Cambridge verwendet ein ansprechendes Foto als "Gewicht". des Designs. Es wird durch zwei Elemente ausgeglichen - eine, die Sie vielleicht gar nicht erst bemerken. Der hellere Text und das Logo sind deutlich "leichter". als die Menschen im Bild, so dass Sie von den Menschen zum Text schauen (auch im Anschluss an die implizierte Bewegung ihrer Augen). Es wird auch durch eine think-säulenartige Navigation ausgeglichen, die Sie über den Bildschirm zieht.

Fazit

Asymmetrie kann eine schöne und harmonische Designtechnik sein. Während sich die Designtrends in letzter Zeit auf eine große Symmetrie konzentriert haben, wird es wahrscheinlich zu einer Verschiebung hin zu einigen dieser "Unausgewogenheiten" kommen. ausgewogenes Design. Es ist optisch faszinierend und hilft, Benutzer mit subtiler Optik durch ein Design zu leiten.

Asymmetrie hat auch Auswirkungen und funktioniert besonders gut als Konzept, das symmetrisch im Rahmen eines kompletten Projekts verwendet wird. Experimentieren Sie mit Asymmetrie und verlieben Sie sich in diese dynamische Designtechnik.