{"id":1571,"date":"2024-11-24T10:14:55","date_gmt":"2024-11-24T09:14:55","guid":{"rendered":"https:\/\/thomas-sokolowski.com\/de\/?p=1571"},"modified":"2024-11-24T13:37:02","modified_gmt":"2024-11-24T12:37:02","slug":"moderne-grid-systeme","status":"publish","type":"post","link":"https:\/\/thomas-sokolowski.com\/de\/moderne-grid-systeme\/","title":{"rendered":"Moderne Grid-Systeme"},"content":{"rendered":"

Ein Grid-System ist ein Ger\u00fcst, das im Design verwendet wird, um Elemente strukturiert und konsistent anzuordnen. Es besteht aus einer Reihe horizontaler und\/oder vertikaler Linien, die die Seite in Abschnitte gliedern und Designern dabei helfen, Elemente wie Text, Bilder und Grafiken so zu platzieren, dass \u00dcbersichtlichkeit und \u00e4sthetischer Eindruck verbessert werden. Die Anzahl und Breite der Spalten und Zwischenr\u00e4ume folgen oft festgelegten strukturellen Richtlinien oder einem Designsystem. Dabei spielen insbesondere wahrnehmungspsychologische Aspekte eine entscheidende Rolle.<\/p>\n

Die Ber\u00fccksichtigung von Faktoren wie dem visuellen Wahrnehmungsablauf<\/strong>*1<\/sup>, der Millerschen-Zahl<\/strong>*2<\/sup> sowie relevanter Gestaltgesetze<\/strong>*3<\/sup> unterst\u00fctzt den Wahrnehmungsprozess und bildet die Grundlage f\u00fcr eine leichte Zug\u00e4nglichkeit.<\/p>\n

Eine wahrnehmungspsychologische Auseinandersetzung beim Grid-Entwurf ist sehr wichtig, da ein Grid das unsichtbare Grundger\u00fcst des Designs darstellt und \u2013 auch wenn es sp\u00e4ter f\u00fcr die Nutzer nicht mehr sichtbar ist \u2013 f\u00fcr die kompositorische Harmonie und Konsistenz des gesamten Designs verantwortlich ist. Dar\u00fcber hinaus kann ein konsistent angewendetes Grid-System selbst ein pr\u00e4gendes Gestaltungselement sein, welches dem gesamten Design wiedererkennbar, von anderen unterscheidbar und \u00e4sthetisch macht.<\/p>\n

 <\/p>\n

Grid vs. Layout-Grid<\/h2>\n

Ein \u00abGrid-System\u00bb<\/strong> besteht grunds\u00e4tzlich aus einem \u00abGrid\u00bb<\/strong> und einem \u00abLayout-Grid\u00bb<\/strong>. Dabei besteht das \u00abGrid\u00bb aus einer bestimmten Anzahl gleich grosser Einheiten und bildet das zugrundliegende Rastersystem (in der nachfolgenden Abbildung rot gekennzeichnet). Durch die Kombination dieser kleinsten Zellen entsteht ein \u00fcbergeordnetes \u00abLayout-Grid\u00bb (blau gekennzeichnet), an dem sich die Seitenelemente im Design ausrichten.<\/p>\n

\"Ein<\/a>

In der Regel gibt es f\u00fcr ein Design nur ein seiten\u00fcbergreifendes \u00abGrid\u00bb, aber je nach Seitentyp eine Reihe von \u00abLayout-Grids\u00bb. Hier sehen Sie ein asymmetrisches dreispaltiges Layout-Grid f\u00fcr eine Inhaltsseite aus einen meiner letzten Projekte. In der linken Spalte befindet sich eine sticky Inpage-Navigation, in der mittleren Spalte der Seiteninhalt und in der rechten Spalte eine Reihe von Funktions-Buttons.<\/p><\/div>\n

 <\/p>\n

\n

Keyfacts<\/strong><\/h3>\n

Begriff:<\/strong> Der Begriff \u00abGrid\u00bb stammt aus dem Englischen und bedeutet \u00abGitter\u00bb oder \u00abNetzwerk\u00bb.<\/p>\n

Synonyme:<\/strong> Auch Bezeichnungen wie \u00abGestaltungsraster\u00bb und \u00abRastersystem\u00bb werden verwendet.<\/p>\n

Ursprung:<\/strong> Grids haben ihren Ursprung im Buchdruck des 15. Jahrhunderts und wurden sp\u00e4ter von Designern wie Jan Tschichold, Josef M\u00fcller-Brockmann und der Schweizer Schule<\/strong><\/a>*4<\/sup> in den Designprozess integriert.<\/p>\n

<\/p>\n<\/blockquote>\n

 <\/p>\n

Welche Arten von Grids gibt es?<\/h2>\n

Neben horizontal und vertikal gliedernden Grids gibt es auch sogenannte \u00abModulare Grids\u00bb, die eine Fl\u00e4che sowohl horizontal als auch vertikal in Einheiten unterteilen. Diese Grid-Systeme sind besonders vielseitig und eignen sich f\u00fcr komplexere Layouts.<\/p>\n

\"Horizontalels,<\/p>\n

Im westlichen Sprachraum, wo man in horizontaler Ausrichtung schreibt, spielen Raster, die eine Fl\u00e4che in vertikale Abschnitte gliedern, im responsiven Webdesign eine geringe Rolle, da die H\u00f6he der Textspalten durch die responsive Anpassung nicht vorhersehbar ist. Vertikale Dimensionen k\u00f6nnen im Webdesign daher nur dann zuverl\u00e4ssig geplant werden, wenn ausreichend Freiraum bzw. Pufferzonen ber\u00fccksichtigt werden. Dies erschwert eine konsistente vertikale Gliederung im responsiven Kontext erheblich und macht vertikal gliedernde Grids in der Praxis oft unpraktikabel.<\/p>\n

 <\/p>\n

\n

Nutzen eines Grids<\/strong><\/h3>\n

Struktur trifft \u00c4sthetik:<\/strong> Grids schaffen eine klare Struktur und ein einheitliches Erscheinungsbild.<\/p>\n

Effizientes Arbeiten:<\/strong> Die Anwendung eines Grid-Systems unterst\u00fctzt und vereinfacht den Gestaltungsprozess visueller Anwendungen und Systeme, wie Websites oder Printmedien.<\/p>\n

Zug\u00e4nglichkeit:<\/strong> Studien*5<\/sup> zeigen, dass Designs mit einem strukturierten Layout die Verst\u00e4ndlichkeit f\u00fcr den Benutzer um bis zu 50\u202f% verbessern k\u00f6nnen, was Rastersysteme zu einem wirksamen Faktor f\u00fcr effektive Kommunikation macht.<\/p><\/blockquote>\n

 <\/p>\n

Responsive Grid-Systeme<\/h2>\n

Im Print-Bereich bilden Grid-Systeme seit langem die Grundlage der meisten Designs. Aber auch bei der Gestaltung interaktiver Benutzeroberfl\u00e4chen spielen Grids eine wichtige Rolle.<\/p>\n

W\u00e4hrend im Print-Bereich vor allem kompositorische Aspekte und Anforderungen an die Lesbarkeit im Vordergrund stehen, stellt im Web-Design die Notwendigkeit der Entwicklung responsiver Raster eine zentrale Herausforderung dar. Responsivit\u00e4t in diesem Kontext bedeutet, dass sich das Design optimal an die Gr\u00f6sse des Ausgabemediums anpasst.<\/p>\n

Responsive Grids d\u00fcrfen daher nicht ausschliesslich fixe Dimensionen aufweisen, sondern m\u00fcssen zumindest teilweise flexible Einheiten verwenden. Dazu gibt es zwei grundlegenden Methoden:<\/p>\n

    \n
  1. f\u00fcr die Grid-Dimensionen prozentuale Werte benutzen (fluide Vorgehensweise)<\/strong><\/li>\n
  2. \u00fcber sogenannte \u00abMedia Queries\u00bb*6<\/sup> Anpassungen der Grid-Dimensionen vornehmen (adaptive Vorgehensweise)<\/strong><\/li>\n<\/ol>\n

    Adaptiv vs. Fluid<\/h4>\n

    Nachfolgend zwei unterschiedliche Grids, die ich mit dem \u00abUltimate Grid Generator<\/a>\u00bb erstellt habe. Oben ein adaptives<\/strong> Grid-System, das \u00fcber eine Reihe von Media Queries, wie z.B. @media (max-width: 768px) { \u2026 } angepasst wird; und darunter ein vollst\u00e4ndig fluides<\/strong> Grid, das ganz ohne Media Queries auskommt und f\u00fcr die responsive Anpassung ausshliesslich prozentuale Berechnungen verwendet. Verkleinern Sie doch die beiden iframes mit der Handle-Bar (jeweils unten rechts)<\/strong> und beobachten, was passiert.<\/p>\n

    Adaptives Grid<\/h5>\n