Üblicherweise sind die Inhalte einer Website in Rastern, sogenannten „Grids“, angeordnet. Die Texte und Bilder werden durch die feste Struktur für Nutzer einfach erfassbar.
Jedoch entstehen durch starre Raster auch relativ monotone und austauschbare Webdesigns. Soll eine Seite prägnant wirken und sich stärker von der Konkurrenz abheben, bietet sich ein „Broken Grid Layout“ an. Durch ein bewusst aufgebrochenes Raster durften wir der Künstler-Website von Stefanie Brehm eine ganz einzigartige Wirkung verleihen.

Digitalmedien

„Standard“-Raster im Vergleich zum Broken Grid

Ein Raster ist eine Kombination von Zeilen und Spalten. Horizontale und vertikale Linien bilden Rechtecke, in denen Inhalte wie Texte, Bilder oder Videos platziert werden können.
Typischerweise kommt auf modernen Websites ein 12-Spalten-Raster zum Einsatz. Nahe liegt, gleichmäßige Aufteilungen umzusetzen, wie 6+6 oder 4+4+4 usw. Möglich ist hier auch, dass sich ein Text über 4 Spalten und daneben ein Foto über 8 Rasterspalten erstreckt. Addiert man die Spalten zusammen, ergeben sich dabei immer 12 Spalten pro Abschnitt.

Auch ein Broken Grid Layout orientiert sich technisch gesehen an Spalten, setzt diese jedoch freier ein. Im Hinblick auf unser Beispiel könnte der Text auch 5 und das Foto 9 Spalten einnehmen. Als Ergebnis haben wir 14 Spalten pro Zeile, was im Konflikt zu unserem 12-Spalten-Raster steht. Eine Lösung wäre, die Inhalte um 2 Spalten überlappen zu lassen („Layering“). Somit wird das Raster aufgebrochen und ein Broken Grid Layout entsteht.

Standard-Layout mit getrennten Spalten (langweilig)
Standard-Layout mit getrennten Spalten (langweilig)
Broken Grid Layout mit überlappenden Spalten (spannend)
Broken Grid Layout mit überlappenden Spalten (spannend)
Standard-Layout mit getrennten Spalten, gekennzeichnet durch rote und blaue Hinterlegung
Standard-Layout mit getrennten Spalten, gekennzeichnet durch rote und blaue Hinterlegung
Broken Grid Layout mit überlappenden Spalten, gekennzeichnet durch violette Hinterlegung
Broken Grid Layout mit überlappenden Spalten, gekennzeichnet durch violette Hinterlegung

Die Überlagerung von Elementen muss nicht nur horizontal, sondern kann auch vertikal erfolgen. Typisch für ein gebrochenes Layout ist es außerdem, mit leeren Spalten zu arbeiten oder vertikale Linien aufzulösen. Der Weißraum (Whitespace) wird erhöht. Wie das Beispiel der Website von Stefanie Brehm zeigt, kann die Nutzung von großer, auffälliger Typografie das Broken Grid Layout in seiner Wirkung unterstützen – oder der Einsatz eines Parallax-Effekts (Ebenen, die sich beim Scrollen in unterschiedlichen Geschwindigkeiten bewegen).

Versetzter Text durch Ausbruch aus fester Zeilenbildung, dient der inhaltlichen Führung der Nutzer
Versetzter Text durch Ausbruch aus fester Zeilenbildung, dient der inhaltlichen Führung der Nutzer
Ausfüllen des vorhandenen Layout-Platzes durch Ausbruch aus horizontaler Reihenbildung
Ausfüllen des vorhandenen Layout-Platzes durch Ausbruch aus horizontaler Reihenbildung
Ausbruch aus der vertikalen sowie horizontalen Ausrichtung, Auflockerung des Layouts
Ausbruch aus der vertikalen sowie horizontalen Ausrichtung, Auflockerung des Layouts
Einsatz individueller, ebenfalls „zerstörter“ Typografie zur Unterstreichung des Layouts
Einsatz individueller, ebenfalls „zerstörter“ Typografie zur Unterstreichung des Layouts

Broken Grid Layouts schaffen Individualität

Grundsätzlich sind Broken Grid Layouts nur für bestimmte Arten von Webseiten geeignet. So ist ein experimentelles Raster beispielsweise für eine Website einer öffentlichen Einrichtung eher kontraproduktiv. Denn häufig wird hier großes Augenmerk auf einen leicht bedienbaren, barrierefreien Auftritt gelegt.

Handelt es sich jedoch um ein modernes Unternehmen oder eine Einzelperson, wo ein außergewöhnlicher Web-Auftritt passen würde, sollte man die Auflockerung des Layouts in Erwägung ziehen.
Für die Website der Künstlerin Stefanie Brehm hat das Broken Grid Layout seine Wirkung voll entfaltet. Das Webdesign unterstützt die individuellen Arbeiten unserer Kundin und liefert dem Besucher ein besonderes visuelles Erlebnis.

Wichtig ist, dass die Zugänglichkeit, Bedienbarkeit und Übersichtlichkeit nicht darunter leiden. Dazu ist eine enge Abstimmung zwischen Designer und Programmierer nötig. Ideen müssen auf Machbarkeit und weitere Aspekte der User Experience geprüft werden. Vieles bleibt letztendlich gemeinsam abzuwägen.
Aber scheuen Sie sich nicht, auch Ihre Website aus dem üblichen Rahmen ausbrechen zu lassen! Wir freuen uns auf den ersten Austausch!

Mehr Infos zur Referenz von Stefanie Brehm