Share
Webdesign ist im Wesentlichen nur eine Weiterentwicklung der Prinzipien und Theorien, die während der Entwicklung des Drucks erstellt wurden. Die Designbranche brachte viele Techniken in das Web, aber einige davon dauerten länger, um sie in einer virtuellen Umgebung zu meistern. Leider haben wir keine einzige Plattform, auf der unsere Inhalte erscheinen können. Wir müssen mit mehreren Browsern, Betriebssystemen und Bildschirmgrößen kämpfen.
So wie das Web sich entwickelt hat, so auch die Konstruktionsprinzipien, die wir beachten. Das netzbasierte Design hat in den letzten Jahren zugenommen, wobei Designer ihre Website nach einem Spaltenraster auslegen können. Rastersysteme waren eine sehr beliebte Methode, um Elemente zu ordnen und auszurichten und einer Seite eine allgemeine Reihenfolge hinzuzufügen, indem Proportionen und Balance angewendet werden.
Basierend auf unserem Wissen über die Verwendung von Verhältnis und Gleichgewicht können wir ein anderes Druckdesign-Prinzip verwenden: das Grundlinienraster.
Das Grundlinienraster ist eine Technik, mit der Sie Ihre webbasierte Typografie verbessern können. Im Wesentlichen richtet es Ihren gesamten Text an einem vertikalen Raster aus, in dem der untere Rand jedes Buchstabens auf dem Raster positioniert ist, genau wie beim Schreiben auf liniertes Papier. Das Endergebnis ist ein perfekt strukturierter Textkörper mit einer unbewussten Erkennung von Gleichgewicht und Übereinstimmung.
Wie ich schon sagte, ist Print ein statisches Medium. Wenn Sie ein Druckformat entwerfen, können Sie festlegen, was alle Ihre Zuschauer sehen sollen. Aufgrund der alternativen Plattformen kann Ihr Design jedoch im Web interpretiert werden. In Ihrem CSS werden die Zeilenhöhe und andere typografische Werte für die verschiedenen Benutzer zwangsläufig gerendert. Für viele Designer ist dies nur eine Vermutung und eine Vorhersage, was der Endbenutzer sehen wird.
Viele Druckdesigner verwenden Grundlinienraster in Verbindung mit ihrer Design-Suite, sei es InDesign oder andere. Bedruckte Raster wurden bis in die frühen 1200er zurückverfolgt und beschränken sich nicht nur auf das Webdesign. In der Tat wird alles von den Rastern bis zum Goldenen Schnitt (dh die meisten mathematikbasierten Theorien) in anderen Aspekten des Lebens geteilt, vor allem in der Architektur.
Das Raster ermöglicht es, alle Elemente des Designs - Zeichen, Fotografie, Zeichnung und Farbe - in eine formale Beziehung zueinander zu bringen. Das heißt, das Gittersystem ist ein Mittel, um Ordnung in ein Design zu bringen. Ein bewusst komponiertes Design wirkt klarer, übersichtlicher und erfolgreicher als eine zufällig zusammengestellte Werbung. - Josef Müller Brockmann
Lassen Sie uns nun einen Blick darauf werfen, wie wir unser Grundlinienraster erstellen.
Erstens müssen wir eine Linienhöhe für das Grundlinienraster definieren, die auf einem Verhältnis zu unserer Schriftgröße basiert. In diesem Beispiel ist 1: 1,5 ein guter Betrag, der uns einen großzügigen Vorsprung von 50% bietet. Wenn wir eine Textgröße von 12 Pixeln hätten, wäre die Zeilenhöhe (unter Verwendung dieses 1: 1,5-Verhältnisses) 18 Pix. 150% ist eine schöne Menge, die uns ein leicht lesbares Design bietet, aber dieser Wert kann anders sein. Sie sollten jedoch versuchen, in einem Bereich von 130% - 160% zu bleiben, wenn Sie die Höhe der Linie berücksichtigen.
Bevor wir fortfahren, sollten Sie genau wissen, wie die CSS-Eigenschaft für die Zeilenhöhe tatsächlich funktioniert. Die Zeilenhöhe ist die Gesamthöhe der gesamten Textzeile und nicht der Text selbst. Es funktioniert, indem Sie oben Auffüllen hinzufügen und unter dem Text, um es zu platzieren. Wenn wir tatsächlich Text nehmen und ihn auf einen bestimmten Hintergrund legen, wird der Text zwischen den Zeilen positioniert, nicht unbedingt darauf.
Nehmen wir zur Vereinfachung an, dass unser Text eine Grundgröße von 10 Pixeln hat. Wenn wir uns an unser ungefähres Verhältnis halten, bedeutet das, dass unsere Zeilenhöhe 15px beträgt, obwohl wir dies variieren könnten. (Um eine Randnotiz zu machen, 10px ist ziemlich klein und ich würde es in den meisten Fällen nicht unbedingt empfehlen, aber ich verwende es hier nur, um es in der Mathematikabteilung einfacher zu machen). Um verschiedene Elemente in unser Basislinienraster einpassen zu können, müssen wir sie in unserem CSS einrichten.
Bevor wir jedoch fortfahren, setzen diese Beispiele voraus, dass Sie eine Art CSS-Reset verwenden. Wenn dies nicht der Fall ist, können Standardränder die heutige Arbeit beeinträchtigen.
Wenn Sie die Zeilenhöhe einmal festgelegt haben, müssen Sie einen gleichmäßigen Rand unter jeder Überschrift und jedem Absatz einfügen. Da wir hier mit einem 15px-Raster arbeiten, beginnen wir mit dem Überschreiben des standardmäßigen unteren Randes eines Absatz-Tags (standardmäßig ist dies 1em, was in diesem Fall 10px ist), damit es unserer Linienhöhe innerhalb des entspricht Text. Dadurch wird unter jedem Absatz eine proportionale leere Zeile erstellt, die der Höhe entspricht, wenn sich dort Text befindet.
p Rand unten: 15px;
In ähnlicher Weise müssen wir bei Kopfzeilen lediglich die Inkremente von 15 Pixeln befolgen. Durch einfaches Markieren unseres Randes neben der Linienhöhe von 150% erstellen wir einen ähnlichen, konsistenten Bruch.
h1 font-size: 20px; Zeilenhöhe: 30px; Rand unten: 15px;
Bevor ich weiter gehe, möchte ich anmerken, dass Ihr Text möglicherweise nicht immer in der Zeile steht, wenn Sie einen Text auf Ihren Hintergrund angewendet haben. Keine Sorge, solange die Zeilenhöhe gleich bleibt. Wenn sich Ihr Text in der Mitte Ihrer Zeilen befindet, können Sie leicht mit Ihren Rändern herumspielen, dies ist jedoch nicht erforderlich.
Wie gehen wir mit Listen um? Erstens möchten wir unsere Standardmarge auf dieselbe Weise wie auf unsere Absätze anwenden. Dies gibt den Pausen ein gewisses Maß an Konsistenz mit dem Inhalt.
ul, ol margin-bottom: 15px;
Das fängt jetzt an, einfach zu werden! Wenn Sie noch eine Zeilenhöhe von 15 Pixel haben, die an anderer Stelle definiert ist, passen Ihre Listen gut zum restlichen Inhalt.
Bei Bildern wird es etwas schwieriger. Vorzugsweise möchten wir in unseren Rändern die gleiche Konsistenz haben, sodass das Bild genauso behandelt wird, als wäre es ein Textblock. Dies bedeutet jedoch, dass Ihre Bilder ein Vielfaches Ihres Zeilenhöhenwerts sein müssen, in diesem Fall 15.
In meinem Beispiel habe ich das Bild nach rechts verschoben, so dass ich einen 15px-Rand auf der linken Seite und am unteren Rand habe. Neben unserer bestehenden Marge unterhalb des Absatzes haben wir so eine konsistente Marge erhalten, die dem Rest unseres Basislinienrasters entspricht.
img.left float: left; Marge: 0 0 15px 15px;
Natürlich sind dies nicht die einzigen Elemente, die wir ändern müssen, um unserem neuen Grundlinienraster zu entsprechen. Der Schlüssel ist, dass Sie sicherstellen, dass Sie mit einem konsistenten Inkrement arbeiten, sodass alles auf dasselbe Raster beschränkt ist. Dies kann dazu führen, dass die Harmonie und das Gleichgewicht auf Ihrer gesamten Webseite sichtbar werden, wenn Sie mit großen Textkörpern verwendet werden.
Hier ist unser fertiges Beispiel, eine einfache Webseite mit Absätzen, Titeln, einem Bild und einer Liste. Wenn Sie Ihr Lineal herausholen möchten, können Sie, aber ich kann Ihnen versichern, dass alles dem konsistenten Raster folgt, das auf unserer Typografie basiert.
Wir haben gerade erst die Oberfläche der Grundlinienraster durchbrochen. Es kann sehr viel schwieriger werden, wenn Sie versuchen, sie auf komplexere Designs anzuwenden, was dazu führt, dass nur wenige im Web verwendet werden. Dies ist jedoch möglich und kann zu einem ausgewogenen, proportionalen Design führen, das zu einer besseren Benutzererfahrung beitragen kann.
Das Grundlinienraster ist eine großartige Möglichkeit, um Ihrer Typografie ein gewisses Maß an Balance und Proportionalität hinzuzufügen. Es ist eine dieser subtilen Implementierungen, die Ihren Designs ein natürliches Gefühl verleihen können. Im Fall des Grundlinienrasters stimmt unsere Typografie mit dem standardisierten Abstand überein, der ihm ein harmonisches Gefühl verleiht.
Leider müssen wir jedoch immer noch die Bedrohung durch Browser-Inkompatibilitäten abwehren, die dazu führen können, dass das CSS-Rendering für verschiedene Benutzer unterschiedlich ist, wenn andere Browser, Betriebssysteme oder Geräte verwendet werden. Dies ist eine Aufgabe, die nicht so aussieht, als sei sie auf dem Weg, obwohl das Hinzufügen eines Grundlinienrasters andere Vorteile bietet. Diese Art von Rastersystem kann beispielsweise beim Skalieren enorm hilfreich sein und einen Browser zwingen, CSS erneut zu rendern. Grundlinienraster bieten dem Browser ein wenig mehr Flexibilität und Ermutigung, die Dinge richtig auszuführen.
Dies ist ein kürzerer Artikel als üblich, aber das liegt daran, dass Grundlinienraster nicht wirklich viel zu erklären haben und wie man sie verwendet. Die wahre Magie kommt, wenn der Designer zwickt und testet, um sicherzustellen, dass sein Grundlinienraster funktioniert, und vor allem das Design optisch ansprechend (etwas mehr) macht. Lesen Sie den Artikel von A List Apart zu diesem Thema. Bis zum nächsten Mal fröhlich gestalten!
Accentsconagua