Zwei Websites, gleiche Texte, gleiche Bilder. Die eine wirkt wie aus einem Guss, die andere wie in einer Mittagspause zusammengeschoben.
Der Unterschied liegt fast nie im Inhalt. Er liegt im Website Layout: einem unsichtbaren Raster, an dem jedes Element hängt. In dieser Lektion baust du dieses Raster selbst, Bauteil für Bauteil.
Kurzantwort
Was ist ein Website-Layout?
Ein Website-Layout ist der Bauplan einer Seite: Ein zentrierter Container begrenzt die Breite der Inhalte, ein Spaltenraster ordnet, was nebeneinandersteht, und ein Stapel aus Sektionen ordnet, was untereinandersteht.
Dieses Raster sieht der Besucher nie, aber er spürt es. Seiten, die teuer wirken, haben eines. Seiten, die billig wirken, haben keines.
📌 Für wen ist das relevant: Für alle, die eine Website beauftragen, abnehmen oder selbst bauen und wollen, dass sie geordnet wirkt und zum Anfrage-Button führt.
- Jedes Bauteil lernst du an der Startseite der Schreinerei Brenner, vom Chaos bis aufs Raster
- Du brauchst keine Mathematik: zwei, drei oder vier Spalten decken fast jeden Fall ab
- Am Ende nimmst du ein komplettes Layout mit eingeblendetem Raster und fünf Prüffragen ab
Das lernst du in dieser Lektion
Du kannst die Containerlogik deiner Seite prüfen und erkennst, wo Text zu breit zum Lesen läuft.
Du kannst für jeden Inhaltstyp die Spaltenzahl festlegen und hältst gleiche Sorten gleich breit.
Du kannst die Sektionsfolge deiner Startseite skizzieren, mit einem Job und einer Kernaussage pro Sektion.
Du kannst die Lesereihenfolge eines Layouts nachvollziehen und ein fertiges Layout mit eingeblendetem Raster abnehmen.
Inhalt
01 ·
Was ein Layout leistet: der unsichtbare Bauplan
Stell dir zwei Fassungen derselben Startseite vor, mit identischen Texten und Fotos. Die eine wirkt professionell, die andere billig zusammengeschoben. Was du da spürst, ist die Anwesenheit oder Abwesenheit eines Bauplans.
Dieser Bauplan ist das Layout: ein Raster aus unsichtbaren Linien, an denen jedes Element der Seite hängt. Auf teuren Seiten siehst du das Raster nie, aber es arbeitet in jedem Sichtfeld. Alles endet an gemeinsamen Linien, Gleichartiges hat gleiche Breiten, und die Abschnitte folgen einem Takt.
Unser Beispiel bleibt die Schreinerei Brenner, die fiktive Möbelmanufaktur aus der Prinzipien-Lektion. Ihre Startseite hat gute Fotos und klare Texte, aber die Inhalte sind einfach untereinandergeworfen. Textzeilen laufen bis an den Bildschirmrand, drei Leistungskacheln haben drei verschiedene Breiten, und kein Element teilt sich eine Linie mit einem anderen.
Schaubild: die Brenner-Startseite ohne und mit Bauplan. Kein Inhalt wurde geändert, nur die Anordnung.
Ein Rahmensatz für die ganze Lektion, damit du weißt, worauf du dich stützt: Alle Pixelwerte und Blickmuster, die hier auftauchen, sind Handwerkskonvention, keine Naturgesetze. Sie sind der geteilte Standard, mit dem Designer weltweit arbeiten, und genau deshalb kannst du dich an ihnen orientieren.
Ein Layout besteht aus drei Bauteilen, und jedes bekommt in dieser Lektion eine eigene Sektion.
| Bauteil | Welche Frage es beantwortet | Bei der Schreinerei Brenner |
|---|---|---|
| Container | Wie breit dürfen die Inhalte laufen? | Textzeilen enden an einer festen Linie statt am Bildschirmrand |
| Spalten | Was steht nebeneinander, und wie breit? | Drei Leistungen, drei gleich breite Kacheln |
| Sektionen | Was steht untereinander, und in welchem Takt? | Hero, Leistungen, Referenzen, Anfrage als klarer Stapel |
Welche Inhalte überhaupt auf die Startseite gehören, hast du in der Lektion zu Wireframes und Seitenstruktur geklärt. Das Layout beantwortet die Frage danach: wie diese Inhalte angeordnet werden, damit die Seite nach Plan aussieht statt nach Zufall.
Damit hast du ab sofort Vokabular für ein Gefühl. Eine Seite wirkt nicht “irgendwie unaufgeräumt”, sondern: Der Text hat keine Begrenzung, die Kacheln haben keine gemeinsame Breite, die Abschnitte haben keinen gemeinsamen Takt. Jede dieser drei Diagnosen bekommt jetzt ihr Werkzeug.
02 ·
Container und Inhaltsbreite: nichts läuft bis zum Rand
Die erste Layout-Entscheidung ist die einfachste und wird am häufigsten übersprungen: Inhalte laufen nie über die volle Bildschirmbreite. Sie stehen in einem Container, einer zentrierten Spalte mit fester Maximalbreite, links und rechts von Luft gerahmt.
Für gemischte Inhalte, also Sektionen mit Kacheln, Bildern und kurzen Texten, hat sich eine Containerbreite von rund 1100 bis 1200 Pixeln eingebürgert. Reiner Lesetext bekommt eine deutlich schmalere Spalte von etwa 700 bis 800 Pixeln. Der Grund ist mechanisch: Je länger die Zeile, desto öfter verliert das Auge beim Sprung in die nächste Zeile die Spur.
Auf einem großen Monitor ist der Unterschied dramatisch. Ohne Container läuft ein Absatz über 1800 Pixel Breite, und aus einem lesbaren Text wird eine Tapete. Mit Container bleibt derselbe Absatz eine ruhige Spalte in der Mitte, egal wie groß der Bildschirm ist.
Sektion vollbreit, Inhalt begrenzt
Der Container erklärt auch, wie die großen Farbflächen auf modernen Websites funktionieren. Die graue oder dunkle Fläche einer Sektion darf über die volle Breite laufen, aber der Inhalt darin bleibt im Container. Zwei Breiten, eine Regel: Die Fläche gehört der Sektion, der Inhalt gehört dem Container.
Für die Schreinerei Brenner heißt das: Ihre Leistungs-Sektion bekommt einen vollbreiten hellgrauen Hintergrund, damit sie sich vom Hero absetzt. Die drei Kacheln darin enden aber an denselben Linien wie die Headline darüber und das Anfrage-Formular darunter.
Schaubild: die Containerlogik. Eine Seite hat mehrere Breiten, aber alle sind Entscheidungen, keine Zufälle.
💡 Merke
Vollbreit ist immer die Fläche, nie der Inhalt. Wenn auf deiner Seite Text von Bildschirmrand zu Bildschirmrand läuft, fehlt ein Container, und die Seite wirkt sofort unfertig, egal wie gut der Text ist.
💡 Praxis-Tipp
Mach heute den Zeilenbreiten-Check: Öffne deine Website am größten Monitor, den du hast, such den längsten Absatz und zähl die Zeichen einer vollen Zeile, Leerzeichen mitgezählt. Als angenehm lesbar gilt der Bereich um 50 bis 80 Zeichen.
Landest du deutlich über 90, ist dein Text zu breit zum Lesen. Die Lösung ist eine Maximalbreite für die Textspalte, in jedem Baukasten eine Einstellung und im Code eine einzige Zeile.
Für die Conversion heißt das: Zu breiter Text ist ein leiser Abbruchgrund. Ein Interessent, der beim Zeilenwechsel zweimal verrutscht, liest den dritten Absatz nicht mehr, und wer nicht liest, fragt nicht an.
Damit kannst du die Containerlogik jeder Seite prüfen, deiner eigenen zuerst. Endet der Inhalt an einer festen Linie, läuft die Farbfläche trotzdem vollbreit, und hat der Lesetext seine schmalere Spalte?
03 ·
Spalten: das 12er-Raster ohne Mathematik
Innerhalb des Containers ordnet ein Spaltenraster, was nebeneinandersteht. Der Standard des Fachs ist das 12er-Raster: Der Container wird gedanklich in zwölf gleich breite Spalten mit gleichen Zwischenräumen geteilt, und jedes Element belegt eine Anzahl dieser Spalten.
ℹ️ Warum ausgerechnet zwölf?
Weil zwölf sich durch zwei, drei, vier und sechs teilen lässt. Ein und dasselbe Raster trägt damit alle Aufteilungen, die du im Alltag brauchst: zwei Hälften, drei Drittel, vier Viertel. Ein Zehner-Raster könnte keine Drittel, ein Neuner keine Viertel, deshalb hat sich die Zwölf durchgesetzt.
Die gute Nachricht: Du rechnest dabei nie. Du triffst pro Inhaltstyp genau eine Entscheidung, nämlich ob er in zwei, drei oder vier Spalten steht. Alles Weitere erledigt das Raster.
Schaubild: das 12er-Raster und seine drei Alltagsteilungen. Mehr Varianten brauchst du für die meisten Seiten nicht.
| Spalten | Teilung | Typische Inhalte |
|---|---|---|
| 2 | 6 + 6 | Text neben Bild, Formular neben Kontaktdaten |
| 3 | 4 + 4 + 4 | Leistungen, Pakete, Teammitglieder |
| 4 | 3 + 3 + 3 + 3 | Kundenlogos, Zahlen, Auszeichnungen |
| 1 | volle Containerbreite | Lesetext, Zitate, alles, was Konzentration braucht |
Dazu kommen zwei Regeln für den Einsatz. Erstens: Die Zwischenräume zwischen den Spalten sind überall gleich breit, in jeder Reihe, in jeder Sektion. Zweitens, die wichtigste Spaltenregel überhaupt: gleiche Sorte, gleiche Breite.
Gleiche Sorte, gleiche Breite bedeutet: Drei Leistungskacheln sind drei gleich breite Kacheln, immer. Sobald eine breiter ist als die anderen, sucht das Auge nach dem Grund, und wenn es keinen gibt, wirkt die Seite fehlerhaft. Dass jede Kante einen Partner braucht, kennst du aus der Lektion zu den Design-Prinzipien, und das Raster ist der Ort, an dem diese Partnerkanten entstehen.
So sieht dieser Handgriff an der Leistungs-Sektion der Schreinerei Brenner aus:
Schaubild: die Leistungs-Sektion der Schreinerei Brenner vor und nach dem 3er-Raster. Die Inhalte der Kacheln sind unverändert.
💡 Merke
Gleiche Sorte, gleiche Breite. Drei Angebote, drei gleich breite Kacheln, drei gleiche Zwischenräume. Ein Breitenunterschied ohne Bedeutung ist für das Auge ein Fehler, und Fehler kosten Vertrauen.
💡 Praxis-Tipp
Mach heute den Kachel-Breiten-Vergleich: Screenshot deiner Leistungs- oder Angebotssektion, dann miss die Breite jeder Kachel und jeder Lücke, mit den Entwickler-Tools des Browsers oder einfach im Bildprogramm.
Gleiche Sorte, gleiche Breite, gleiche Lücke: Jede Abweichung notierst du. In Baukästen entstehen solche Abweichungen meist durch von Hand gezogene Spalten, die Reparatur ist ein vorgefertigtes Spalten-Element mit gleicher Teilung.
Für die Conversion heißt das: Gleiche Kachelbreiten machen deine Angebote vergleichbar. Der Besucher stellt drei Leistungen nebeneinander und wählt, statt sich zu fragen, warum eine Kachel größer ist als die anderen.
Ein Ausblick gehört noch dazu: Auf dem Smartphone stapeln sich die Spalten übereinander, aus drei Kacheln nebeneinander wird eine Spalte. Wie das Raster dabei umbricht, behandelt die Lektion zum Responsive Design. Damit kannst du jetzt für jeden Inhaltstyp deiner Seite die Spaltenzahl festlegen: zwei, drei, vier oder bewusst eine.
04 ·
Der Sektionen-Rhythmus: eine Seite ist ein Stapel
Von oben betrachtet ist jede gute Startseite dasselbe: ein Stapel aus Sektionen. Jede Sektion hat einen Job und trägt genau eine Kernaussage. Sobald eine Sektion zwei Dinge gleichzeitig sagen will, sind es in Wahrheit zwei Sektionen.
Bei der Schreinerei Brenner sieht der Stapel so aus: Der Hero gibt das Versprechen, die Leistungen zeigen das Angebot, die Referenzen liefern den Beweis, der Ablauf nimmt die Unsicherheit, und die Anfrage-Sektion macht den Schritt leicht. Fünf Sektionen, fünf Jobs, fünf Aussagen.
Damit dieser Stapel als Rhythmus lesbar wird statt als Brei, gibt es zwei Werkzeuge. Das erste sind wechselnde Hintergründe: weiß, hellgrau, weiß, dunkel. Der Farbwechsel markiert die Grenze zwischen zwei Sektionen, ohne dass eine Linie gezogen werden muss.
Das zweite Werkzeug sind konsistente vertikale Abstände. Jede Sektion bekommt oben und unten dasselbe Padding, entnommen aus dem Abstandssystem, das du aus der Lektion zu den Design-Prinzipien kennst. Für Sektionen nimmst du die großen Stufen der Staffel, auf Desktop meist die größte, und dieselbe Stufe gilt dann für jede Sektion der Seite.
Das Zickzack-Muster bei Text und Bild
Für Reihen aus Text und Bild gibt es einen bewährten Rhythmusgeber: das Zickzack. In der ersten Reihe steht das Bild links und der Text rechts, in der nächsten Reihe umgekehrt, und so weiter. Der Wechsel hält die Seite beim Scrollen lebendig, ohne das Raster zu verlassen, denn beide Varianten sind dieselbe 2-Spalten-Teilung.
Schaubild: die Brenner-Startseite als Sektionsstapel. Jede Sektion hat einen Job, der Rhythmus entsteht aus Farbwechsel, gleichen Abständen und dem Zickzack.
💡 Merke
Eine Sektion, ein Job, eine Aussage. Kannst du die Kernaussage einer Sektion nicht in einem Satz sagen, sind es zwei Sektionen. Tragen zwei Sektionen dieselbe Aussage, ist es eine.
💡 Praxis-Tipp
Mach heute die Sektionsabstands-Messung: Nimm drei Sektionen deiner Startseite und miss jeweils den Abstand vom Sektionsrand bis zum ersten Inhalt, oben und unten. Sechs Werte, eine Minute Arbeit.
Findest du mehr als zwei verschiedene Werte, hat deine Seite keinen Takt. Leg eine Stufe fest und gib sie jeder Sektion oben wie unten, das allein lässt eine Seite spürbar geordneter wirken.
Für die Conversion ist der Rhythmus der Weg zum Ziel. Ein Besucher scrollt von Aussage zu Aussage, jede Sektion beantwortet eine Frage, und die letzte Sektion gibt ihm den Schritt. Ein klarer Stapel führt zum Anfrage-Button, ein Brei versandet vorher.
Damit kannst du die Sektionsfolge deiner eigenen Startseite skizzieren, auf Papier in fünf Minuten. Eine Liste untereinander, pro Zeile ein Job, eine Kernaussage und die Hintergrundfarbe. Mehr ist ein Sektionsplan nicht.
05 ·
Above the fold und der Blickverlauf
Above the fold heißt der Teil der Seite, der ohne Scrollen sichtbar ist. Er entscheidet, ob überhaupt gescrollt wird. Hinein gehören drei Antworten: wer du bist, was du anbietest und was der Besucher als Nächstes tun kann.
ℹ️ Woher der Begriff kommt
“The fold” ist der Falz der Zeitung. Was über dem Falz stand, sah man am Kiosk zuerst, dorthin kam die wichtigste Schlagzeile. Auf der Website ist der Falz die Unterkante des Bildschirms, und er liegt je nach Gerät woanders, deshalb ist er eine Zone, keine exakte Linie.
Wie du dieses erste Sichtfeld im Detail baust, mit Headline, Bild und Button, bekommt später im Kurs eine eigene Hero-Lektion. Hier geht es um die Layoutfrage darunter: In welcher Reihenfolge wandert der Blick über die Seite?
Dafür arbeitet das Handwerk mit zwei Blickmustern, und beide fallen unter den Rahmensatz vom Anfang: Faustregeln aus der Werkstatt, keine Messgesetze. Das F-Muster gehört zu textlastigen Seiten, das Auge läuft an der linken Kante hinunter und schert bei Überschriften nach rechts aus. Das Z-Muster passt zu luftigen Startseiten, der Blick geht oben von links nach rechts, dann diagonal durchs Sichtfeld und landet unten rechts.
Aus beiden Mustern folgen dieselben zwei Handgriffe. Erstens: Das Wichtigste steht links oben, denn dort starten beide Verläufe. Zweitens: Der Call-to-Action taucht im Verlauf mehrfach auf, einmal im ersten Sichtfeld, einmal nach dem Beweis, einmal am Ende der Seite.
Für die Schreinerei Brenner heißt das konkret: Links oben steht “Möbel nach Maß aus einer Hand”, nicht das Logo in Übergröße. Und der Anfrage-Button erscheint dreimal, im Hero, unter den Referenzen und als eigene Abschluss-Sektion. Wer nach der dritten Sektion überzeugt ist, muss nicht zurückscrollen, um anzufragen.
So prüfst du die Lesereihenfolge deines eigenen Layouts: Schau auf die Seite, als sähest du sie zum ersten Mal, und nummeriere mit dem Finger, was du in welcher Reihenfolge wahrnimmst. Dann vergleich die Nummern mit der Reihenfolge, die dein Besucher braucht: erst das Versprechen, dann das Angebot, dann der Beweis, dann der Schritt. Wo beides auseinanderläuft, korrigierst du über Größe und Position im Raster, das Element rückt nach links oben oder tritt zurück.
Für die Conversion heißt das: Der CTA liegt nicht irgendwo auf der Seite, sondern auf dem Weg des Blicks. Ein Button, der im Verlauf wiederkehrt, wird gefunden, ohne gesucht zu werden.
06 ·
Die Brenner-Startseite komplett auf dem Raster
Jetzt setzt du alle drei Bauteile zusammen. Container, Spalten und Sektionen greifen ineinander, und genau so nimmst du ein Layout ab: mit eingeblendetem Raster. So sieht die fertige Brenner-Startseite aus, wenn das Raster sichtbar geschaltet ist:
Schaubild: die komplette Brenner-Startseite mit eingeblendetem Raster. Jedes Element sitzt auf Spalten, nichts steht “ungefähr da”.
Auffällig ist, wie unspektakulär das Ergebnis wirkt, und genau das ist der Punkt. Ein gutes Layout fällt nicht auf, es lässt den Inhalt auffallen. Die Ordnung arbeitet im Hintergrund, während der Besucher einfach nur schnell versteht, was die Schreinerei anbietet.
So blendest du das Raster in der Praxis ein: In Design-Tools wie Figma ist die Rasteransicht eingebaut, dein Designer kann sie dir mit einem Tastendruck zeigen. Für eine fertige Website reicht ein Screenshot, über den du im Bildprogramm senkrechte Linien an den Containerkanten und Spaltengrenzen ziehst. Dann gehst du diese Prüfliste durch:
| Prüffrage | Worauf du schaust |
|---|---|
| 1. Container? | Endet der Inhalt links und rechts an einer festen Linie, auch in farbigen Sektionen? |
| 2. Spalten gleich? | Haben gleichartige Kacheln dieselbe Breite, dieselbe Oberkante und denselben Zwischenraum? |
| 3. Sektionsabstände konsistent? | Hat jede Sektion oben und unten dasselbe Padding aus derselben Stufe? |
| 4. Eine Aussage pro Sektion? | Kannst du für jede Sektion Job und Kernaussage in einem Satz sagen? |
| 5. Blickverlauf? | Steht das Wichtigste links oben, und taucht der CTA im Verlauf mehrfach auf? |
Experten-Tipp aus der Agentur
Lass dir in jeder Design-Abnahme den Entwurf einmal mit eingeblendetem Raster zeigen, bevor über irgendetwas anderes gesprochen wird. Elemente, die knapp neben ihrer Spalte sitzen, springen dann sofort ins Auge, und aus einer Geschmacksdiskussion wird eine Diskussion über Linien. Das Raster ist der schnellste Weg, ein Design-Gespräch sachlich zu machen.
Pascal Cabitza
Geschäftsführer Ostend Digital
Damit kannst du ein Layout abnehmen wie ein Profi: Raster einblenden, fünf Fragen stellen, Abweichungen benennen. Du diskutierst nicht mehr, ob dir der Entwurf gefällt, sondern ob er auf seinem eigenen Raster steht.
07 ·
💡 Recap
Website-Layout in 30 Sekunden:
- Ein Layout ist ein Bauplan aus drei Bauteilen: Container begrenzen die Breite, Spalten ordnen das Nebeneinander, Sektionen ordnen das Untereinander
- Nichts läuft bis zum Rand. Rund 1100 bis 1200 px für gemischte Inhalte, 700 bis 800 px für Lesetext, und vollbreit ist immer die Fläche, nie der Inhalt
- Das 12er-Raster braucht keine Mathematik: zwei Spalten für Text plus Bild, drei für Leistungen, vier für Logos, und gleiche Sorte heißt gleiche Breite
- Eine Seite ist ein Stapel Sektionen mit einem Job und einer Aussage pro Sektion, wechselnden Hintergründen, gleichen Abständen und Zickzack bei Text und Bild
- Der Blick startet links oben. Das Wichtigste steht dort, und der CTA kehrt im Verlauf wieder: im Hero, nach dem Beweis, am Ende
- Abgenommen wird mit eingeblendetem Raster: Container, gleiche Spalten, gleicher Takt, eine Aussage pro Sektion, Blickverlauf zum Button
08 ·
Selbstcheck: kannst du das anwenden?
Auf einem 27-Zoll-Monitor läuft der Text deiner Über-uns-Seite von Rand zu Rand, und Besucher springen früh ab. Was diagnostizierst du?
Ein Container-Problem: Der Lesetext hat keine Maximalbreite. Zähl zur Kontrolle die Zeichen einer vollen Zeile, liegst du deutlich über 90, ist die Zeile zu lang, das Auge verrutscht beim Zeilenwechsel. Die Lösung ist eine schmalere Textspalte von etwa 700 bis 800 Pixeln, in jedem Baukasten eine einzige Einstellung.
Deine neue Startseite braucht vier Leistungen, acht Kundenlogos und einen längeren Vorstellungstext. Welche Spaltenzahlen legst du fest?
Vier Leistungen: vier Spalten, wenn die Kacheln wenig Text tragen, sonst zwei Reihen à zwei Spalten. Acht Logos: vier Spalten in zwei Reihen, Logos sind der klassische Vierer-Fall. Der Vorstellungstext bekommt eine Spalte in der schmalen Lesebreite, und in allen Reihen gilt: gleiche Sorte, gleiche Breite, gleiche Zwischenräume.
Deine Seite hat gute Inhalte, wirkt aber wie ein Brei: alles weiß, die Abstände mal eng, mal weit. Was fehlt, und was tust du zuerst?
Es fehlt der Sektionen-Rhythmus. Skizzier zuerst den Stapel: Welche Sektionen gibt es, und trägt jede genau einen Job und eine Kernaussage? Dann gibst du jeder Sektion dasselbe Padding oben und unten aus einer festen Stufe und setzt wechselnde Hintergründe als Taktgeber, weiß, hellgrau, weiß, dunkel.
Dein Designer schickt den fertigen Startseiten-Entwurf zur Freigabe. Wie nimmst du ihn ab, ohne über Geschmack zu reden?
Lass dir den Entwurf mit eingeblendetem Raster zeigen und geh die fünf Prüffragen durch: Endet der Inhalt an den Containerlinien, sind gleichartige Kacheln gleich breit mit gleichen Abständen, ist das Sektions-Padding überall gleich, trägt jede Sektion eine Aussage, und führt der Blickverlauf zum Button? Jede Abweichung benennst du als Beobachtung am Raster, nicht als Gefühl.
Besucher rufen an und sagen, sie hätten das Anfrageformular nicht gefunden. Das Layout ist sauber gerastert. Wo suchst du den Fehler?
Im Blickverlauf, denn ein sauberes Raster garantiert noch keine richtige Lesereihenfolge. Nummeriere, was du beim ersten Blick in welcher Reihenfolge wahrnimmst, und prüf, ob der CTA auf diesem Weg liegt. Meist fehlt die Wiederholung: Der Button gehört ins erste Sichtfeld, hinter den Beweis und ans Seitenende, damit niemand zurückscrollen muss.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (2 Einträge)
- Alle Zahlenwerte dieser Lektion (Containerbreiten um 1100 bis 1200 px, Lesebreite 700 bis 800 px, Zeilenlänge 50 bis 80 Zeichen, das 12er-Raster mit seinen Teilungen) sowie die Blickverlaufs-Muster F und Z: verbreitete Handwerkspraxis des Webdesigns, Einordnung Ostend Digital, Stand 08/2026. Sie sind im Text bewusst als Konventionen formuliert, nicht als Messwerte
- Das durchlaufende Beispiel “Schreinerei Brenner” ist frei erfunden und bezeichnet keine echte Firma. Alle sechs Schaubilder sind eigene Darstellungen, Ostend Digital, Stand 08/2026
Du willst eine Website, die auf einem sauberen Raster steht und Anfragen bringt?
Wir bauen Layouts nach genau diesem Bauplan, vom Sektionsstapel bis zur Abnahme mit eingeblendetem Raster, und begründen dir jede Entscheidung an der Aufgabe deiner Seite.
