Design101: Verwenden starker Ausrichtungen
Heute werden wir eines der grundlegendsten Prinzipien im Design untersuchen: Ausrichtung. Dieses täuschend einfache Thema ist eigentlich recht komplex und gehört heute zu den am meisten fehlenden Kenntnissen bei Designern.
Wenn Sie genau wissen, wie und wann Sie bestimmte Ausrichtungen verwenden müssen, werden Sie sofort zu einem besseren Designer und bleiben ein grundlegender Baustein für alles, was Sie im weiteren Verlauf Ihrer Karriere erstellen.
Entdecken Sie Envato-Elemente
Einführung in die Ausrichtung
Für viele mag eine Diskussion über die Ausrichtung wie eine willkürliche Übung klingen. Eine solche grundlegende Designtheorie ist sicherlich nur für Personen gedacht, die noch nie in ihrem Leben etwas entworfen haben, nicht für die Fachwelt, die Websites wie diese besucht. Richtig?
Ich selbst würde das Argument, dass eine solche Diskussion für Anfänger gedacht ist, durch die Feststellung fördern, dass ein solides Verständnis der visuellen Ausrichtung eine unschlagbare Grundlage für alle Arten von Design darstellt. Es ist die Art von Wissen, die Sie, sobald Sie es verstanden haben, für jedes einzelne Layout verwenden, das Sie als Designer erstellen.
Trotz der Idee, dass diese Konzepte den Kern unserer Arbeit als Designer bilden, scheint die Ausrichtung eine Hauptursache für die meisten schlechten Designs zu sein, die ich heute im Web sehe.
Selbst ausgebildete Designer haben oft ein intuitives Verständnis für die Verwendung von Alignments. Dies kann und kann jedoch ohne explizites Wissen zum Sichern fehlschlagen.
Dinge aneinanderreihen
Die wesentliche Idee der Ausrichtung ist betäubend einfach: Dinge auszurichten. Außerhalb des organischen Designs, das ein völlig anderes Thema ist, sollte jedes Element, das Sie auf eine Seite setzen, von einem logischen Denkprozess hinsichtlich seiner Positionierung begleitet werden.
Auch dies ist grundlegendes Zeug, oder? Jeder macht das schon ... richtig? Falsch. Betrachten Sie die folgende Site, die kürzlich in unserer CSS-Galerie eingereicht wurde. Ich benutze dies nicht als gemeines Beispiel, sondern als Lehrinstrument. Der Designer ist ein großartiger Typ, der gerade erst anfängt. Er verbessert seine Fähigkeiten täglich und ist lernbegierig.
Dieses Beispiel ist äußerst typisch und genau das, was wir jeden Tag in unseren Galerieeinreichungen sehen. Der ästhetische Wert hier ist nicht schlecht. Die leuchtenden Farben und interessanten Texturen ziehen Ihre Aufmerksamkeit ziemlich gut auf sich. Die Ausrichtung hier hat jedoch die Marke wirklich 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. Sie werden sehen, wie ich das in einigen Artikeln mache, die ich über Design schreibe, und Sie sollten es auf jeden Fall an einigen Ihrer eigenen Designs ausprobieren.
Nachdem wir die grafischen Objekte in einem vereinfachten Zustand sehen, können wir das Raumvolumen, das sie einnehmen, besser analysieren und Ausrichtungsprobleme beheben.
Beachten Sie, dass die Elemente auf der Seite plötzlich verstreut erscheinen. Der Hauptinhaltsbereich unten ist weder mit dem hängenden Banner oben links noch mit den verstreuten Elementen oben rechts ausgerichtet. Außerdem wirkt das Facebook-Logo klein und von selbst gestrandet, und die Überschrift ist vom Rand der Navigation versetzt, der vom Rand des Inhalts versetzt ist.
Obwohl sich dieses Design ziemlich anständig anfühlte, als wir es gerade ausprobierten, sehen wir jetzt, dass es viel Umstrukturierung gebrauchen könnte. Von hier aus müssen Sie zwei wichtige Dinge ansprechen: Ausrichtung und negativer Raum.
Diese Konzepte sind äußerst eng miteinander verbunden. Das Arbeiten mit dem negativen Raum hat viel damit zu tun, sich auf die Lücken zu konzentrieren und grundlegende Symmetrie anzuwenden. Weitere Informationen zur richtigen Vorgehensweise in Bezug auf den negativen Raum finden Sie in meinem Leitfaden zum negativen Raum unter Sechs Revisionen.
In diesem Artikel konzentrieren wir uns mehr auf die Verwendung der grundlegenden Ausrichtungen, mit denen Sie in komplexen Layouts vertraut sind.
Mittelausrichtung
Zentrierte Layouts sind die Wahlmethode für nahezu jeden Menschen auf dem Planeten… außer für Designer. Aus irgendeinem Grund scheint das Zentrieren von Elementen auf der Seite genau das zu sein, was Sie tun sollen. Sicherlich besteht die Hauptaufgabe eines Designers darin, Gegenstände einfach zu zentrieren!
Ich bin vor einigen Jahren auf dieses Problem gestoßen, als ich ein Design, das ich erstellt hatte, an einen Entwickler zum Codieren weitergab. Als er mir die fertige Version zeigte, war alles von links nach mittig ausgerichtet verschoben worden! Er erklärte einfach, dass er es immer vorgezogen habe, alles mittig auszurichten, "damit es gut aussieht".
Die Realität ist, dass das Zentrieren jedes Elements die schwächste Ausrichtungswahl ist, die Sie treffen können.
Es gibt keine harten Kanten, denen Sie folgen müssen, sodass Ihre Augen viel mehr Arbeit leisten müssen, um sowohl das Gesamtlayout zu erfassen als auch den spezifischen Inhalt aufzunehmen.
Wann zu verwenden
Dies bedeutet keineswegs, dass Mittelausrichtungen immer vermieden werden sollten. Ich selbst habe sie in Demos für genau diese Site verwendet. Der Schlüssel ist zu wissen, wann man sie benutzt.
Ich finde, dass das bestmögliche Szenario für eine Ausrichtung in der Mitte darin besteht, dass auf einer Seite nur sehr wenig vorhanden ist. Je komplizierter das Layout ist, desto weniger Ausrichtungen in der Mitte funktionieren. Wenn auf einer bestimmten Seite nicht viel los ist, können Ausrichtungen in der Mitte eine aussagekräftige Aussage treffen.
Linke Ausrichtung
Linke Ausrichtungen sind zwar langweilig, aber absolut solide und sollten für einen Großteil Ihrer Arbeit Ihre Standardausrichtung sein.
Wir sind es gewohnt, Inhalte linksbündig zu sehen. Öffnen Sie ein Buch oder eine Zeitung und Sie werden viele linke Ausrichtungen finden. Durchsuchen Sie die Anzeigen in Ihrer Junk-Mail erneut nach vielen Linksausrichtungen. Sie sehen sie auf Facebook, Google-Suchergebnissen, Twitter-Streams und jeder anderen wichtigen Website.
Linke Ausrichtungen regieren die Welt oder zumindest jene Gesellschaften, die von links nach rechts lesen. Sie sollten sich nicht für alles vollständig auf eine Linksausrichtung verlassen, sondern nur wissen, dass dies der sichere Weg ist.
Wann zu verwenden
Verwendung in allen möglichen Situationen, insbesondere wenn viel Text vorhanden ist. Schauen Sie sich einfach die Seite an, die Sie gerade lesen. Wenn dies zentriert wäre, wäre es ein Albtraum.
Beachten Sie, dass insbesondere im Web das Linksausrichten nicht bedeutet, dass Sie es nicht zentrieren können. Beispielsweise enthält ein HTML-Div häufig eine Reihe von linksbündigen Absätzen und Bildern, wird dann 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 einfach seltsam an, wenn sich etwas am rechten Rand festhält.
Es handelt sich jedoch um eine perfekt starke Ausrichtung, die in Ihren Designs, insbesondere im Druck, gründlich verwendet werden kann (online ist sie in der Regel noch unerwarteter).
Wann zu verwenden
Oft, wenn auch nicht immer, vermittelt eine richtige Ausrichtung ein Gefühl der Einzigartigkeit. Wenn Sie etwas entwerfen, das auffallen und sich anders anfühlen muss, ist eine richtige Ausrichtung ein guter Ausgangspunkt.
Ausrichten von Ausrichtungen im Web
Die Ausrichtung, die wir ausgelassen haben, ist offensichtlich gerechtfertigt. Dies kommt stark ins Spiel, wenn Sie eine ganze Site als konzeptionelles Element zusammenbinden.
Das Interessante am Entwerfen für das Web ist, dass es häufig eine Mischung aus Ausrichtungen beinhaltet. Sie haben wahrscheinlich gehört, dass Designer vorschlagen, niemals Alignments zu mischen, aber dieser Rat funktioniert in der realen Welt einfach nicht.
Stattdessen müssen Sie Entscheidungen sowohl für die Elemente innerhalb einer Seite als auch für die Seitenelemente als Ganzes treffen. Beachten Sie, wie ich diese Diskussion begonnen habe, indem ich mir ein Beispiel für die Anzeige der Ausrichtung einer Site als Ganzes angesehen habe, dann aber mit der Erörterung der Ausrichtung einzelner Elemente fortgefahren bin.
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 gerechtfertigte Ausrichtung bringen. Obwohl Sie eine zerlumpte Kante haben können, kann die Rechtfertigung von allem den letzten sauberen Touch hinzufügen, der im ursprünglichen Beispiel fehlte.
Beachten Sie, dass an der obigen Stelle eine starke Ausrichtung nach links vorhanden ist, aber auch alles auf der rechten Seite ausgerichtet wurde, um ein zusammenhängendes, gerechtfertigtes Erscheinungsbild zu erzielen. Die winzige Anmeldeschaltfläche richtet sich nach den Browserbildern, die sich auf der rechten Seite des Kalendersymbols befinden.
Dies ist sauberes, professionelles Design. Es ist möglicherweise nicht für alle Projekte geeignet, aber ich sehe oft Designer, die versuchen, es zu erreichen, und scheitern, und ich wollte einige der wahrscheinlichen Ursachen ansprechen.
Dies ist einer der Gründe, warum Netzsysteme so beliebt sind. Wenn Sie alles auf ein Raster werfen, wird sichergestellt, dass Ihre Ausrichtungen stabil und leicht zu verfolgen sind.
Fazit
Um es zusammenzufassen, verwenden Sie nach Möglichkeit starke Ausrichtungen, die es Ihrem Auge erleichtern, dem Informationsfluss zu folgen. Center-Alignments sind akzeptabel, werden jedoch mit zunehmendem Inhalt einer Seite schwieriger zu implementieren.
Denken Sie daran, dass sich die Ausrichtung auf bestimmte Elemente auf einer Seite sowie auf die Anordnung der Objekte als Ganzes bezieht. Verbringen Sie Zeit mit jedem Design, um sicherzustellen, dass alle Ihre Elemente richtig mit allem auf der Seite übereinstimmen. Dies gilt vertikal und horizontal entlang aller Kanten des Designs.
