Horizontale Harmonie. Es ist eines dieser Dinge, die Sie erst zu bemerken scheinen, wenn es fehlt. Horizontale Harmonie ist die Beziehung zwischen Elementen eines Designs. Es ist mehr als nur Linien und Regeln. Es ist auch ein unsichtbares Raster, das den Designelementen ein Gefühl von Platz gibt.
Wie kann man horizontale Harmonie schaffen? Während einige Techniken einfacher sind als andere, ist dies kein überwältigendes Konzept. Es bedarf nur einer kleinen Planung. Durch das Nachdenken über Dinge wie ein Grundlinienraster, den Abstand zwischen den Textzeilen, die Positionierung der Elemente und die gesamte ästhetische, horizontale Harmonie ist nur ein Teil des Designprozesses.
Grundlinienraster
Baseline Grids, ein beliebtes Designwerkzeug in gedruckten Projekten, werden im Webdesign seltener angesprochen. Der Grund ist einfach: Viele Webprojekte (und digitale Projekte) enthalten eine einzige Textspalte.
Das Grundlinienraster ist eine imaginäre Linie, auf der der Typ sitzt. Jeder Buchstabe im Text verbleibt in diesem Raster, sodass mehrere Spalten des Typs in einer Reihe angeordnet sind. (Dies verhindert, dass Spalten einen gezackten Look haben.)
Grundlinienraster können für fast alle typografischen Zwecke verwendet werden, und die meisten Konstruktionssoftware enthält Werkzeuge zum Erstellen von Grundlinienraster-Spezifikationen. Das wird online etwas kniffliger, aber es gibt auch CSS-Baselines, darunter ein schönes Beispiel aus dem Smashing Magazine.
Das Grundlinienraster funktioniert nur, wenn es auf jede Spalte im Layout angewendet wird, wobei der Typ an derselben Stelle beginnt und endet (normalerweise am oberen und unteren Rand einer Seite). Darüber hinaus wird das Grundlinienraster normalerweise in einem digitalen Projekt auf die gesamte Seite und in Druckprojekten auf die Verteilung (oder gegenüberliegende Seiten) angewendet.
Grundlinienraster unterscheiden sich in erster Linie von Linienhöhen oder führenden Spezifikationen, da ein Grundlinienraster die Position der Buchstaben bestimmt. Das Raster kann Linien dazu zwingen, näher aneinander zu liegen oder weiter entfernt zu sein. (In Adobe InDesign beispielsweise überschreibt ein Grundlinienraster die führende Zeile und zwingt Text dazu, im entsprechenden Raster zu wohnen.)
Das Schöne an einem Grundlinienraster ist die Sauberkeit des Textes. Wenn sich alles auf eine organisierte Weise ausrichtet, ist das Ergebnis eine leicht lesbare und lesbare Beschriftung. Es gibt keine erschütternden Gefühle. Es gibt einen Grund dafür, dass Bücher, Zeitungen und Zeitschriften (die auf mehreren Textspalten auf einer Seite basieren) dies seit Jahren tun.
Hinweis: Legen Sie ein Grundlinienraster fest
- InDesign: Wählen Sie im Menü Bearbeiten die Option Einstellungen und dann Raster. Sie können eine Farbe für das Grundlinienraster festlegen, bei der das Raster (oberer Seitenrand oder oberer Rand) beginnt und inkrementiert wird (Rasterhöhe). Die Hilfslinien fangen wird auf das Grundlinienraster angewendet.
Führend
Leading, der Abstand zwischen den Zeilen des Typs, ist ein weiteres wichtiges Werkzeug beim Erstellen von Harmonie auf der Seite oder auf dem Bildschirm. Der Text sollte konsistent führen.
Stellen Sie sich das so vor: Wenn Absatz 1 14 Punkttypen mit 16 Punkten Vorsprung und Absatz 2 14 Punkttypen mit 12 Punkten Vorsprung sind, wird dies den Lesern Sorgen bereiten. Diese Änderung ist schwierig für das Auge und kann das Lesen zu einer Herausforderung machen. Dies gilt auch für eine einzelne Textspalte.
Insbesondere in gedruckten Projekten ist die Kombination aus konsequenter Führung und einem komplementären Grundlinienraster ideal. Durch diese Paarung wird sichergestellt, dass der Typ von Spalte zu Spalte ausgerichtet wird und von oben nach unten ein gleichmäßiges Gefühl hat.
Halten Sie den Abstand konstant
Der Abstand zwischen den Elementen ist genauso wichtig. Gibt es eine Zeile zwischen den Absätzen? Was ist zwischen Kopf- und Haupttext? Oder ein Foto und den Text dazu?
Bestimmen Sie Abstandsregeln, die mit Ihrem Grundlinienraster und führenden Spezifikationen funktionieren, um sicherzustellen, dass die Räume um die Elemente konsistent sind. Es ist am einfachsten, Konsistenz mit diesen Bereichen zu erstellen und aufrechtzuerhalten, wenn auch diese mit Ihren Typspezifikationen arbeiten sollen.
Gehen Sie noch einen Schritt weiter und berücksichtigen Sie den vertikalen Abstand sowie Rinnenbreite, Textumbrüche und -ränder. Auch diese Abstände sollten Teil Ihres konsistenten Abstandsschemas sein.
Line it up
Text ist 14 Punkte? Erstellen Sie passende Elemente.
Nachdem Sie sich mit dem Text in einem Projekt vertraut gemacht haben, werden andere Elemente verwendet. Diese Elemente sollten sich auch in Ihrem unsichtbaren Raster befinden. Text, Fotos, Linien, Schaltflächen und jedes andere Gestaltungselement sollten zusammenarbeiten, wenn Sie sie auf der Seite oder auf dem Bildschirm betrachten.
Dies kann etwas Planung erfordern. Wenn es um Bilder geht, skizzieren Sie die Platzierungen und wie diese auf dem horizontalen Raster liegen. Die Unterseite des Bilderrahmens sollte auf dem Grundlinienraster mit Text aufliegen und in einer Linie mit den oberen Buchstaben der Großbuchstaben stehen, um eine perfekte Harmonie zu erreichen.
Denken Sie auf die gleiche Weise über kleine Teile nach, z. B. Schaltflächen oder Navigationselemente. Berücksichtigen Sie bei kleinen Teilen die vertikalen Höhen dieser Elemente, um sie an die führende oder ein Vielfaches von Text anzupassen. (Denken Sie daran, den zusätzlichen Abstand zwischen den Zeilen zu berücksichtigen.)
Denken Sie in Blöcken
Wenn sich bei diesem Grundlinienraster und der Führung der Kopf dreht, ist es möglicherweise einfacher, über ein Raster in Blöcken nachzudenken. Das grafische Papier der alten Schule, das Sie in der Grundschule verwendet haben, kann das perfekte Zeichen für diese Anwendung sein. (Die Adobe-Softwaresuite verfügt auch über einen Rastermodus, den Sie beim digitalen Skizzieren auf den Hintergrund anwenden können.) Planen Sie Ihr Konstruktionsprojekt so, dass jedes Teil in eine bestimmte Anzahl von Blöcken passt.
Beispielsweise ist Text zwei Blöcke hoch. Andere Elemente entsprechen einem Vielfachen von Text, sodass die Bilder acht Blöcke hoch und die Schaltflächen vier Blöcke hoch sind. Der Abstand zwischen den Elementen beträgt ebenfalls zwei Blöcke, vertikal und horizontal. (Verstehe?)
Hinweis: Legen Sie ein Dokumentraster fest
- InDesign: Wählen Sie in den InDesign-Menüs Bearbeiten (in Windows) Voreinstellungen und dann Raster. Sie können eine Farbe für das Raster festlegen, den horizontalen und vertikalen Abstand sowie die Unterteilung festlegen. Das Raster kann so eingestellt werden, dass es hinter oder vor Objekten im Layout angezeigt wird.
- Photoshop: Wählen Sie im Photoshop-Menü Bearbeiten (in Windows) Voreinstellungen, dann Hilfslinien, Raster & Slices. Legen Sie die Spezifikation für jede Rasterlinie fest, einschließlich Farbe, Abstand und Unterteilungen.
Horizontales Denken für vertikale Projekte
Horizontale Harmonie ist nicht nur ein Grund zum Nachdenken, wenn Sie an Projekten arbeiten, die sich über einen langen Raum erstrecken, sondern auch bei vertikal ausgerichteten Projekten.
Beachten Sie, wie wichtig horizontale Harmonie für eine Website mit Parallax-Scrolling-Funktionen ist. Jeder? Bildschirm? muss in horizontaler Harmonie arbeiten, während Sie sich auf und ab bewegen. Eine mobile Website, die häufig in vertikaler Ausrichtung betrachtet wird, muss sich auf eine sinnvolle Weise bewegen.
Gleiches gilt auch für kleinere Druckprojekte. Schauen Sie sich ein Etikett auf einem Getränkebehälter an. Der Text befindet sich wahrscheinlich in einem Raster, das den Container umgibt.
Fazit
Horizontale Harmonie ist überall. Der Schlüssel dazu ist, dass Sie es nicht wirklich sehen. Projekte werden sich einfach richtig anfühlen, wenn sie da sind, und ein bisschen abgenommen, wenn es nicht so ist.
Als Designer ist es wichtig, während des gesamten Designprozesses über Raster und Ausrichtung nachzudenken. Das Endergebnis eines Designs besteht darin, etwas Lesbares, Nutzbares und Effizientes zu schaffen. Horizontale Harmonie kann Ihnen dabei helfen.