Ein Freund hat mir am Wochenende von 12 Grid erzählt. Er meinte das 12 Grid die Grundlage im Webdesign ist. Persönlich hatte ich vorher schon etwas von Grids gehört, aber noch nicht vom Ansatz 12 Grid. Was hat es also mit 12 Grid, bzw. Gestaltungsraster auf sich?
Was sind Gestaltungsraster / Grid?
Der Gestaltungsraster (in der Praxis oft das Gestaltungsraster), auch der typografische Raster, Rastersystem oder auf Englisch auch Grid genannt, ist ein Ordnungssystem in der visuellen Kommunikation, das als Hilfskonstruktion die Organisation von grafischen Elementen auf einer Fläche oder in einem Raum erleichtert. Gestaltungsaufgaben, in denen der Raster Anwendung findet, sind meist typografischer Art – es wird dann von Rastertypografie gesprochen.
Was bringen Gestaltungsraster / 12 Grid für das Webdesign?
Der Nutzen von Gestaltungsrastern liegt darin, dass für den Designer und für den Nutzer ein Ordnungssystem geboten wird. Diese fördert und unterstützt das Erfassen von Inhalten. Mit einem passenden Gestaltungsraster können Informationen besser verstanden und einfacher und schneller gelesen werden. Dieses wird dadurch erzielt, dass Bild- und Textinhalte logisch und systematisch aufgebaut werden. Dabei ist für den Nutzer ein Mehrwert zu erzielen.
Die Inhalte und deren Darstellung werden dabei standardisiert. Im Webdesign wird häufig mit Spalten als Aufteilungsmuster/Gestaltungsraster gearbeitet. Dieses kann z. B. in einem 12 Grid/Gestaltungsraster geschehen. Hierbei sind 12 Spalten als Basis vorgesehen.
Beispiel:
Basierend auf dem oben abgebildeten Grid, können verschiedene Spalten kombiniert und Inhalten einer Webseite zugewiesen werden. Dieses geschieht zumeist automatisch per Seitendesigner, bzw. auf der jeweilige Theme einer Webseite. Beispiel hierfür keinen 2- oder 3-Spaltige Anzeigen im Theme sein (z. B. bei WordPress). Ebenso können Span-Bereich zusammengefasst werden (1 * span 4 für das Menü und 2 * span 4 für den Inhalt). Zusätzlich ermöglichen die Themes oder Grid-Frameworks das Ausrichten der Inhalte basierend auf der Auflösung des jeweiligen Endgerätes. Es sorgt also dafür, dass responsive Design umgesetzt werden kann.
Gibt es nur 12 Grid?
Natürlich sind 12 Spalten Grids, mit einer 60 Pixel Basis, nicht die einzige Lösung. So gibt es auch 16 Spalten Grids, welche 40 Pixel als Basis haben. Die 12 Spalten Grids scheinen jedoch die am meisten verbreitet zu sein. So gibt es für den Ansatz der 12 Spalten Grids auch verschiedene Frameworks. Dazu gehören z. B. das 1.200 Pixel und das 960 Pixel System. Die Argumentation für das 1.200 basiert darauf, dass 1.200 Pixel (als Grundbreite) teilbar durch 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 und 400 ist. Das 1.200 Pixel System ist dabei eine Weiterentwicklung vom 960 Pixel Grid System von Nathan Smith. 1.200 Pixel wurden gewählt, da heute die Auflösung von 1.280 * 1.024 Pixel als Basisauflösung angesehen werden kann.
Weitere Grid-Frameworks
(zum Teil CSS Frameworks, welche ein eigenes Grid-System mitbringen)
- Semantic Grid System – A CSS grid framework
- Twitter Bootstrap
- ZURB Foundation
- Cascade Framework