Rastersysteme: Der Leitfaden für Designer

Rastersysteme sind der Teil des Designs, der die meiste Arbeit leistet und die wenigste Anerkennung bekommt. Jedes Produkt, das du respektierst, hat eines, jedes Produkt, an dem du vorbeiscrollst, nicht. Das Raster ist keine Dekoration. Es ist der Vertrag, der Typografie, Hierarchie und Rhythmus zusammenhält, damit der Nutzer die Seite auf einen Blick lesen kann, statt sie zu entschlüsseln.

Die Schweizer Schule hat das vor sechzig Jahren im Print bewiesen. Müller-Brockmann, Hofmann, Ruder, eine ganze Generation von Designern, die das Raster als Denkwerkzeug behandelte, nicht als Layout-Abkürzung. Diese Lektion ist besser gealtert als fast jedes andere Stück Designtheorie. Jedes moderne Produktraster, von Linear über Stripe bis zur New York Times, stammt von derselben Idee ab. Das hier ist die Referenz für das Raster im Jahr 2026.

Müller-Brockmann gab dem modernen Raster seine Grammatik

Josef Müller-Brockmanns Buch "Rastersysteme für die visuelle Gestaltung" (Originaltitel "Grid Systems in Graphic Design", 1981) ist bis heute das Rückgrat der Disziplin. Vor diesem Buch gab es Raster, aber das Vokabular fehlte. Danach hatten Designer eine gemeinsame Sprache für Spalten, Stege, Ränder und Module, die über Studios, Schulen und Jahrzehnte hinweg funktionierte.

Die Schweizer Schule behandelte das Raster als Constraint-Maschine. Such dir ein System aus, halte es durch und lass die Variation aus dem Inhalt kommen, nicht aus Improvisation. Müller-Brockmanns Plakate für die Zürcher Tonhalle sehen im Jahr 2026 wie Screenshots von Produkt-UIs aus, weil sie dieselbe Logik befolgen.

Starke Schrift auf einem festen Raster. Weißraum als strukturelles Element, nicht als Restfläche. Dieselbe Logik zeigt sich heute in Texten wie warum 2026 jede SaaS gleich aussieht, wo die Homogenität der Sieg des Rasters ist, der dann seine Schärfe verliert.

Das Web hat diese Grammatik nur langsam geerbt. CSS gab uns erst Floats, dann Flexbox, schließlich CSS Grid. Jeder Schritt verkleinerte die Lücke zwischen dem, was Printdesigner 1961 konnten, und dem, was Frontend-Designer im Browser konnten.

Das Vokabular hat sich nicht geändert. Spalten sind immer noch Spalten. Die Werkzeuge haben nur aufgeholt.

Warum Raster funktionieren, in einem Absatz

Ein Raster funktioniert, weil es dem Designer tausend kleine Entscheidungen abnimmt und sie dem Nutzer als Vorhersehbarkeit zurückgibt. Das Auge lernt den Rhythmus in der ersten Sekunde einer Seite und nutzt ihn, um sich durch alles Weitere zu bewegen.

Ohne Raster ist jede Layout-Entscheidung neu. Wo sitzt die Überschrift, wo endet das Bild, wie breit ist der Fließtext, wie verhält sich die Sidebar zur Hauptspalte. Mit einem Raster sind diese Antworten vorentschieden.

Der Designer investiert seine Aufmerksamkeit in Hierarchie und Inhalt, statt jeden Block neu zu vermessen. Der Nutzer investiert seine Aufmerksamkeit in die Botschaft, statt die Struktur zu entziffern. Das ist der ganze Deal.

Die fünf Rastertypen auf einen Blick

Die meisten Teams behandeln "Raster" als eine einzige Entscheidung. Es sind fünf. Jeder löst ein anderes Layoutproblem und scheitert aus einem anderen Grund. Wähle falsch, und die Seite kämpft für immer gegen dich.

Diese Tabelle ist das Lesezeichen. Die meisten Layout-Streitereien enden in dem Moment, in dem sich das Team einig ist, welches dieser fünf Raster es fährt.

Das Spaltenraster ist das Arbeitstier

Spaltenraster sind der Standard für fast alles, was du im Web auslieferst. Vertikale Spalten, feste Stege, optionale Ränder. Der Inhalt fließt in die Spalten, Layoutblöcke überspannen eine oder mehrere davon, und der Rhythmus ergibt sich daraus, in wie viele Spalten die Fläche geteilt ist.

Stripe fährt auf der gesamten Marketingfläche ein 12-Spalten-Raster. Linears App-Shell basiert auf einem Spaltenraster, das mobil auf eine einzelne Leiste einrastet und am Desktop zu Sidebar plus Hauptspalte aufklappt. Vercels Marketingseiten nutzen ein 12-Spalten-Raster mit bewusstem Negativraum, die Spalten sind sichtbar, wenn man bei der Pricing-Matrix im Dashboard oder dem Layout des Deploy-Logs die Augen zusammenkneift. Dasselbe Raster, das 1961 Plakate trug, trägt 2026 Marketingseiten, nur mit Media Queries darunter.

Verzichte auf das Spaltenraster nur, wenn das Layout grundsätzlich nicht rechteckig ist, was im Web fast nie vorkommt. Die Aufschlüsselung des Marketing-Site-Stacks 2026 behandelt die Framework-Entscheidungen, die auf diesem Raster aufsetzen.

Das Modulraster ist für redaktionelle Dichte

Ein Modulraster teilt die Fläche in beide Richtungen in Zellen, Spalten und Zeilen. Es sieht aus wie ein Stück Millimeterpapier und verhält sich auch so. Layoutblöcke rasten an Zellgrenzen ein, und Dichte wird zum Gestaltungshebel statt zum Zufall.

Die Homepage der New York Times ist das kanonische Modulraster im Web. Schlagzeilen, Fotos, Teaser und Anzeigen sitzen in Zellen mit einheitlichen Breiten und Höhen, auch wenn die sichtbare Komposition abwechslungsreich wirkt. Bloomberg Terminal treibt das Modulraster auf die Spitze, mit einer Informationsdichte, die ohne strikte Zellendisziplin zusammenbrechen würde. Notions Galerieansicht liefert ein weicheres Modulraster, mit Karten, die auf eine feste Zellbreite einrasten, während sich der Inhalt darin anpasst.

Nutze ein Modulraster, wenn die Seite viele kleine, vergleichbare Einheiten hat, die als System gelesen werden sollen. Lass es weg, wenn der Inhalt aus ein oder zwei großen Blöcken besteht, wo ein Spaltenraster dieselbe Arbeit mit weniger Zeremonie erledigt. Ein Modulraster mit zwei Karten ist ein Spaltenraster im Kostüm.

Das Baseline-Raster ist die Rhythmus-Maschine

Ein Baseline-Raster ist ein horizontales Raster, das den vertikalen Rhythmus steuert. Jede Textzeile sitzt auf einer Grundlinie, jede Überschrift landet auf einem Vielfachen davon, und die Seite liest sich mit einer leisen musikalischen Kadenz, die der Nutzer spürt, aber nie benennt.

Apples Marketingseiten fahren ein striktes Baseline-Raster. Öffne eine beliebige Produktseite und schau, wie Headline, Subhead, Bild und Fließtext alle denselben vertikalen Rhythmus teilen. Medium liefert Baseline-Ausrichtung in seinem Long-Form-Template, weshalb sich das Lesen selbst bei einem Essay mit 4000 Wörtern mühelos anfühlt. Stripe Press, der Verlagsarm, fährt Baseline-Rhythmus auf jeder gedruckten und jeder ins Web gestellten Seite.

Die Mathematik im Web ist simpel. Wähle eine Basiseinheit, meist 8 Pixel. Setze die Zeilenhöhe des Fließtexts auf ein Vielfaches, meist 24 Pixel, also das 1,5-Fache von 16 Pixel Fließtext.

Überschriften landen ebenfalls auf Vielfachen, sodass ein H1 mit 48 Pixel und 56 Pixel Zeilenhöhe trotzdem auf denselben Rhythmus einrastet. Die ganze Seite summt auf einem einzigen Beat.

Das hierarchische Raster ist für die Lesereihenfolge

Ein hierarchisches Raster ist ein maßgeschneidertes Raster, das um die inhärente Priorität des Inhalts gebaut wird. Statt mit Spalten und Zeilen zu beginnen, beginnst du damit, was zuerst, zweitens, drittens gelesen werden soll. Das Layout rastet auf diese Entscheidungen ein, nicht auf ein generisches Template.

Apples Produktlaunch-Seiten sind hierarchische Raster in freier Wildbahn. Das Hero-Element bekommt überproportional viel Platz, sekundäre Inhalte sitzen in engen Clustern, und tertiäre Inhalte leben gegen Ende in einer schmaleren Spalte. Die großen Features der New York Times, die multimedialen Long-Scroll-Stücke, sind hierarchische Raster, die Szene für Szene gestaltet wurden. Anthropics Homepage fährt ein hierarchisches Raster, in dem ein Statement dominiert und alles andere als Unterstützung dimensioniert ist.

Hierarchische Raster sind der Rastertyp, der das meiste redaktionelle Urteilsvermögen verlangt. Sie scheitern, wenn Designer sie als Ausrede benutzen, um sich die Disziplin eines Spalten- oder Modulrasters zu sparen. Ein hierarchisches Raster ist nicht "kein Raster". Es ist ein Raster, in dem die Prioritäten die Geometrie bestimmen.

Wenn deine Hierarchie falsch ist, ist das Raster falsch. Die tiefere Logik der Priorisierung steckt in visuellem Hierarchie-Design.

Das Manuskriptraster ist für Long-Form

Ein Manuskriptraster ist eine Spalte. Das ist das ganze Raster. Ein einzelner Textblock, der die Seite hinunterläuft, mit durchdachten Rändern, einer bewussten Zeilenlänge und nichts anderem, das um das Auge konkurriert.

Stripe-Press-Bücher sind Manuskriptraster auf Papier. Notions Doc-Seiten sind Manuskriptraster im Browser. Substacks Leseansicht, die Long-Reads des Apple Newsroom, die Magazinstücke der New York Times im einspaltigen Modus, alle fahren dasselbe Raster. Das Buch weiß seit fünf Jahrhunderten, wie man langes Lesen ausliefert. Das Web hat aufgeholt, als wir aufhörten, eine Sidebar neben einen Essay mit 4000 Wörtern zu setzen.

Die Einschränkung ist die Zeilenlänge. Ziele auf 65 bis 75 Zeichen. Breiter, und das Auge verliert beim Zeilenwechsel die Zeile. Schmaler, und der Rhythmus wird holprig.

Die andere Einschränkung ist der Rand. Großzügige Seitenränder sind keine verschwendete Fläche, sie sind der Rahmen, der dem Auge des Lesers Entspannung erlaubt. Der Glossareintrag zu Weißraum erklärt, warum diese Ränder echte Arbeit leisten.

Das 12-Spalten-System treibt das moderne Web an

Das 12-Spalten-Raster ist der Standard, weil 12 die am besten teilbare kleine Zahl ist. Sie lässt sich sauber in 1, 2, 3, 4, 6 und 12 teilen. Das deckt fast jedes Layoutmuster ab, das eine Marketingseite oder Produkt-UI je braucht, ohne zu Brüchen greifen zu müssen.

Bootstrap hat das 12-Spalten-Raster 2011 fürs Web kodifiziert und musste sich für diese Wahl nie entschuldigen. Tailwinds Grid-Utilities liefern standardmäßig 12 Spalten. Material Designs responsives Raster, Carbon Designs Raster, Polaris von Shopify, alle 12 Spalten. Die Wahl ist kein Zufall, sie ist Mathematik.

Hier ist der 12-Spalten-Feldführer, den die meisten Teams entweder nutzen oder schlecht neu erfinden:

• 12 volle Breite: Hero, Banner, Footer, randloser Inhalt
• 8 + 4 Hauptinhalt mit Sidebar, die kanonische Produkt-App-Shell
• 6 + 6 zweigeteilte Inhaltsblöcke, Marketing-Feature-Rows, Vergleichsabschnitte
• 4 + 4 + 4 dreiteilige Karten, Preisstufen, dreispaltige Feature-Raster
• 3 + 3 + 3 + 3 vierteilige Logos, Team-Raster, Bildgalerien
• 9 + 3 Inhalt mit schmaler Meta-Spalte, üblich in redaktionellen Layouts
• 2 + 8 + 2 zentrierter Inhalt mit Luft zum Atmen, genutzt auf Marketing-Detailseiten

Lege diese Muster früh fest, und das Team hört auf, in Design-Reviews über Layout zu diskutieren. Das Muster bestimmt die Spans, die Spans bestimmen die Mathematik, die Mathematik liefert die Seite. Das Argument, das in du brauchst kein Designsystem folgt, lautet zum Teil, dass ein straffes Raster das meiste von dem leistet, was ein Designsystem für sich beansprucht.

Baseline-Rhythmus auf Bildschirmen, nicht nur auf Papier

Baseline-Ausrichtung ist der Teil der Rastertheorie, den die meisten Teams im Web überspringen, weil der Browser sie nicht erzwingt. Überspringst du sie, wirkt die Seite aus Gründen fahrig, die der Nutzer nicht benennen kann. Hältst du sie, fühlt sich die Seite wie ein fertiges Produkt an.

Der Trick ist, in vertikalen Einheiten zu denken, nicht in Pixeln. Wähle eine Basis von 8 Pixeln. Alles an Padding, Margin, Zeilenhöhe und Komponentenhöhe wird ein Vielfaches von 8.

Fließtext mit 16 Pixel und 24 Pixel Zeilenhöhe rastet auf den Rhythmus ein. H1 mit 48 Pixel und 56 Pixel Zeilenhöhe rastet ein. Karten-Padding von 24 Pixel rastet ein. Abschnittsabstand von 96 Pixel rastet ein. Die ganze Seite wird zu einem einzigen Instrument, gestimmt auf einen Ton, und das Auge kann ohne einen einzigen Ruckler hindurchgleiten.

Linear liefert Baseline-Rhythmus in der Issue-Liste. Notion liefert ihn im Doc-Reader. Figmas Slides-Produkt hält den Rhythmus sowohl in den Folien-Thumbnails als auch auf der Editor-Fläche. Die Teams, die den Rhythmus halten, sind meist die Teams, die Typografie als System behandeln, nicht als Stylesheet-Override.

Responsive Raster ohne Panik

Ein responsives Raster ist dasselbe Raster bei unterschiedlichen Breiten. Es ist kein anderes Design an jedem Breakpoint, es ist dieselbe Komposition, die intelligent kollabiert, wenn der Viewport schrumpft.

Der Standardansatz ist ein 12-Spalten-Raster am Desktop, 8 Spalten am Tablet, 4 Spalten mobil. Ein 4 + 8 Layout am Desktop wird am Tablet zu 4 + 4 und mobil zu einer einzigen Spalte. Ein vierteiliges 3 + 3 + 3 + 3 Layout wird am Tablet zu 4 + 4 (zwei Reihen mit je zwei) und mobil zu 4 + 4 + 4 + 4 (vier gestapelt). Die Mathematik bleibt konsistent, weil die Spaltenzahl in sauberen Bruchteilen abnimmt.

Stripes Site ist das Lehrbuchbeispiel eines responsiven Rasters in Produktion. Linears Marketingseiten umbrechen über drei Breakpoints, ohne dass sich ein Layout gequetscht anfühlt. Vercels Pricing-Matrix bricht um, indem der Side-by-Side-Vergleich in ein gestapeltes Akkordeon kollabiert, der responsive Trick, den die meisten Teams nie herausfinden: "responsive" heißt manchmal "die Komponente ändern, nicht die Spalten". Das Pricing-Page-Problem behandelt diese Entscheidung im Detail.

Der Fehler ist, Mobile und Desktop als zwei unverbundene Layouts zu entwerfen. Die Kompositionen driften auseinander, die Marke wirkt auf Handy und Laptop unterschiedlich, und das Team pflegt am Ende zwei Produkte. Entwirf zuerst das Raster, dann die Breakpoints als Kollaps dieses Rasters. Der Glossareintrag zur Hero-Section behandelt den Teil des Rasters, den Nutzer an jedem Breakpoint zuerst sehen.

Die CSS-Grid-Ära: Die druckreifen Werkzeuge sind endlich da

CSS Grid ist das erste Mal, dass der Browser ein Layout-Primitiv hatte, das dem entspricht, was Printdesigner 1961 konnten. Vor CSS Grid hatten Webdesigner Floats, Flexbox und viel Geduld. Jetzt haben wir echte Rasterlinien, benannte Bereiche, Gap-Kontrolle und die Möglichkeit, eine Seite so zu layouten, wie Müller-Brockmann ein Plakat gelayoutet hätte.

Der Wandel zählt, weil das, was früher eine Build-Time-Entscheidung war (welches Framework-Raster nutze ich), jetzt ein im Browser eingebautes Layout-Primitiv ist. display: grid plus grid-template-columns: repeat(12, 1fr) plus gap: 24px ist ein 12-Spalten-Raster. Kein Framework nötig. Keine Utility-Klassen. Nur CSS, das tut, was CSS schon vor einem Jahrzehnt hätte tun sollen.

Tailwinds Grid-Utilities sind inzwischen dünner Zucker auf CSS Grid. Bootstraps Raster ist größtenteils ein Kompatibilitäts-Shim für ein Problem, das nicht mehr existiert. Die Teams, die am meisten aus CSS Grid herausholen, behandeln es wie ein Designwerkzeug, nicht wie einen Fallback für Flexbox.

Linears Editor nutzt CSS Grid für das Layout des Issue-Panels. Figmas Web-Editor nutzt es für das Canvas-Chrome. Vercel nutzt es auf dem Großteil der Marketing-Site. Das Werkzeug liegt im Kasten, die Frage ist, ob das Designsystem es benutzt oder Muster von 2018 auf Infrastruktur von 2026 fährt.

Echte Produktraster, die man studieren sollte

Der schnellste Weg, Rastersysteme zu verinnerlichen, ist, die Produkte zu inspizieren, die sie gut ausliefern. Fünf, die einen langen Blick verdienen.

Linear fährt ein straffes Spaltenraster in der App-Shell, ein 12-Spalten-Raster auf der Marketing-Site und einen Baseline-Rhythmus über beides. Die Issue-Liste, die Projektansicht, das Docs-Panel, alles rastet auf dasselbe vertikale und horizontale Raster ein. Es ist die sauberste Spaltenraster-Umsetzung in Produkt-UIs derzeit.

Vercel fährt ein 12-Spalten-Raster mit bewusstem Negativraum. Die Marketingseiten atmen, das Dashboard fährt ein dichteres Modulraster, und die Deploy-Ansicht, behandelt in der Ladezustand ist das Produkt, fährt ein hierarchisches Raster, in dem das Build-Log dominiert und alles andere ihm Platz macht.

Stripe ist das kanonische 12-Spalten-Raster auf der Marketingfläche und ein Modulraster im Dashboard. Die Dashboard-Karten rasten auf einheitliche Breiten ein, die Metrik-Blöcke teilen sich Höhen, und das ganze Produkt liest sich über dreißig und mehr Screens als eine Komposition. Die Aufschlüsselung zum Anti-Dashboard behandelt die Philosophie, die dieses Raster umsetzt.

Apple liefert hierarchische Raster auf Produktseiten, überall Baseline-Rhythmus und ein Modulraster im App Store und im Newsroom. Apples Rasterdisziplin ist das Nächste, was das Web an Schweizer Print kennt, und die meisten Produktteams unterschätzen, wie viel des Markeneindrucks allein vom Raster kommt.

Redaktionelle Raster: NYT, Figma und Anthropic

Die New York Times fährt ein Modulraster auf der Homepage, ein hierarchisches Raster bei großen Features und ein Manuskriptraster bei Long-Reads. Dieselbe Publikation nutzt bewusst drei Raster und wechselt je nach redaktioneller Aufgabe zwischen ihnen. Das ist die Lektion: Der Rastertyp ist eine Designentscheidung pro Fläche, keine globale Einstellung.

Figma fährt ein Spaltenraster im Datei-Browser, ein Modulraster in der Team-Bibliothek und ein eigenes Raster im Canvas selbst. Notion liefert ein Manuskriptraster für Docs und ein Modulraster für Datenbanken. Loops und Resend, beides neuere Produkte, liefern saubere 12-Spalten-Marketingraster und straffere Spaltenraster in der App. Anthropics Site fährt ein hierarchisches Raster, in dem ein einzelnes Statement jeden Abschnitt dominiert, eher an redaktionellen Layouts als an Produkt-UI orientiert. Der Text über Onboarding ohne Onboarding zeigt, wie sich Rasterdisziplin bis in First-Run-Flows fortsetzt, die oft als einmalige Layouts behandelt werden.

Wann man das Raster bricht (mit Absicht)

Das Raster zu brechen funktioniert nur, wenn das Raster so sichtbar ist, dass der Bruch als bewusste Entscheidung gelesen wird. Ohne Raster hinter dem Bruch ist das gebrochene Element nur ein schiefes Ding auf einer Seite.

Die Apple-Produktseite, die ein Hero-Bild über den Rand hinausragen lässt, bricht ein Raster, das überall sonst straff sitzt. Das NYT-Feature, in dem ein Foto mitten im Essay auf Full Bleed aufspringt, bricht ein Raster, das darüber und darunter disziplinierte Module fährt. Anthropics Homepage lässt gelegentlich ein einzelnes Zitat außerhalb der Achse in doppelter erwarteter Größe stehen, und der Move funktioniert, weil alles drumherum zugeknöpft ist.

Die Regel lautet: ein Bruch pro Fläche. Zwei Brüche lesen sich als kein Raster. Der Bruch sollte der am besten erinnerte Moment der Seite sein. Wenn du nicht auf das Raster zeigen kannst, das das Element bricht, brichst du kein Raster, du dekorierst ein unstrukturiertes Layout. Der Glossareintrag zum Wireframe behandelt die frühe Entscheidung, auf welches Raster du dich festlegst.

Die Disziplin bei Einstellungsseiten in das Settings-Page-Problem ist eine verwandte Lektion. Einstellungsseiten sind meist der Ort, an dem Rasterdisziplin zusammenbricht, weil sich jede Einstellung anders genug anfühlt, um ein eigenes Layout zu verdienen. Tut sie nicht. Halte das Raster, lass den Inhalt darin variieren.

Das Raster ist die Marke, auch wenn niemand darauf zeigt

Wenn du bei jedem in diesem Artikel erwähnten Produkt Farben, Schrift und Bildwelt entfernst, wären die Raster immer noch erkennbar. Linears Raster würde sich immer noch wie Linear anfühlen. Stripes Raster würde sich immer noch wie Stripe anfühlen. Das Raster ist das tiefste Marken-Artefakt, das ein Produkt ausliefert, weil es das ist, das der Nutzer fühlt, ohne es je bewusst zu sehen.

Wähle einen Rastertyp, wähle eine Spaltenzahl, wähle eine Baseline-Einheit. Halte sie ein Jahr lang über jede Fläche, und die Marke beginnt, aus der Struktur zu entstehen statt aus der Oberflächenbehandlung. Das ist das ganze Geheimnis, das die Schweizer Schule lehrte und das die meisten Produktteams immer wieder neu lernen. Das Raster macht die Arbeit. Der Rest ist Dekoration, die gelingt oder scheitert, je nachdem, ob das Raster da war, um sie zu halten.

FAQ

Was ist der Unterschied zwischen einem Spaltenraster und einem Modulraster?

Ein Spaltenraster teilt die Fläche nur in vertikale Spalten, sodass Layoutblöcke eine oder mehrere Spalten überspannen und der Rhythmus horizontal ist. Ein Modulraster teilt die Fläche in beide Richtungen in Zellen, Spalten und Zeilen, sodass Blöcke auf Zellen einrasten und Dichte zu einer gestalteten Eigenschaft wird. Spaltenraster bedienen Marketingseiten und die meisten App-Shells. Modulraster bedienen Dashboards, redaktionelle Layouts und jede UI, in der viele kleine vergleichbare Einheiten als System gelesen werden sollen.

Warum ist das 12-Spalten-Raster der Standard?

12 ist die am besten teilbare kleine Zahl. Sie lässt sich sauber in 1, 2, 3, 4, 6 und 12 teilen, was fast jedes Layoutmuster abdeckt (volle Breite, Hälften, Drittel, Viertel, Sechstel) ohne Brüche. Bootstrap hat sie 2011 kodifiziert, Tailwind liefert sie als Standard, und jedes größere Designsystem seither hat die Wahl übernommen, weil Mathematik eben Mathematik ist.

Brauche ich noch ein CSS-Framework, jetzt wo es CSS Grid gibt?

Für Layout nein. display: grid mit grid-template-columns: repeat(12, 1fr) und gap ist ein 12-Spalten-Raster in drei Zeilen CSS. Frameworks wie Bootstrap und Tailwind bringen Mehrwert durch Komponenten-Konventionen, Utility-Kurzschreibweisen und teamweite Konsistenz, aber das Layout-Primitiv selbst ist jetzt ein Browser-Feature. Nutze das Framework, wenn es dein Team schneller macht. Nutze es nicht, weil du glaubst, du bräuchtest es für Raster.

FAQ: Das Raster ausliefern und brechen

Wie halte ich den Baseline-Rhythmus in einem echten Produkt?

Wähle eine Basiseinheit, meist 8 Pixel. Mach jedes Padding, jede Margin, jede Zeilenhöhe und jede Komponentenmaße zu einem Vielfachen dieser Einheit. Fließtext mit 16 Pixel und 24 Pixel Zeilenhöhe.

Überschriften mit 32, 40, 48 oder 56 und Zeilenhöhen von 40, 48, 56 oder 64. Abschnittsabstand 96 oder 128. Die Disziplin ist langweilig, das Ergebnis ist eine Seite, die sich wie ein fertiges Produkt liest statt wie ein Entwurf.

Wann sollte ich das Raster brechen?

Einmal pro Fläche, wenn das Raster so sichtbar ist, dass der Bruch als bewusst gelesen wird. Der Bruch sollte der am besten erinnerte Moment der Seite sein. Wenn du nicht auf das Raster zeigen kannst, das das Element bricht, hat die Seite noch kein Raster, sondern ein Layout. Repariere zuerst das Raster, brich es danach.

CTA

Wenn du ein Team willst, das Rastersysteme als Rückgrat des Produkts gestaltet statt als Nachgedanken kurz vor dem Launch, hire Brainy. Wir liefern Produkte, in denen das Raster die Arbeit macht, die Marke auf einen Blick lesbar ist und der Rhythmus über jede Fläche hält. Müller-Brockmann hätte zugestimmt. Deine Nutzer werden es auch, selbst wenn sie nie erfahren, welches Raster sie gerade ansehen.