Das Broken Grid Webdesign und die neuen Funktionen

Broken Grid – seit etwa 3 Jahren am Markt und doch recht unbekannt. Wenn Sie eine neuwertige Website wünschen, wird dieses Design gerne von Webentwickler eingesetzt.

Kurz zusammengefasst erklärt: Das sogenannte Broken Grid Webdesign ist recht flexibel und erzielt diverse dynamische Effekte, denn sämtliche Layouts, die auf Raster und Gitter beschränkt sind, werden durchbrochen. Das bedeutet, dass manche Bereiche (z.B. Textbereich über Bild-Bereich) überlappend angezeigt werden. Eine Online-Seite wirkt dadurch neuwertig und zieht neugierige Blicke auf sich.

Bevor ich auf die neuen Trends eingehe, möchte ich Ihnen die Design-Option “Broken Grid” näher bringen. In dem Begriff steckt das Wort “Grid”. Dieser wird im CSS (Cascading Stylesheets = Design-Style-Sheet Sprache) häufig angewendet und ist eben ein zwei-dimensionales Gitter-basierendes Layout-System. Einfacher gesagt ist ein Grid nichts anderes als ein Raster von durchdachten Linien in Zeilen und Spalten einer Website. Entworfen wurde es, um etwaige Stylesheets Probleme zu vermeiden. Und bei Broken Grid werden diese gedachten Linien einfach durchbrochen.

Falls Sie sich immer noch nichts unter Broken Grid vorstellen können, möchte ich Ihnen ein Beispiel näher bringen. Wie Sie in den Bildern darunter erkennen können werden diverse Abschnitte überlappend angezeigt. Häufig sieht man entweder Bilder, die sich über dem Textbereich befinden oder Tabellen mit Medien, die über einen Header (Slider) angezeigt werden. Wenn Sie eine Website mit WordPress erstellen, finden Sie von manchen Design-Vorlagen (Themes) vorgefertigte Templates, die in dieser Design-Art angezeigt werden.

Häufig wird dieses Layout von den Webentwicklern verwendet, um einer Webpräsenz ein neuwertiges Flair zu verleihen. Denn beispielsweise erhalten Textbereiche eine völlig neue Bedeutung, wenn diese teilweise über einem Bild angezeigt werden. Die Leser können sich darunter eher etwas vorstellen. Interessant wirken auch diverse Tabellen, die mit Texten und / oder Bildern bestückt wurden, die über einen Header-Bereich angezeigt werden. Dieses Layout findet man recht oft in einer Startseite eines Online-Shops. Dort finden die Kunden  Erst-Informationen sowie Vorteile zum Shop. Da dies die Neugierde des Kunden erweckt, habe ich das Broken Grid Layout im Krystmedia Shop verwendet.

Wie versprochen stelle ich Ihnen noch weitere Website-Trends aus dem Jahr 2021 vor. Diese werden ebenfalls recht oft und gerne von Webentwicklern bei der Erstellung eingesetzt.

Diese sogenannten interaktiven 3D Elemente sieht man recht oft in Slider (= mehrere Bereiche mit verschiedenen Elementen – Medien mit Texten, diese wechselnd angezeigt werden.) Anstatt von Bildern werden Videos angezeigt, diese beispielsweise auf den Mauszeiger reagieren und sich dadurch ändern.

Das Theme “Avada”, mit diesem ich hauptsächlich arbeite,  bietet beispielsweise Slider zum kostenlosen Download an, wenn Sie diese Designvorlage nützen.

Ebenfalls interessant und auf die Besucher anziehend wirkt der sogenannte “Parallaxe Effekt”. Das Besondere daran ist, dass sich der Inhalt eines Sliders ständig verändern kann. Ähnlich wie in einem Werbeausschnitt werden diverse Elemente beispielsweise von rechts nach links bewegt. Wenn beispielsweise eine Handlungsaufforderung in einem Call-to-Action Bereich befindet und der Hintergrund mit einem Parallaxe Effekt ausgerüstet wurde, dann steigt dadurch die Chance, um mehr Reaktion zu erreichen, enorm an.

Die Design-Vorlage Avada bietet dem Kunden beispielsweise Slider mit Parallaxe Effekten an.

Besonders interessant wirken sich eingeblendete Streams aus diversen Social Media Portalen aus. Denn die Besucher werden dadurch über diverse Neuigkeiten informiert, ohne dass sie beispielsweise zu Facebook switchen müssten. Diese Streams eignen sich beispielsweise in diversen Blogs.

Avada bietet beispielsweise die Option an, Social Media Streams mit x-beliebigen Slider zu verbinden.

Fazit – Das neuwertige Design

Broken Grid ist eine Option, um einer Internet-Seite effizient und schnell ein völlig frisches dynamisches Layout zu verpassen und erweckt die Neugierde und Interesse Ihrer Leser. Wenn Sie sich ein Design dieser Art wünschen, dann freue ich mich auf einen digitalen Austausch mit Ihnen.