hints & tips // 2008.04.03 08:18:00 [hh]

Rastersysteme für die visuelle Gestaltung: Die besten Ressourcen zu Grid-Layouts

Viel wird in letzter Zeit über Grid-basierte Web-Layouts berichtet und diskutiert, die deutlich mehr Klarheit, Übersicht, Ästhetik bieten sollen als alternative Methoden wie etwa das Box-Modell oder die guten alten Tabellen, die offenbar nicht tot zu kriegen sind. Screen2.0 bietet die besten Links zum Theme, inklusive kostenloser PDF-, Photoshop-, und CSS-Vorlagen für die eigenen Projekte.

Die Verwendung dieser stringenten Gestaltungsraster erlebt momentan eine kleine Renaissance mit Sites wie jenen von der AIGA oder Subtraction (einem der gelungensten Beispiele für klare, reduzierte, übersichtliche Layouts im Web).

Das englischsprachige "Smashing Magazine" bietet wieder einmal eine gelungene Übersicht über kreative Spalten-Einteilungen für Web-Seiten unter dem Titel "Grid-Based Design: Six Creative Column Techniques". Mehr von "Smashing" gibt es hier: "Designing With Grid-Based Approach"

Nathan Smith mit dem "960 Grid System" (sprich "Nine Sixty") die Mühe gemacht, Templates zusammenzustellen, die Gestaltern bei der Arbeit helfen sollen. Er bietet ein 180KB großes ZIP-Archiv zum Download an, der sowohl Vorlagen für Photoshop, Fireworks, Visio und OmniGraffle als auch das zugehörige HTML- und CSS-Paket enthält:

"Zip contains PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML.

• Essence: The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Dimensions: The 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.
• Purpose: The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements."

Auf Smiths Site finden sich auch weitere interessante Links zum Thema.

Weitere Informationen: "Design by Grid" (Links, Tutorials, Artikel), "Five Simple Steps to designing grid systems" (Workshop)

 

Werbung