Das 960 Grid System - ein tolles Gestaltungsraster für dein Layout

Das 960 Grid System – ein tolles Gestaltungsraster für dein Layout

Ein beliebtes Werkzeug im Webdesign zum Anordnen von Elementen auf einer Website ist das 960 Grid System von Nathan Smith. Das 960 Grid System ist ein kostenloses Framework für das Layouten deiner Website oder deines Blogs.

Im Framework-Paket sind verschiedene Vorlagen für Gimp, Inkscape, Fireworks, Illustrator, Photoshop, Flash, Indesign, Quarkxpress, Corel Draw und noch einige mehr enthalten.

Du kannst dir das Vorlagenpaket direkt von der 960.gs Website herunterladen.

Warum 960 Pixel?

Wir können, wie im Artikel Gestaltungsraster – Grundgerüst für das Webdesign bereits angesprochen, davon ausgehen, dass die Auflösung von 1024 Pixeln die momentane Quasi-Norm ist. Wenn man also von einer Standardbreite von 1024 Pixeln ausgeht, so müssen nur ein paar Pixel für den Scrollbalken, für die Fensterränder und für das Design abgezogen werden. Je nachdem, wie viel Raum man an den Seiten haben möchte – das Layout soll ja nicht gequetscht wirken, kommt man leicht auf einen Wert von 960 Pixel.

Aber nicht nur deshalb wurde dieses Maß gewählt, sondern auch, weil sich 960 durch 3, 4, 5, 6, 8, 10, 12, 15 und 16 teilen lässt. Das bedeutet, Du kannst die Grundfläche in 3, 4, 5 Spalten usw. aufteilen, je nachdem wie viele Spalten Du benötigst.

Diese vielfältige Teilbarkeit ist einfach ideal für die Arbeit mit einem Raster. Nathan hat auf Grundlage dieser Zahlenverhältnisse drei Raster-Vorlagen als Basis für Layouts entwickelt, eine mit 12 Spalten, die zweite mit 16 Spalten und die dritte mit 24 Spalten. Eine Demo des 12-spaltigen und des 16-spaltigen Grids kannst Du hier sehen. Natürlich kannst Du auch diese Grids in größere, übergeordnete Spalten einteilen bzw. zusammenfassen. Also die gesamte Breite zum Beispiel vierteln, dritteln oder halbieren.

Elemente im Grid anordnen

Am Grid, also am Raster, richtest Du deine großen Blöcke wie zum Beispiel Header, Navigation(en), Footer und Inhalte aus. Im unteren Bild siehst Du Screenshots einer Website aus Nathans Präsentation auf Speaker Deck. Die Site, einmal ohne und einmal mit eingeblendetem Grid, ist ein Beispiel für die Anwendung des Rasters, in dem Fall wurde das 12-spaltige Raster genutzt.

Screenshot Anwendungsbeispiel 960 Grid System

Auch wenn Du deine festen Blöcke hast, solltest Du experimentierfreudig sein und nicht alle deine Elemente ganz streng in einem Block oder einer Spalte anordnen. Das wirkt oft uninteressant und langweilig. Was spricht dagegen ein Element über mehrere Spalten oder Blöcke anzuordnen. Probiere einfach aus und entwickle dein individuelles Layout um dich auch von anderen abzuheben.

Ein Grid System zu nutzen bedeutet nicht, alles streng nach Reih und Glied hinein zu quetschen, sondern die Elemente in eine harmonische Beziehung zueinander zu setzen. Um dein Verständnis über die Wirkungsweisen einer Anordnung zu erhöhen und ein besseres Gefühl für Layout zu entwickeln können dir diese Gestaltgesetze eine Hilfe sein.

Wenn Du bereits eine Website oder einen Blog hast, lohnt es sich manches Mal auch Nachhinein mit einem Grid System Korrekturen am Layout vorzunehmen. Gerade dann, wenn dich am Layout deiner Website irgendetwas stört, vor allem wenn Du nicht sagen kannst, was genau nicht stimmt, dann bringe einfach mit Hilfe eines Grids Ordnung hinein. Du wirst über das Ergebnis sehr erstaunt sein.

Fazit:

Der Mensch liebt Harmonie. Diese Harmonie lässt sich in vielen Formen um uns herum wiederfinden und ebenso in allen Bereichen der Natur. Raster sind ein hervorragendes Mittel um dem Layout einer Website Struktur zu verleihen und die Elemente in ein ideales Verhältnis zueinander zu setzen, auf diese Weise erreichst Du, dass deine Website oder dein Blog viel mehr im Gleichgewicht ist und somit harmonischer auf deine Besucher wirkt.

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

Comments are closed.