Website Grids sind ein essentielles Werkzeug im Webdesign, um eine klare Hierarchie zu schaffen und um kinderleicht wunderschöne Webseiten zu gestalten.
Du bist nicht sicher, wie Du Grids am besten verwendest und warum Grids überhaupt so gut funktionieren? Keine Sorge! Dieser Artikel erklärt Dir alles, was du über Website Grids wissen musst.
Und wenn Du danach immer noch tiefer in die Materie einsteigen möchtest, kannst Du Dir auch dann noch dieses Buch über Rastersysteme für die visuelle Gestaltung anschauen.
Was ist ein Website Grid?
Ein Website Grid ist ein Layout-System, mit dem man Inhalte einer Website organisieren kann, um so Ordnung und Hierarchie zu schaffen. Es bildet die Grundstruktur der Benutzeroberfläche.
Die Verwendung von Grids vereinfacht die Navigation der Website enorm, da die klare Ordnung und Hierarchie für weniger Verwirrung und Frustration der Benutzer sorgt. Die Grundlagen und Methoden von Website Grids zu erlernen wird Dir also umgehend dabei helfen, bessere Webseiten zu bauen und erfolgreiche Benutzererlebnisse zu schaffen.
Jede Website, die Du Dir im Detail anschaust, lässt sich sukzessive in kleinere und kleinere Rechtecke unterteilen, die hierarchisch angeordnet sind. Im besten Fall sind diese in einem klaren Grid System, oder auch Rastersystem, angeordnet und folgen klaren Regeln. Dabei gibt es zahlreiche unterschiedliche Arten von Grids, an denen man sich orientieren kann.
Durch die Verwendung eines Webseiten-Rasters vermeidest Du willkürliche Entscheidungen. So weißt Du genau, wo Du Elemente Deiner Webseite platzieren musst und sparst so enorm viel Zeit im Entwurfsprozess.
Warum sind Website Grids so wichtig im Webdesign?
Website Grids unterstützen Webdesigner, das richtige Layout mit passenden Verhältnissen und Proportionen zu erstellen. Sie bieten eine Art Anleitung, sodass nichts dem Zufall überlassen werden muss.
Dabei helfen Grid Layouts beim Platzieren von Elementen auf einer Webseite. Zunächst helfen sie beim Unterteilen einer Seite in logische Abschnitte und leiten anschließend den Webdesigner beim Positionieren von spezifischen Elementen wie Typographie, Bildern oder Buttons.
Insbesondere für responsive Webseiten sind Layout Grids unheimlich nützlich. Websites sollen auf allen möglichen Bildschirmgrößen und Endgeräten einwandfrei funktionieren. Grids unterstützen Webdesigner dabei, anpassungsfähige Wireframes zu erstellen, die sich responsiv für alle möglichen Auflösungen anpassen lassen.
Usability bzw. Benutzerfreundlichkeit ist der vermutlich wichtigste Faktor einer erfolgreichen Webseite. Egal für welchen wirtschaftlichen Bereich Deine Webseite entworfen wurde: Sie muss benutzerfreundlich sein, damit Dir keine wichtigen Kunden verloren gehen. Website Grids bieten einen systematischen Ansatz für horizontale und vertikale Unterteilungen einer Webseite. Dadurch wird eine klare und konsistente Struktur geschaffen, und so können Nutzer den Aufbau Deiner Webseite schneller verstehen und wiederkehrende Elemente sofort erkennen.
Grid Layouts haben ihren Ursprung im Print Design, in dem sie hauptsächlich für die Anordnung von Typographie oder Handschriften auf Papier, insbesondere in Büchern oder Zeitungen eingesetzt wurden. Die ersten Rastersysteme wurden für Manuskript-Layouts verwendet und spätestens mit der Einführung der Massenproduktion von gedrucktem Material wie Zeitungen, Plakaten oder Anzeigen waren Grid-Systeme allseits verbreitet.
Ab den 1930er Jahren wurden von Designern wie Jan Tschichold und Josef Müller-Brockmann neue modulare Rastersysteme unter Verwendung von viel Whitespace entwickelt, die wir heute als Swiss-Style oder International Typographic Style bezeichnen.
Anatomie: Wie sind Website Grids aufgebaut?
Alle Typen von Website Grids sind aus denselben wenigen Komponenten konstruiert.
Spalten (Columns)
Spalten (in engl. Columns) sind vertikale Sektionen, die sich über die gesamte Höhe des Inhalts spannen.
Die Flexibilität eines Grid Layouts lässt sich durch zwei Ansätze erhöhen:
- Werden mehr Spalten verwendet, gibt es mehr Möglichkeiten, Inhalte anhand der Spalten zu positionieren.
- Wird eine Anzahl an Spalten verwendet, die sich durch möglichst viele Zahlen teilen lässt, wie z.B. 12 oder 16, dann ergeben sich mehr Möglichkeiten, Inhalte proportional nebeneinander zu platzieren.
Der Standard im Web ist hierbei eine Spaltenanzahl von 12 auf Desktop, 8 auf Tablets und 4 auf Smartphones. Dabei sind Spalten für gewöhnlich zwischen 60px und 80px breit und somit maßgeblich für die Breite des Seiteninhalts verantwortlich.
Zeilen (Rows)
Spalten (in engl. Rows) sind die horizontalen Sektionen einer Webseite. In vielen Designs werden diese nicht explizit festgelegt, sondern ergeben sich durch den Inhalt der Seite.
Module (Content modules, Units)
Module (in engl. Modules, Content Modules oder Units) ergeben sich durch die Kreuzung von Spalten und Zeilen. Module sind die Baublöcke einer Webseite und in ihnen werden Inhalte wie Textelemente, Bilder oder Schaltflächen platziert.
Gutters (Rinnen)
Gutters, oder auch Rinnen genannt, beschreiben den freien Raum zwischen Spalten und Zeilen. Sie erzeugen negativen Raum zwischen Elementen, sodass diese leicht auseinanderzuhalten sind.
Für gewöhnlich haben Gutters eine Größe von etwa 16px bis 32px. Dabei können sich die Größen zwischen horizontalen und vertikalen Rinnen in Ausnahmefällen unterscheiden.
Margins (Außenabstände)
Margins, oder auch Außenabstände genannt, sind der negative Raum zwischen dem Grid und dem äußeren Rand der Webseite. Man kann sich Margins also etwa als Gutters am äußeren Rand des Webseiteninhalts vorstellen.
Auf mobilen Endgeräten werden für gewöhnlich Außenabstände zwischen 16px und 32px verwendet. Auf Tablets und insbesondere auf dem Desktop können Margins deutlich stärker variieren. Dabei sind die Margins in horizontaler Richtung oft deutlich größer als nach oben und unten.
Das Wort Margin wird im CSS verwendet, um Raum außerhalb der festgelegten Grenzen um die Elemente herum zu schaffen. Die Größe dieser Elemente wird also beim Festlegen von Margins keinesfalls verändert. Bei Website Grids hingegen beschreiben Margins exakt den Bereich zwischen dem Grid und dem Rand der Webseite. Wird also die Größe der Margins verändert, muss dabei zwangsweise die Größe vom Grid ebenfalls verändert werden.
Welche Typen von Website Grids gibt es?
Es gibt 5 unterschiedliche Typen von Grids, welche jeweils für spezifische Arten von Webseiten besonders gut geeignet sind.
Vermutlich hast Du sogar bereits einige dieser Rastertypen unbewusst verwendet, um das Layout Deiner Webseite zu organisieren. Um sicherzustellen, dass Du auch alle wichtigen Informationen beisammen hast, stellen wir Dir im Folgenden alle 5 Typen im Detail vor. Dabei zeigen wir Dir die besten Anwendungsbeispiele direkt mit!
Column Grid
Column Grids, oder auch Spaltenraster genannt, ist die am häufigsten verwendete Art von Grids im Webdesign. Sie enthalten 2 oder mehr Spalten, die sich vertikal über die gesamte Höhe der Website erstrecken. Dabei verwenden die meisten Webseiten 4, 6, 9, 12 oder 16 Spalten. Durch je mehr Zahlen sich die Anzahl der Spalten teilen lässt, desto flexibler kann das Column Grid eingesetzt werden.
Die Webseiteninhalte können sich entsprechend über eine, aber auch über mehrere Spalten spannen. Dabei folgen sie den vertikalen Linien des Spaltenrasters.
Column Grids lassen sich recht einfach zu responsiven Grids verwandeln. Dabei muss man lediglich bei kleineren Breakpoints die Anzahl der Spalten reduzieren und zuvor nebeneinander angeordnete Elemente untereinander platzieren.
Alle Gutters eines Column Grids haben stets dieselbe Größe, die konsistent über den gesamten Verlauf der Webseite beibehalten wird. Die Größe der Spalten muss allerdings nicht notwendigerweise identisch sein. Wenn die Spalten eines Column Grids gleich breit sind, nennt man es ein symmetrisches Column Grid. Sind sie ungleich, ist es ein asymmetrisches Column Grid.
Symmetrische Column Grids eignen sich ausgezeichnet für Preisseiten. Dort werden oft mehrere Optionen gegenübergestellt, und so kann das symmetrische Layout ausgenutzt werden, um die Optionen perfekt vergleichend darzustellen.
Asymmetrische Column Grids werden oft für Blogs verwendet. Dort kann auf einer Seite in einem schmaleren Bereich das Inhaltsverzeichnis platziert werden und die andere größere Seite kann den Inhalt des Artikels enthalten.
Das 960 Grid System
Das 960 Grid System vereinheitlicht den Design- und Entwicklungsprozess anhand eines strikten Column Grids. Dabei wird folgender Struktur gefolgt:
- Nutze ein Column Grid
- Verwende entweder 12 Spalten a 60px oder 16 Spalten a 40px
- Nutze 20px Gutters
Manuscript Grid
Manuscript Grids, oder auch Block Grids genannt, sind die vermutlich einfachste Art von Website Grids. Sie enthalten eine einzige Spalte und jeglicher Inhalt ist vertikal innerhalb dieser Spalte platziert. So gesehen sind sie ein einziges großes Modul.
Manuscript Grids sind ausgezeichnet geeignet für Webseiten, die viel Text oder riesige Bilder enthalten. Daher werden sie insbesondere für Blogs verwendet. Im Offline-Bereich werden sie zusätzlich für Bücher, Zeitungen und Magazine genutzt.
Um die Inhalte herum wird für gewöhnlich viel Whitespace verwendet. So wird der Fokus der Leser auf das Wesentliche gelenkt. Werden dabei größere Margins und ein schmalerer Textblock verwendet, wird der Blick mehr auf den Text gelenkt und ein Gefühl von Ruhe und Stabilität erzeugt. Werden hingegen schmalere Margins und ein breiterer Textblock verwendet, wird mehr Spannung geschaffen.
Durch die einzelne Spalte wird außerdem die Linearität und der Lesefluss unterstützt, weshalb Manuscript Grids sich so besonders gut für Blogs und andere Webseiten mit viel Text eignen, die besonderen Wert auf Storytelling legen.
Baseline Grid
Ein Baseline Grid, oder auch Grundlinienraster genannt, ergibt sich, wie der Name bereits andeutet, aus den Grundlinien, auf denen Typographie platziert wird. Die Linien erstrecken sich dabei über die gesamte Breite der Webseite.
Es handelt sich bei dem Baseline Grid also im Gegensatz zu den anderen Typen von Website Grids nicht um eine Anordnung von Module, Boxen oder Spalten mit einem Volumen, sondern von horizontalen Linien.
Die horizontalen “Baselines” werden in gleichmäßigen Intervallen in vertikaler Richtung wiederholt und schaffen somit eine konsistente Distanz zwischen Textelementen.
Baseline Grids bieten sind insbesondere bei Websites mit einem responsiven Design an, bei dem das Webdesign vorsieht, dass sich Abstände und Leading beim Skalieren nicht verändern.
Modular Grid
Modular Grids (oder auch Modulare Grids) vereinen Spalten und Zeilen zu einer Art Schachbrettmuster. Dabei haben die entstehenden Module für gewöhnlich dieselbe Größe.
Insbesondere im Webdesign, wenn mehrere Elemente gleichzeitig präsentiert werden sollen und ein Column Grid nicht ausreicht, eignet sich ein Modular Grid als Grid System. So wird es auch oft auf Webseiten wie YouTube oder auf E-Commerce-Websites verwendet, um eine Vorschau von Videos oder Produkten zu zeigen.
Da Modular Grids ebenfalls Spalten verwenden, lässt es sich ausgezeichnet mit Column Grids kombinieren. So kann das gegebene Column Grid einer Webseite, wenn notwendig, für bestimmte Abschnitte auf ein Modular Grid erweitert werden.
Ein weit verbreitetes Modular Grid ist das sogenannte 8pt-Grid-System. Das Prinzip des 8pt-Grid-Systems ist die Verwendung von Vielfachen von 8pt (8, 16, 24, 32, 40 usw.) für das gesamte Layout, also auch für Gutters, Margins oder die Größe von Texten und allen anderen Elementen. So können Designs über unterschiedliche Geräte konsistent gehalten werden.
Justified Grid
Die Module von Modular Grids müssen nicht notwendigerweise die gleiche Größe haben.
Bei einem Justified Grid beginnt man, analog zu einem Column Grid, mit Zeilen, die untereinander angeordnet werden. Diese Zeilen müssen jeweils nicht notwendigerweise dieselbe Höhe haben. Jede der Zeilen wird nun nach belieben unterteilt, sodass ein asymmetrisches Grid entsteht, das sogenannte Justified Grid.
Justified Grids eignen sich besonders gut für Bildergalerien, da Bilder nicht zugeschnitten werden müssen, um in die Module zu passen. Sie müssen lediglich in ihrer Größe angepasst werden, sodass sie mit der Höhe der Zeile übereinstimmen.
Masonry Grid
Wie auch bei Justified Grids, handelt es sich bei Masonry Grids um asymmetrische Modular Grids.
Masonry Grids werden erzeugt, indem man die Spalten eines Column Grid jeweils nach Belieben in unterschiedliche Module unterteilt. Die Module müssen dabei lediglich mit der Breite der Spalte übereinstimmen, können aber eine beliebige Höhe aufweisen.
Ein Masonry Grid eignet sich besonders gut für Webseiten wie Trello, die Karten untereinander anordnen. Jede dieser Karten kann je nach Inhalt beliebig hoch sein, muss aber die Breite der Spalte befolgen. Eine Karte als Gesamtheit stellt in einem Masonry Grid ein Modul dar, auch wenn sie hierarchisch in Elemente wie Überschrift oder Fließtext weiter unterteilt werden kann.
Bento Grid
Bento Grids sind vermutlich der neueste Trend unter den Grid-Systemen, der erst Ende 2023 begann und rasch an Beliebtheit gewonnen hat.
Im Webdesign bezeichnet ein Bento Grid ein Grid System, das von der japanischen Bento-Box inspiriert ist. Eine Bento-Box ist eine in Fächer unterteilte Lunchbox, die traditionell verwendet wurde, um verschiedene Lebensmittel oder Gerichte übersichtlich in separaten Abschnitten anzuordnen.
Ähnlich wie bei Bento-Boxen werden in Bento Grids unterschiedliche Elemente in separaten Modulen angeordnet. Die Module müssen dabei zwar nicht unbedingt gleich groß sein, folgen aber dennoch einem einheitlichen strukturellen Rahmen. Außerdem legen Bento Grids ihren primären Fokus auf Modularität und Flexibilität, weshalb sie sich zusätzlich als Modular Grids kategorisieren lassen.
Da jedes Modul des Website Grids verschiedene Arten von Inhalten enthalten und unterschiedlich groß sein kann, trägt dieser Ansatz zu einem ausgewogenen und harmonischen Layout bei und sorgt für Klarheit und Hierarchie der Inhalte.
Bento-Raster werden häufig im responsiven Webdesign verwendet, da sie sich leicht an unterschiedliche Bildschirmgrößen und Geräte anpassen lassen, während die Gesamtstruktur und Organisation des Layouts erhalten bleibt.
Hierarchical Grid
Hierarchical Grids sind die wohl flexibelste Art von Website Grids. In Hierarchical Grids werden zunächst Module mit variierender Position und Größe in einer klaren Hierarchie strukturiert und darin die Inhalte je nach Wichtigkeit platziert.
In einem Hierarchical Grid kann Hierarchie erzeugt werden, indem Größe und Position variiert werden. Wichtige Elemente können somit weiter oben in größeren Modulen platziert werden, wohingegen sekundäre Elemente weniger Platz in Anspruch nehmen können.
Ein Hierarchical Grid kann sowohl komplett frei nach Gefühl bzw. “freestyle” erstellt werden, aber auch einem klaren Modular Grid System folgen. Je mehr Variation das Hierarchical Grid dabei aufweist und je stärker es von einem symmetrischen Modular Grid abweicht, desto mehr wird ein Gefühl der Dynamik erzeugt. Doch dabei ist Vorsicht geboten, denn das freie Erstellen eines guten Hierarchical Grids erfordert jahrelange Erfahrung im Webdesign und hervorragende Kenntnisse der Gestaltgesetze.
Hierarchical Grids werden oft von Fotografen verwendet, da Fotos nicht gecropped werden müssen, um in eine vordefinierte Box zu passen. Das Grid kann sich leicht an die Formen und Größen der Bilder anpassen. Auch Zeitungen aus dem Online-Bereich haben ihre Grid Systeme mehr und mehr in Richtung von Hierarchical Grids entwickelt. So können wichtige Elemente, wie der zentrale Textblock, hervorgehoben und zusätzlich mehr Dynamik geschaffen werden.
Golden Canon Grid
Das Golden Canon Grid besteht aus diagonalen sowie horizontalen und vertikalen Linien und unterstützt den Designer, eine ausgewogene und harmonische Komposition zu kreieren. Das Ergebnis ist visuell ansprechend und wirkt symmetrisch.
Um ein Golden Canon Grid zu erstellen, beginne zunächst mit den diagonalen Linien zwischen den Ecken und den horizontalen und vertikalen Symmetrieachsen. Kopiere dieses Setup und skaliere es jeweils einmal nach links und einmal nach rechts auf die halbe Breite.
Aufbauend auf dieses Grundgerüst kannst Du nun an Schnittpunkten der Linien weitere Hilfslinien einzeichnen. Oft wird um das Grid herum eine Margin freigelassen, um ausreichend Raum für das Navigationsmenü und andere fixierte Elemente der Website übrig zu lassen.
6 Regeln, denen Du beim Verwenden von Website Grids im Webdesign folgen solltest
Website Grids wirken zwar recht simpel, doch es gibt so einige Stolpersteine, über die man beim Verwenden eines solchen Grid Systems stolpern könnte. Daher haben wir die 6 wichtigsten Regeln zusammengefasst, die Du beim Verwenden von Website Grids beachten solltest, sodass beim Erstellen eines Website Grids nichts mehr schiefgehen kann.
1. Wähle den richtigen Grid-Typen
Dein erster Instinkt mag es sein, einfach ein simples Column Grid zu verwenden. Nicht umsonst ist es das beliebteste Website Grid in den letzten Jahren.
Doch bevor Du startest, solltest Du Dir Gedanken darüber machen, was Du überhaupt auf Deiner Webseite abbilden möchtest. Erstellst Du einen Blog? Vielleicht ist ein Manuscript Grid passender. Soll Deine Webseite auffällig und besonders sein? Dann kann eine Variante der Modular Grids, wie beispielsweise das Bento Grid, das richtige Grid System für Dein Webdesign-Projekt sein.
Evaluiere also alle Möglichkeiten und überlege, welche Emotionen Deine Webseite vermitteln soll. So wirst Du das richtige Grid System für Dein Website-Projekt finden.
Hast Du Dich auf ein Website Grid festgelegt? Super! Dann ist es nun wichtig, dass Du mit Deiner Wahl konsistent bleibst und nur in sinnvollen Ausnahmefällen andere Grid Systeme mit Deiner Wahl kombinierst.
2. Nutze responsive Website Grids
Responsive Website Grids sind adaptiv und passen sich an die Größe aller möglichen Geräte und Browser an. Ändert sich also die Bildschirmgröße, so ändert sich auch die Größe und Anordnung der Module im Website Grid, um den Ansprüchen der veränderten Bildschirmgröße gerecht zu werden.
Wird z.B. bei einem Column Grid die Größe des Bildschirms reduziert, so werden zunächst die Spalten schmaler. Ab einer bestimmten Bildschirmgröße, also ab einem bestimmten “Breakpoint”, reduziert sich oft zusätzlich die Anzahl der Spalten, damit diese wieder ausreichend Platz bekommen können. Inhalte werden entsprechend anders angeordnet, um dem neuen Grid Layout zu folgen.
Bei responsiven Website Grids unterscheidet man zwischen Fixed Website Grids und Fluid Website Grids.
Fixed Website Grid: Module bzw. Abschnitte des Grids haben eine feste Größe und ändern sich nur an festen Breakpoints. Wird die Bildschirmgröße verändert, passen sich also zunächst nur die Margins des Website Grids an.
Fluid Website Grid: Module bzw. Abschnitte des Grids haben eine relative Größe, die oft in Prozent angegeben wird. Bei Veränderung der Bildschirmgröße verändert sich die Größe der Module also automatisch mit. Breakpoints werden an dieser Stelle nur verwendet, um die Anzahl und Anordnung der Module zu ändern.
3. Verwende ausreichend Whitespace
Webdesigner kennen die Wichtigkeit von Whitespace, oder auch Negative Space genannt, um auf Webseiten die Lesbarkeit zu verbessern und Hierarchie zu schaffen. Whitespace ist notwendig, um Fokus auf wichtige Elemente zu lenken und die Navigation zu erleichtern.
Als Webdesigner sollten wir also nicht versuchen, den gesamten Raum so voll wie möglich zu stopfen, sondern unseren Designs ausreichend Raum zum Atmen geben.
Whitespace in Rastersystemen bezieht sich auf die Gutter und Margins. Aber auch Module können zum Teil freigelassen werden, um mehr Whitespace zu erzeugen, wie wir es in der Case Study von Sotti’s Kneipe getan haben. So wird der Besucher Deiner Webseite nicht mit Informationen und visuellen Eindrücken überwältigt.
4. Beachte den goldenen Schnitt
Der goldene Schnitt beschreibt die irrationale Zahl mit einem Wert von etwa 1.618. Das faszinierende am goldenen Schnitt ist, dass man eine Linie so zerschneiden kann, dass:
- der längere Anteil 1.618 mal so lang ist wie der kürzere Anteil und
- die gesamte Linie 1.618 mal so lang ist wie der längere Anteil
Aber auch in vielen biologischen Systemen oder in mathematischen Sequenzen wie der Fibonacci-Folge kommt der goldene Schnitt immer wieder vor.
Es wird vermutet, dass visuelle Reize, die dem goldenen Schnitt folgen, oft als schön wahrgenommen werden. Daher verwenden Webdesigner den goldenen Schnitt nicht nur für die Aspect Ratio von Bildern, sondern von vielen anderen Komponenten bis hin zu dem unterliegenden Website Grid der gesamten Webseite.
Wenn Du also beispielsweise eine Hero Section entwirfst, kannst Du dich zunächst fragen, wie die einzelnen Komponenten aufgeteilt werden sollen. Vermutlich enthält Deine Hero Section ein großes Bild, eine Überschrift, einen kurzen Text und einen CTA-Button. Du könntest also beispielsweise den Bildschirm in zwei Abschnitte im Verhältnis 1 zu 1.618 aufteilen - ein Abschnitt für die Textelemente und ein Abschnitt für das große Bild. So erhält das große Bild mehr Fläche und somit auch mehr Fokus. Aber auch die Überschrift, den Text und den CTA-Button kannst Du anhand des goldenen Schnitts skalieren und positionieren, um ein ansprechendes Gesamtbild zu schaffen.
Der goldene Schnitt hilft Dir als Webdesigner also bei den folgenden Fragen:
- Wie soll der Raum der Webseite aufgeteilt werden?
- Wie breit sollen die Spalten, Zeilen, Module, Gutters und Margins sein?
- Welche Proportionen sollen die Module haben?
5. Wende die Drittelregel an
Im Webdesign kann die Drittelregel angewandt werden, um visuelles Gleichgewicht auf Websites zu erzeugen. Dabei wird das Bild mit zwei waagerechten und zwei senkrechten Linien gedanklich in neun Teile unterteilt.
Platziert man seine Bilder oder wichtige Elemente auf den Überschneidungspunkten der Linien, werden Kompositionen erzeugt, die als höchst ästhetisch wahrgenommen werden.
Das Anwenden der Drittelregel kann dabei helfen, die Dimensionen eines Website Grids festzulegen und zu entscheiden, wo bestimmte Elemente platziert werden sollen. Sie kann aber auch für das Festlegen der Aspect Ratios von Bildern genutzt werden. Indirekt bestimmt die Drittelregel so die Menge und Position vom Negative Space.
6. Brich das Grid System
Strikt einem Grid System zu folgen ist zu Beginn eine super Idee. Früher oder später wird es aber Situationen geben, in denen es einfach sinnvoll erscheint, dem Grid nicht genau zu folgen.
Ein Website Grid dient grundsätzlich als Guide und ist keine strikte Anleitung. Dem Konzept im Großen und Ganzen zu folgen macht Sinn, aber es ist genauso wichtig, die Situationen zu erkennen, in denen man aus dem Grid ausbrechen sollte.
Unsere Case Study der Verdener Kneipe Sotti’s folgt einem strikten Column Grid mit 12 Spalten. Das funktioniert auch fast überall perfekt, doch in der Hero Section wären zwei wichtige Textelemente einfach viel zu nah beieinander, würden wir dem Column Grid perfekt folgen. Also haben wir uns entschieden, an dieser Stelle dem Grid nicht zu folgen und das war die absolut richtige Entscheidung.
So erstellst Du ein Website Grid in Figma und Webflow
Du kennst jetzt die komplette Theorie, aber wie setzt Du es in die Praxis um? Wir zeigen Dir, wie man ein Grid System in Figma und Webflow erstellt.
Website Grids in Figma erstellen
1. Erstelle einen neuen “Frame” (Shortcut F).
2. Füge dem Frame ein Layout Grid hinzu.
3. Passe das Layout Grid nach Bedarf an.
So könnte Dein fertiges 960 Grid System in Figma aussehen.
Website Grids in Webflow erstellen
1. Erstelle ein “div” und konvertiere es unter “Layout”, “Display” und “Grid” zu einem Grid Layout.
2. Öffne die “Grid settings” (kleiner Schraubenschlüssel) und passe das Grid nach Bedarf an.
3. Pro Tipp: Wie Du beim vorherigen Bild sehen kannst, wird ein sehr langer und unschöner CSS-Code generiert. Das können wir besser! Verwende die “Custom properties”, um sich wiederholende Eigenschaften zu kürzen.
Der generierte Code ist nun deutlich kürzer und so sind es auch die Ladezeiten Deiner Webseite.
Auf geht’s!
Jetzt steht Dir nichts mehr im Weg, eigene Webseiten unter Verwendung von Website Grids zu bauen! Wenn Du allerdings noch mehr über Website Grids lernen möchtest, kannst Du Dir das bekannteste Buch über Rastersysteme für die visuelle Gestaltung anschauen. Stattdessen kannst Du aber auch gerne uns zum Thema Webdesign kontaktieren, wenn Du weitergehende Antworten erhalten oder gar Deine Webseite von uns erstellen lassen möchtest!
