Heute werden wir eines der grundlegendsten Prinzipien im Design untersuchen: Ausrichtung. Dieses täuschend einfache Thema ist eigentlich ziemlich komplex und gehört zu den am meisten fehlenden Fähigkeiten von Designern.
Ein starkes Verständnis dafür, wie und wann bestimmte Ausrichtungen verwendet werden, macht Sie sofort zu einem besseren Designer und bleibt ein grundlegender Baustein für alles, was Sie für den Rest Ihrer Karriere schaffen.
Einführung in die Ausrichtung
Für viele hört sich eine Diskussion über die Ausrichtung an wie eine willkürliche Übung. Eine solche grundlegende Designtheorie ist sicherlich nur für Personen gedacht, die noch nie in ihrem Leben etwas entwickelt haben, nicht für die professionelle Gemeinschaft, die Websites wie diese besucht. Recht?
Ich selbst möchte das Argument, dass diese Diskussion für Anfänger ist, unterstützen, indem ich feststelle, dass ein solides Verständnis der visuellen Ausrichtung eine unschlagbare Grundlage für alle Arten von Design ist. Es ist die Art von Wissen, das Sie, sobald Sie es verstanden haben, auf jedes einzelne Layout anwenden können, das Sie als Designer erstellen.
Trotz der Idee, dass diese Konzepte im Zentrum unseres Handelns stehen, scheint die Ausrichtung eine der Hauptquellen für das meiste schlechte Design zu sein, das ich heute im Web sehe.
Selbst ausgebildete Designer verfügen oft über ein intuitives Verständnis für die Verwendung von Ausrichtungen. Dies kann jedoch auch ohne explizites Wissen zur Unterstützung fehlschlagen.
Dinge aufreißen
Die Grundidee von Alignment ist der betäubend einfache Geist: die Dinge in einer Reihe aufzustellen. Außerhalb des organischen Designs, das ein völlig anderes Thema ist, sollte jedes Element, das Sie auf einer Seite platzieren, von einem logischen Denkprozess hinsichtlich seiner Positionierung begleitet werden.
Wieder ist das grundlegendes Zeug, oder? Jeder macht das schon? Recht? Falsch. Betrachten Sie die folgende Website, die kürzlich an unsere CSS-Galerie übermittelt wurde. Ich benutze dies nicht als gemeines Beispiel, sondern als Lehrinstrument. Der Designer ist ein toller Typ, der gerade erst anfängt. Er verbessert täglich seine Fähigkeiten und ist wissbegierig.
Dieses Beispiel ist äußerst typisch und genau das, was wir täglich in unseren Galerie-Einsendungen sehen. Der ästhetische Wert ist hier nicht schlecht. Die hellen Farben und interessanten Texturen erregen Ihre Aufmerksamkeit. Allerdings hat das Alignment hier das Ziel verfehlt.
Die Probleme hier können für viele Menschen schwer zu erkennen sein. Aus diesem Grund empfehle ich immer, ein Design zu vereinfachen, um die Grundformen zu untersuchen. In einigen Artikeln, die ich über Design schreibe, werde ich dies tun, und Sie sollten es auf jeden Fall bei einigen Ihrer eigenen Designs ausprobieren.
Da wir nun die grafischen Objekte in einem vereinfachten Zustand sehen, können wir das von ihnen belegte Raumvolumen besser analysieren und alle Ausrichtungsprobleme angehen.
Beachten Sie, dass die Elemente auf der Seite plötzlich zerstreut erscheinen. Der Hauptinhaltsbereich unten stimmt nicht mit dem hängenden Banner oben links oder den verstreuten Elementen oben rechts überein. Darüber hinaus scheint das Facebook-Logo klein und abgesondert zu sein, und die Überschrift ist vom Rand der Navigation, der vom Inhaltsrand versetzt ist, versetzt.
Obwohl sich dieses Design ziemlich anständig anfühlte, als wir es gerade fühlten, sehen wir jetzt, dass es eine Menge Umstrukturierungen erfordern könnte. Von hier aus gibt es zwei wichtige Dinge, die Sie ansprechen müssen: Ausrichtung und negativer Raum.
Diese Konzepte sind extrem eng miteinander verbunden. Die Arbeit mit dem negativen Raum hat viel damit zu tun, dass man sich auf die Lücken konzentriert und Basissymmetrie anwendet. Weitere Informationen zum korrekten Vorgehen in Bezug auf den negativen Bereich finden Sie unter Sechs Revisionen in meinem Leitfaden zum negativen Raum.
In diesem Artikel konzentrieren wir uns auf die Verwendung der grundlegenden Ausrichtungen, die Sie in komplexen Layouts kennen.
Zentrierausrichtung
Zentrierte Layouts sind die Wahlmethode für fast jede Person auf dem Planeten? ausgenommen Designer. Aus irgendeinem Grund scheint das Zentrieren von Elementen auf der Seite genau das zu sein, was Sie tun sollen. Die wichtigste Aufgabe eines Designers ist es, die Artikel einfach zu zentrieren!
Ich bin vor einigen Jahren auf dieses Problem gestoßen, als ich einen Entwurf, den ich erstellt hatte, einem Entwickler zum Code übergab. Als er mir die fertige Version zeigte, war alles von links nach mittig verschoben worden! Er erklärte einfach, dass er es immer vorgezogen habe, alles in der Mitte auszurichten, damit es schön aussieht.
Die Realität ist, dass die Zentrierung jedes Elements die schwächste Ausrichtung ist, die Sie treffen können.
Es gibt keine harten Kanten, denen Sie folgen müssen, so dass Ihre Augen viel mehr Arbeit leisten müssen, um sowohl das Gesamtlayout als auch den spezifischen Inhalt aufzunehmen.
Wann verwenden?
Dies bedeutet keineswegs, dass die Ausrichtung von Zentren immer vermieden werden sollte. Ich selbst habe sie auf Demos für diese Site verwendet. Der Schlüssel ist zu wissen, wann man sie benutzt.
Ich finde, dass das bestmögliche Szenario für eine zentrierte Ausrichtung ist, wenn auf einer Seite sehr wenig vorhanden ist. Je komplizierter das Layout ist, desto weniger Zentrierausrichtungen funktionieren. Wenn auf einer bestimmten Seite nicht viel los ist, können zentrierte Ausrichtungen eine starke Aussage treffen.
Linke Ausrichtung
Linke Ausrichtungen, auch wenn sie langweilig sind, sind absolut solide und sollten für einen Großteil Ihrer Arbeit die Standardeinstellung sein.
Wir sind es gewohnt, Inhalte linksorientiert zu sehen. Öffne ein Buch oder eine Zeitung und finde viele linke Ausrichtungen. Durchsuchen Sie die Anzeigen in Ihrer Junk-E-Mail, wieder viele linke Ausrichtungen. Sie werden auf Facebook, Google-Suchergebnissen, Twitter-Streams und jeder anderen großen Website angezeigt.
Linke Ausrichtungen regieren die Welt oder zumindest die Gesellschaften, die von links nach rechts lesen. Sie sollten sich nicht vollständig auf eine linke Ausrichtung für alles verlassen, sondern nur wissen, dass dies der sichere Weg ist.
Wann verwenden?
Kann in allen möglichen Situationen eingesetzt werden, insbesondere wenn viel Text vorhanden ist. Schauen Sie sich einfach die Seite an, die Sie gerade lesen.Wenn dies zentriert wäre, wäre das ein Albtraum.
Beachten Sie, dass, insbesondere im Web, das Ausrichten durch Links nicht bedeutet, dass Sie es nicht zentrieren können. Ein HTML-Div enthält zum Beispiel häufig eine Reihe von linksbündigen Absätzen und Bildern, wird jedoch mithilfe von CSS auf der Seite zentriert.
Richtige Ausrichtung
Rechte Ausrichtungen sind wahrscheinlich die seltensten. Da wir von links nach rechts lesen, fühlt es sich komisch an, dass sich etwas am rechten Rand festhält.
Es ist jedoch eine absolut starke Ausrichtung, die in Ihren Entwürfen gründlich verwendet werden kann, insbesondere im Druckbereich (sie ist im Online-Bereich noch viel unerwartet).
Wann verwenden?
Oft, wenn auch nicht immer, vermittelt eine richtige Ausrichtung ein Gefühl von Einzigartigkeit. Wenn Sie etwas entwerfen, das hervorstechen und sich anders anfühlen muss, ist eine richtige Ausrichtung ein guter Anfang.
Ausrichtung von Ausrichtungen im Web
Die Ausrichtung, die wir ausgelassen haben, ist offensichtlich gerechtfertigt. Dies kommt stark zum Tragen, wenn Sie eine ganze Site als konzeptionelles Element zusammenfügen.
Das Interessante an der Gestaltung für das Web ist, dass es oft eine Mischung von Ausrichtungen gibt. Sie haben wahrscheinlich gehört, dass Designer vorgeschlagen haben, niemals Alignments zu mischen, aber dieser Ratschlag funktioniert in der Realität einfach nicht.
Stattdessen müssen Sie Entscheidungen sowohl für die Elemente einer Seite als auch für die gesamten Seitenelemente treffen. Beachten Sie, wie ich mit dieser Diskussion begonnen habe, indem ich mir ein Beispiel für die Ansicht der Ausrichtung einer Site als Ganzes ansehe, aber dann die einzelnen Objektausrichtungen besprach.
Wenn Sie sich für eine Ausrichtung für den Text und die Bilder auf Ihrer Seite entschieden haben, müssen Sie beim Zusammenfügen häufig alles auf der Seite in eine ausgerichtete Ausrichtung bringen. Obwohl Sie eine unregelmäßige Kante haben können, kann die Rechtfertigung aller Elemente den letzten Aufräumeffekt hinzufügen, der im ursprünglichen Beispiel nicht vorhanden war.
Beachten Sie, dass oben auf der Website eine starke Ausrichtung nach links besteht, aber auf der rechten Seite wurde auch alles ausgerichtet, um ein zusammenhängendes, gerechtfertigtes Erscheinungsbild zu erzeugen. Die kleine Login-Schaltfläche befindet sich in einer Reihe mit den Browserbildern, die sich rechts neben dem Kalendersymbol befinden.
Dies ist ein sauberes, professionelles Design. Es ist vielleicht nicht für alle Projekte geeignet, aber ich sehe oft Designer, die versuchen, dies zu erreichen und zu scheitern, und ich wollte einige der möglichen Ursachen ansprechen.
Dies ist einer der Gründe, warum Rastersysteme so beliebt sind. Wenn Sie alles auf ein Raster werfen, stellen Sie sicher, dass Ihre Ausrichtungen stabil und leicht zu folgen sind.
Fazit
Zusammenfassend können Sie, wenn möglich, starke Ausrichtungen verwenden, die es Ihrem Auge erleichtern, den Informationsfluss zu verfolgen. Zentrierausrichtungen sind akzeptabel, werden jedoch schwieriger, wenn der Inhalt einer Seite zunimmt.
Beachten Sie, dass sich die Ausrichtung auf bestimmte Elemente auf einer Seite sowie auf die Anordnung der Objekte als Ganzes bezieht. Verbrachte Zeit mit jedem Design, um sicherzustellen, dass alle Elemente mit den Elementen auf der Seite übereinstimmen. Dies gilt vertikal und horizontal entlang aller Kanten des Designs.