Das Baseline Grid oder auch Grundlinienraster kennen viele Designer vom Hören, verwenden es aber selten bei der Gestaltung von Webseiten.
Ich kannte es noch aus dem Print-Bereich, bei dem ich zu meiner Schulzeit häufig mit Grundlinienrastern in InDesign zu tun hatte.
Aber gerade für uns Web Designer und bei der Gestaltung von digitalen Layouts, ist es ebenso hilfreich.
Lass uns am besten kurz die Grundlagen und Vorteile durchgehen.
Das Baseline Grid oder auch Grundlinienraster kennen viele Designer vom Hören, verwenden es aber selten bei der Gestaltung von Webseiten.
Ich kannte es noch aus dem Print-Bereich, bei dem ich zu meiner Schulzeit häufig mit Grundlinienrastern in InDesign zu tun hatte.
Aber gerade für uns Web Designer und bei der Gestaltung von digitalen Layouts, ist es ebenso hilfreich.
Lass uns am besten kurz die Grundlagen und Vorteile durchgehen.
Was ist ein Baseline Grid überhaupt?
Grundlinienraster = baseline Grid
Das Baseline-Grid hilft dir, die vertikalen Abstände in deinem Layout konsistent einzuhalten. Dadurch fällt es dir leichter, Elemente und vor allem Typografie gleichmäßig zu platzieren.
Warum sollte ich ein Baseline Grid verwenden?
Bring Harmonie in dein Layout!
Wenn wir ehrlich sind, arbeiten Designer häufig mit „in etwa gleich” Abständen. Das Augenmaß ist auch wichtig und definitiv sinnvoll einzusetzen. Trotzdem musst du früher oder später eine Regel für Abstände definieren, um damit auch den Programmierern entgegenzuarbeiten. Warum also nicht von Anfang an das Dokument richtig aufbereiten?
Viele korrigieren die pixelgenauen Abstände erst, wenn das Layout kurz vor der Umsetzung steht oder in einem Styleguide zusammengefasst werden muss. Und erst dabei merkt man, wie unterschiedlich eigentlich viele Abstände im Layout sind.
Um dir Zeit zu sparen und die vertikalen Abstände in Einklang mit der Größe von Elementen zu bringen, empfehle ich dir, ein Grundlinienraster einzusetzen.
Vorteile eines Grundlinienrasters:
- Es ist ein schneller Weg, um konsistent Elemente im Layout zu platzieren.
- Mit einem Baseline Grid musst du die vertikalen Abstände nicht mehr länger schätzen.
- Du kannst schneller entscheiden, welche Größen und Zeilenabstände für Schriften eingegeben werden müssen.
- Wenn wir im Team zusammenarbeiten, weiß jeder sofort, woran er sich orientieren kann.
- Entwickler können damit einfacher Abstände und Definitionen herauslesen.
Mit einem Grundlinienraster zu arbeiten, ist ein kleiner, aber feiner Unterschied.
Mit welchem Programm kann ich ein Baseline Grid anlegen?
Ich arbeite mit Sketch und nutze die darin enthaltenen Grid-Einstellungen. Super einfach und schnell angelegt!
View → Canvas → Layout Settings
Am besten markierst du davor ein Artboard, da sonst die Einstellungen generell für das Dokument festgelegt werden.
Im Video zeige ich dir genauer, welche Einstellungen du vornehmen kannst.
Wie lege ich das Baseline Grid an?
Am besten legst du direkt beim Start deines Layouts fest, mit welchen Abständen du arbeiten möchtest.
So musst du im Nachhinein nicht alle Zeilenabstände und Linienhöhen in deinen Text-Styles neu eingeben.
Ich verwende in meinen Dokumenten meistens ein Baseline Grid mit 6px oder 12px Abständen.
Als Beispiel:
Gutter Height = 6px
Row Height = 1px
Der eingegebene Zeilenabstand von Texten muss ab jetzt immer durch 6 teilbar sein. Beispiel: 18, 24, 30…
Genauso sollten vertikale Abstände von Elementen immer durch 6 teilbar sein. Beispiel: 36px oder 60px. Aber alle Elemente kannst du auch einfach an den Hilfslinien anordnen.
Pro Tipp:
Navigiere in Sketch zu den Einstellungen und gib unter dem Punkt „Canvas” bei „Move Objects” dein Baseline-Größe ein. Jetzt kannst du Elemente im Layout mit gedrückter cmd Taste immer um diesen Wert bewegen und somit leichter auf dein Baseline Grid abgestimmt positionieren.
Was ist der Unterschied zum Column Grid (Spaltenraster)?
Column Grid = horizontale Abstände
Baseline Grid = vertikale Abstände
Das Column Grid (Spalten-Grid) kennt fast jeder und wir verwenden es auch häufig bei der Gestaltung von Layouts.
Durch die Verwendung eines Column Grids tanzen Elemente nicht aus der Reihe und du kannst Informationen auf der Seite einfacher separieren.
Am besten verwendest du beide.
Vorteile für die Programmierung
Auch für Entwickler ist die Verwendung und Vorlage eines Grids in deinem Layout Dokument hilfreich. Auch sie können bei der Programmierung ein Grid definieren und sich dabei an deinen Einstellungen orientieren.
Mit einem Baseline Grid kannst du ihnen zusätzlich eine Vorlage für vertikale Abstände geben.
Und ich sag immer: Falls du irgendwo im Layout mal falsche Abstände siehst, kannst du dich am Baseline Grid orientieren. Ist also irgendwo der Abstand 25px, weiß er sofort, dass eigentlich 24px gemeint sein muss (bei dem Beispiel von oben → Abstand muss durch 6 teilbar sein).
Dieser Beitrag enthält eine Podcastfolge!
Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.
Dieser Beitrag enthält ein Video!
Das Video wird dir auf Patreon freigeschalten.
Erhalte Zugang zu diesem und weiteren exklusiven Beiträgen
Unterstütze diesen Podcast über Patreon und lerne wöchentlich mehr über Webdesign, das Arbeiten als Design Freelancer und die Zusammenarbeit mit Kunden.
Was ist ein Baseline Grid überhaupt?
Grundlinienraster = baseline Grid
Das Baseline-Grid hilft dir, die vertikalen Abstände in deinem Layout konsistent einzuhalten. Dadurch fällt es dir leichter, Elemente und vor allem Typografie gleichmäßig zu platzieren.
Warum sollte ich ein Baseline Grid verwenden?
Bring Harmonie in dein Layout!
Wenn wir ehrlich sind, arbeiten Designer häufig mit „in etwa gleich” Abständen. Das Augenmaß ist auch wichtig und definitiv sinnvoll einzusetzen. Trotzdem musst du früher oder später eine Regel für Abstände definieren, um damit auch den Programmierern entgegenzuarbeiten. Warum also nicht von Anfang an das Dokument richtig aufbereiten?
Viele korrigieren die pixelgenauen Abstände erst, wenn das Layout kurz vor der Umsetzung steht oder in einem Styleguide zusammengefasst werden muss. Und erst dabei merkt man, wie unterschiedlich eigentlich viele Abstände im Layout sind.
Um dir Zeit zu sparen und die vertikalen Abstände in Einklang mit der Größe von Elementen zu bringen, empfehle ich dir, ein Grundlinienraster einzusetzen.
Vorteile eines Grundlinienrasters:
- Es ist ein schneller Weg, um konsistent Elemente im Layout zu platzieren.
- Mit einem Baseline Grid musst du die vertikalen Abstände nicht mehr länger schätzen.
- Du kannst schneller entscheiden, welche Größen und Zeilenabstände für Schriften eingegeben werden müssen.
- Wenn wir im Team zusammenarbeiten, weiß jeder sofort, woran er sich orientieren kann.
- Entwickler können damit einfacher Abstände und Definitionen herauslesen.
Mit einem Grundlinienraster zu arbeiten, ist ein kleiner, aber feiner Unterschied.
Mit welchem Programm kann ich ein Baseline Grid anlegen?
Ich arbeite mit Sketch und nutze die darin enthaltenen Grid-Einstellungen. Super einfach und schnell angelegt!
View → Canvas → Layout Settings
Am besten markierst du davor ein Artboard, da sonst die Einstellungen generell für das Dokument festgelegt werden.
Im Video zeige ich dir genauer, welche Einstellungen du vornehmen kannst.
Wie lege ich das Baseline Grid an?
Am besten legst du direkt beim Start deines Layouts fest, mit welchen Abständen du arbeiten möchtest.
So musst du im Nachhinein nicht alle Zeilenabstände und Linienhöhen in deinen Text-Styles neu eingeben.
Ich verwende in meinen Dokumenten meistens ein Baseline Grid mit 6px oder 12px Abständen.
Als Beispiel:
Gutter Height = 6px
Row Height = 1px
Der eingegebene Zeilenabstand von Texten muss ab jetzt immer durch 6 teilbar sein. Beispiel: 18, 24, 30…
Genauso sollten vertikale Abstände von Elementen immer durch 6 teilbar sein. Beispiel: 36px oder 60px. Aber alle Elemente kannst du auch einfach an den Hilfslinien anordnen.
Pro Tipp:
Navigiere in Sketch zu den Einstellungen und gib unter dem Punkt „Canvas” bei „Move Objects” dein Baseline-Größe ein. Jetzt kannst du Elemente im Layout mit gedrückter cmd Taste immer um diesen Wert bewegen und somit leichter auf dein Baseline Grid abgestimmt positionieren.
Was ist der Unterschied zum Column Grid (Spaltenraster)?
Column Grid = horizontale Abstände
Baseline Grid = vertikale Abstände
Das Column Grid (Spalten-Grid) kennt fast jeder und wir verwenden es auch häufig bei der Gestaltung von Layouts.
Durch die Verwendung eines Column Grids tanzen Elemente nicht aus der Reihe und du kannst Informationen auf der Seite einfacher separieren.
Am besten verwendest du beide.
Vorteile für die Programmierung
Auch für Entwickler ist die Verwendung und Vorlage eines Grids in deinem Layout Dokument hilfreich. Auch sie können bei der Programmierung ein Grid definieren und sich dabei an deinen Einstellungen orientieren.
Mit einem Baseline Grid kannst du ihnen zusätzlich eine Vorlage für vertikale Abstände geben.
Und ich sag immer: Falls du irgendwo im Layout mal falsche Abstände siehst, kannst du dich am Baseline Grid orientieren. Ist also irgendwo der Abstand 25px, weiß er sofort, dass eigentlich 24px gemeint sein muss (bei dem Beispiel von oben → Abstand muss durch 6 teilbar sein).
