Design im Raster

Jeder Gestalter steht am Anfang vor der weissen Fläche, die er zu füllen hat. Ist der Schrecken (Horror Vacui) ab­ge­klungen, dann entsteht recht schnell eine neue Site. In der Anordnung der Ele­men­te haben sich schon im Print­design (ja, ich meine die Holz­medien) Raster bewährt. Im Web­design können Raster als Ge­stal­tungs­hilfe schon, aber in Ausführung eher im bescheidenen Rahmen verwendet werden.

960 Pixel als Grundlage

Recht bekannt ist ein Hilfsraster namens 960 Grid System. Es handelt sich um ein kostenloses CSS-Framework, mit dem man mit vorgegebenen CSS Rasterbreiten einstellen kann. Warum 960? Es handelt sich hier um die Gesamtbreite in Pixeln. Diese Breite lässt sich wunderbar teilen durch 2, 3, 4, 5, 6 usw. Braucht man ein 3-spaltiges Layout, dann teilt man durch 3 und erhält eine Spalten­breite von 320 Pixeln. Da die Spalten nicht direkt aneinander kleben sollen, muss Spaltenabstand abgezogen werden. Ausserdem passen 960 Pixel Breite wunderbar in die heutigen Browserfenster (natürlich abhängig von der Monitorauflösung), besonders im ausgemittelten Layout.

Spalten werden zum Gestaltungsraster

Selbstverständlich kann man auch mehr Spalten einrichten, zum Beispiel 12 oder 16 Spalten. Die dienen allerdings nicht zur Bestimmung einer einzelnen Spaltenbreite, sondern der Festlegung einer optischen Rasterung, von der man beliebig Unterspalten abgreift bzw. kombiniert. So dient das Gestal­tungs­raster als flexibles Hilfsmittel bei der Seitengestaltung, denn auch Bilder usw. lassen sich in die gewählten Breiten einpassen. Interessant ist die Verwendung ungerader Spalten­unter­teilung. Ab 5 bis 11 Spalten bekommt man damit ungleiche = asymetrische Spaltenbreiten auf einer Site, was viel interessanter wirkt.
Beispiel Mint: moderne Verwendung des Rasters mit lebendigen Grafiken, um Eintönigkeit zu vermeiden.

Beispiel SinnerSchrader: zu regelmäßiger, spannungsloser Einsatzes eines Seitenrasters. Minimal Design, durchgehende Verwendung von Grau/Schwarz töten jede Lebendigkeit.

Die Praxis zeigt Nachteile

Die diversen Gridsysteme sind sehr weit ausgearbeitet. Man findet meistens komplette Pakete zur Website-Entwicklung vor. Es gibt Vorlagen für Photoshop, Fireworks und Illustrator und natürlich ein Framework mit HTML/CSS selber. So kann man schnell Entwürfe beginnen und auch codieren. Wie bei allen Frameworks erkauft man sich deren Verwendung mit einigen Nachteilen. Die Einarbeitungszeit ist unterschiedlich, je nachdem, wie komplex die Systeme sind. Es werden eine Menge Klassen genutzt, die man auswendig kennen sollte. Auch wird für jede Site ungenutzter CSS-Code mitgeladen. Dieser Overhead wirkt sich auf die Lade­ge­schwindigkeit aus. Nutzt man die Rastereinteilung, legt man sich zudem auf die zugrunde legende Breite fest. Was ist, wenn ich eine Site haben möchte, die nur 860 Pixel breit sein soll?

Möglichkeiten

Am besten prüft man die diversen Rastersysteme und checkt, ob sie einem liegen. Mich haben sie ziemlich von der Arbeit abgelenkt. Mir reicht die Mühe, zum Beipiel im MODx CMS besser zurecht zu kommen, da muss man nicht obendrein neue Grid-Classes erlernen. Sehr brauchbar sind die Raster­vorlagen für Grafikprogramme. Dort hinterlegt helfen diese beim Entwerfen. Trick: arbeitet man mit anderen Breiten als vorgegeben, dann kann man ein Raster trotzdem einsetzen. Die beiden äusseren Rasterstreifen schiebt man sich auf die individuelle Aussen­be­grenzung zurecht. Dann werden alle Rasterstreifen markiert und mittels Ausrichten-Palette verteilt man gleichmäßig die restlichen Streifen. Danach kann man das Raster mit individueller Breite nutzen.

Links zu Ressourcen

Einfache 960 Grid Templates finden.
Tutorial: Einsatz und Programmierung des 960 Grids.
Webdesign mit Raster, eine super Anleitung.
Alles, alles — erschöpfend vieles über Grids.
Kritik am heiligen 960er Raster.
Das 1KB Grid—klein und schnell (zu erlernen).
Sehr variabler Grid-Generator (online).
Gridsystemgenerator: einfach das gewünschte CSS-Framework (960Grid, Golden Grid, 1KB Grid, Simple Grid) wählen und Daten eingeben.
Modulargrids — beeindruckender Online-Gridgenerator.
Vertikales Grid beruhigt die Seiten.
Kleiner visueller AIR Gridgenerator fürs Desktop.
Profi CSS-Framework YAML.
Lightweight CSS-Framework Emastic.
Lightweight CSS-Framework Malo.
WordPress-Designs im Raster.
Griderzeuger: Gridulator.
Easy2use-Framework für WordPress-Designs Gantry.
SASS based HTML5-Raster Gravity Framework 
Less Framework: an adaptive CSS system
HTML5 + CSS3 + JS = 52framework
978 Grid System: die passende Gridbreite für jede Fenstergröße auswählen.
The 1140 Grid System (breiter passt besser auf große Monitore)

3 Comments

  • Bloxxor
    26. Juni 2011 - 17:52 | Permalink

    960px Grid System ist super! Dankeschön!

    • BigBossDesigner
      26. Juni 2011 - 21:39 | Permalink

      Da muss natürlich bald ein Link her, für welche Sites Sie das 960er Grid eingesetzt haben 😉

  • 10. August 2011 - 08:47 | Permalink

    Vielen Dank für die Zusammenstellung. Habe gerade mein erstes Theme mit dem 960 Grid System gebaut. Ist zwar optisch sehr simpel, aber für mich als CSS Newbie dennoch eine super Sache als Start.

  • Comments are closed.

    QR Code Business Card