Web Design: Broken Grid Layout
Seiten schneller und effektiver gestalten im Webdesign – das Grid-System macht es möglich.
Das sogenannte Broken Grid Layout hat zum Ziel, eine Balance zwischen Kreativität und funktionierender Benutzeroberfläche innerhalb des Webdesigns zu schaffen. Dabei durchbricht es Seitenlayouts, die auf Rastern und Gittern fußen, und erzielt dynamische Effekte. Die Aufmerksamkeit der Websitebesucher:innen richtet sich dabei auf die Einzigartigkeit!
Was Broken Grid Layout im Detail bedeutet und wie man es anwendet, erfahren Sie in unserem heutigen Blog.
Was ist ein Grid?
Das CSS Grid Layout oder auch einfach nur „Grid“ ist ein zweidimensionales, gitterbasiertes Layoutsystem. Es zielt darauf ab, die Art und Weise, wie gitterbasierte Benutzeroberflächen entworfen werden, vollständig zu ändern. Seit Jahren ist CSS ein bewährtes System. Anfangs verwendete man Tabellen. Floats, Positionierungen und weitere Versuche scheiterten, da sie wichtige Funktionen, wie beispielsweise die vertikale Zentrierung, ausließen. Flexbox schien eine Lösung zu sein, drehte sich allerdings nur um eindimensionale und nicht um komplexe zweidimensionale Layouts. Demnach ist Grid das allererste CSS-Modul, das speziell entwickelt wurde, um diese Layoutprobleme zu lösen.
How to Broken Grid
Das Broken Grid Layout verwendet asymmetrisch angeordnete Texte, überlappende Bilder und relativ unregelmäßige Formen – ohne, dass die Benutzerfreundlichkeit darunter leidet.
Im Normalfall sind standardisierte Rastervorlagen und Layouts im Web häufiger zu sehen als Broken Grid Layouts. Sie verbinden UX, Flat-Design und intuitive Userführung zu einem überzeugenden Weblayout. Dabei liefern sie dem Webdesigner eine logische Vorlage, indem sie für Stabilität und Struktur sorgen. Dabei ist das Grid eine Hilfe, ganz sicher aber keine Garantie, für exzellente Arbeit. Und: Ein guter Webentwickler weiß, wie er die Gitter nutzt bzw. wann er sie durchbricht. So kann er etwa für eine Website ein anderes Layout wählen, um dadurch die Sichtbarkeit der jeweiligen Marke zu steigern und Conversions zu erhöhen.
Das Grid ist für die Erstellung einer Website die Strukturvorlage, um Texte, Bilder, Videos und andere Elemente auf dem Bildschirm passend anzuordnen. Es ermöglicht dabei eine visuelle Sprache, wie beispielsweise das bekannte Bootstrap oder das 960.gs, die den Workflow bei der Webentwicklung entscheidend verbessern. Doch diese Rastervorlagen können die Entfaltung auch behindern, indem sie etwas vorhersehbar wirken.
Wann wird Broken Grid verwendet?
Webentwickler nutzen das Broken Grid Layout für ungewöhnliche Positionierungen, die nicht relativ passend zueinander sind. Dafür werden Texte, Überschriften, Bilder, Leerzeichen, ungewöhnliche Header und viele weitere Elemente, die scheinbar zufällig zusammengewürfelt sind, gemixt, um neugierige Kund:innen zu erstaunen. Bei wichtigen Attributen, wie beispielsweise dem Warenkorb, wird allerdings häufig auf eine differenzierte Darstellung verzichtet, denn die Nutzer:innen sollen nicht komplett in ihren gewohnten Prozessen gestört werden.
Unser Fazit: Das Grid-System ist eine hervorragende Möglichkeit, um einer Website schnell und effizient ein dynamisches Layout zu verpassen. Sie möchten Ihre Website überarbeiten? Wir freuen uns auf den digitalen Austausch!