Workshops

Raster im Webdesign

Raster im Webdesign 4. Februar 2016Leave a comment

Ich habe jahrelang als Diplom-Designer mit den Schwerpunkten Web-, UX- und Icondesign gearbeitet. Daneben war ich, als "Adobe Certified Expert Photoshop", Fachautor und Dozent für Digitale Bildbearbeitung und Webdesign. Derzeit mache ich ein Zweitstudium um einen beruflichen Kurswechsel zum Grundschullehrer vorzunehmen. Die Begeisterung für Design und Technik ist jedoch ungetrübt. Deswegen lebt mein Blog (wieder) weiter. :)

Screenshot Website mit überlagertem Raster
Gestaltungsraster helfen dem Webdesigner während des Gestaltungsprozesses und erhöhen die Usability. Der Artikel beleuchtet das Warum und Wie.
Hinweis

Dieser Artikel ist bereits ein paar Tage alt. Die hier beschriebenen Konzepte und Herangehensweisen stimmen jedoch nach wie vor. Hinweisen möchte ich dennoch auf den im Text genannten Standardviewport von 968px. In Zeiten flexibler Websites, die sich allen möglichen Ausgabegrößen anpassen müssen, lässt sich heute nur zunehmend schwerer von einem Standard reden. Betrachte diese Auflösung also einfach als exemplarisches Beispiel.

Keine Angst vor Rastern

Schon das Wort „Raster“ klingt furchtbar technisch, bürokratisch und einengend. Ein formales Korsett, dass über Etwas gestülpt wird – in unserem speziellen Fall also über eine Website. Wozu sollte es gut sein, sich unnötige Hürden in den Weg zu legen, wenn das Bestreben doch ist, frei und kreativ zu gestalten?
Zu allererst ist es wichtig sich von dem skeptischen Denken gegenüber Regeln und Vorgaben zu befreien. Sprechen wir lieber von Stützen. Ein Architekt kann ein Gebäude nicht nach seinen wildesten Phantasien gestalten, ohne wenigstens einige Stützpfeiler zu setzen, die die kreative Konstruktion drumherum ermöglichen. Auch in der Musik gibt der Takt einen roten Faden vor, an dem sich die einzelnen Noten zu meisterhaften Sinfonien aneinanderreihen. Im (Web)Design ist es das Raster, das diese grundlegende Stütze übernimmt.Anstatt einzelne Elemente wie Fliesstext, Überschriften, Bilder, etc. Pi mal Daumen zu platzieren und dabei dem armen Besucher der Website Übelkeit zu bescheren, weil er wild mit dem Kopf wackelnd den Inhalten zu folgen versucht, werden sie an einem zuvor definierten Raster ausgerichtet und zeigen sich so harmonisch, aufgeräumt und klar strukturiert. Ein großes Plus für die Usability.

Website mit springenden Inhaltselementen
Den einzelnen Inhaltselementen fehlt eine klare Bündigkeit.
Website mit geordneten Inhaltselementen
Das Design wirkt im Gegensatz ruhiger und stimmiger

Einige der häufigsten Vorwürfe, die eine Vernachlässigung von Rastern rechtfertigen sollen sind Aussagen wie „Raster unterdrücken Kreativität“, „Raster verlangsamen den Design-Prozess“, „Raster sind nur ein Design-Trend“ etc. .Tatsächlich aber arbeitete bereits Gutenberg im 15. Jahrhundert nach einem „Raster“, dem „Van de Graaf Kanon“. Eine Verlangsamung des Designprozesses stellen Raster lediglich beim einmaligen Einrichten dar. Im folgenden hingegen beschleunigen Sie das Entwerfen und vermeiden zudem ungewollte Fehler in der Gestaltung, die im Nachhinein korrigiert werden müssten.

Zu den anderen „Anschuldigungen“ bietet Dir Antonio Carusone einen interessanten Blog-Eintrag (Myths & Misconceptions About Grid Systems) der diese und weitere Argumente mit zahlreichen Belegen entkräftigt.

Bei allen Vorteilen solltest Du jedoch nie vergessen, dass Raster immer nur eine Hilfestellung bleiben. Wenn es gute Gründe gibt, mit bestimmten Elementen, beispielsweise der Navigation, aus dem Raster auszubrechen, oder komplett darauf zu verzichten, dann tue das! Deine Idee für Design und Nutzerführung steht an oberster Stelle.

Raster im Designprozess

Zum Anlegen eines Gestaltungsrasters ist es zunächst wichtig, sich für eine passende Anzahl an Spalten zu entscheiden. Auf Anhieb mag es verlockend erscheinen, einfach ein sehr feines Raster (z.B. 24 Spalten) zu verwenden um möglichst viel kreativen Freiraum zu haben. Wenn Ihre Website allerdings recht wenig Inhalt aufweist, der sich beispielsweise nur aus einem einspaltigen Textblock und einer Abbildung je Seite zusammensetzt, dann wäre das mit Kanonen auf Spatzen geschossen und die vielen Spalten und Hilfslinien würden eher behindern. Verwende also stets nur so viele Spalten, wie Du tatsächlich benötigst. Wie bereits oberhalb beschrieben, soll ein Raster die Gestaltungsarbeit erleichtern und beschleunigen. Die folgenden Screenshots zeigen drei Websites mit unterschiedlichen Rasteraufteilungen, die das Verhältnis von Spalten zu Inhalt gut aufzeigen. Zur weiteren Inspiration, welche Aufteilung für welche Art von Inhalt sinnvoll ist, lohnt sich das Stöbern in den Showcase-Archiven von designbygrid.

Exemplarische, auf einem 3er-Raster basierende Website.
Exemplarische, auf einem 3er-Raster basierende Website.
Exemplarische, auf einem 6er-Raster basierende Website.
Exemplarische, auf einem 6er-Raster basierende Website.
Exemplarische, auf einem 24er-Raster basierende Website.
Exemplarische, auf einem 24er-Raster basierende Website.

Spaltenbreite berechnen

Ist die gewünschte Anzahl an Spalten festgelegt, beginnt die Rechenarbeit. Je nach Breite Ihrer Website ergeben sich verschiedene Spaltenbreiten. Zudem solltest Du nicht vergessen, Stege dazwischen einzuplanen, damit der platzierte Inhalt nicht Pixel an Pixel klebt. Als Ausgangswert für die Gesamtbreite des Rasters bieten sich grundsätzlich 960 Pixel an. Zum Einen wird damit dem maximalen Viewport von 968 Pixel bei einer derzeitigen Standardauflösung von 1024 x 768 Pixel Rechnung getragen und zum Anderen bietet dieser Wert eine immense Auswahl an verschiedenen Teilern und somit auch Spaltenanzahlen. Um das zu verdeutlichen sind das:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 und 480.

 Teile also die Gesamtbreite von 960 durch die gewünschte Spaltenanzahl um die Einzelbreite zu erhalten. Davon ziehst Du noch eine passende Stegbreite ab um für Luft zwischen den Inhaltsblöcken zu sorgen. Exemplarisch für ein 12er-Raster könnte das wie folgt aussehen:

960 Pixel ÷ 12 (Spalten) = 80 Pixel Spaltenbreite

 Für den Steg werden 15 Pixel eingeplant. Daraus ergibt sich letztlich eine Spaltenbreite von 80 Pixel (Spaltenbreite ohne Steg) – 15 Pixel (Steg) = 65 Pixel.

Spaltenbreite erstellen

Die Art und Weise, wie Du diese Spaltenaufteilung nun in Ihrer Grafikanwendung markieren bleibt Dir überlassen. Ob Du ausschließlich mit Hilfslinien arbeitest, oder mit flächigen, leicht transparenten Balken die einzelnen Spalten markieren ist eine Sache der persönlichen Vorliebe. Wenn Du mit Balken arbeitest, ziehe dir exemplarisch einmal einen Balken in der berechneten Breite ohne Steg auf einer Ebene auf und färben ihn ein. Direkt daneben angrenzend erstellst Du einen weiteren Balken in einer kontrastierenden Farbe um den Steg zu kennzeichnen. Reduziere die Deckkraft dieser Hilfsebene deutlich und dupliziere sie mehrfach. Die gängigen Bildbearbeitungsprogramme wie Photoshop oder Fireworks rasten automatisch an anderen Ebenenkanten ein wenn sich ihnen ein Objekt nähert. (Photoshop: Ansicht > Ausrichten)

In Photoshop erstellte Balken in einem leeren Dokument
Erstellen von Hilfsbalken

Wenn Du stattdessen mit Hilfslinien arbeiten willst, mache dir die Möglichkeit zu Nutze, den Nullpunkt versetzen zu können, wenn Du beim addieren der aufeinander folgenden Spaltenbreiten durcheinander kommst. Das tust Du, indem Du mit der Maus ein Fadenkreuz aus dem Linealkreuz heraus platzieren. Die Position unter der Hilfslinie kannst Du in der Informationen-Palette (Photoshop und Fireworks) ablesen. Zudem lassen sich Hilfslinien auch numerisch über den Menübefehl Ansicht > Neue Hilfslinie… (Photoshop) bzw. per Doppelklick auf eine Hilfslinie (Fireworks) platzieren.

In Photoshop erstellte Hilfslinien in einem leeren Dokument
Alternativ kann auch “nur” mit Hilfslinien gearbeitet werden.

Wer die Handarbeit scheut kann alternativ auf eine der vielen vorgefertigten Templates zurückgreifen, die es im Netz gibt. Nähere Informationen hierzu findest Du im letzten Abschnitt dieses Artikels „Ressourcen zur Arbeit mit Rastern“. An dieser Stelle sei vorab jedoch auf das Photoshop-Plugin „Gridmaker“ von Andrew Ingram verwiesen, mit dem sich im Handumdrehen frei definierte Hilfslinien-Raster erstellen lassen. (Hinweis: In aktuellere Versionen von Photoshop funktioniert das Tool womöglich nicht mehr).

Bei der anschließenden Gestaltung lassen sich die einzelnen Inhaltsblöcke auf den verschiedenen Unterseiten nun frei entlang des Rasters platzieren und Bewahren stets eine optische Konstante.

Screenshot mit markierungen, wo Bündigkeit vorliegt.
Einzelne Elemente der Website sind harmonisch aneinander orientiert ausgerichtet

Vertikales Raster

Bislang war immer nur die Rede von Spalten, also einer horizontalen Aufteilung der Website. Was ist nun aber mit der Vertikalen. In dieser Ausdehnung lohnt es sich nur sehr beschränkt, akribisch nach einem Raster zu arbeiten. Zu schnell verändern sich die Abstände durch benutzerspezifische Browseranpassungen wie beispielsweise eine veränderte Schriftgröße. Hier lohnt es sich mehr, das Verhältnis der vertikalen Abstände von Schrift und Text harmonisch und proportional zu halten, was durch ein liquides Layout und die Berücksichtigung des „Vertikalen Rythmus“ möglich ist. Da dieses Thema nur beschränkt mit dem eigentlichen Thema „Raster“ zu tun hat, verweise ich an dieser Stelle lediglich auf einen lohnenswerten Artikel von 24ways.org.

Abbildung Website mit vertikalem Rhythmus
Der vertikale Rhythmus gliedert das layout sauber von oben nach unten.

Um nebeneinander stehenden Elementen dennoch eine geregelte vertikale Anordnung zu verleihen, empfiehlt es sich an markanten Stellen einfach eine horizontale Hilfslinie zur Orientierung zu platzieren. Das ist beispielsweise dort sinnvoll, wo der Content unterhalb einer horizontalen Navigation beginnt oder auch mehrere Teaserblöcke nebeneinander auf einer Höhe stehen sollen. Auch hier gilt aber: Nicht zu viele Hilfslinien, sonst ist die Verwirrung vorprogrammiert weil Sie nicht mehr wissen, welche Linie zu welchem Element gehört.

Mit horizontalen Hilfslinien gegliedertes Photoshop-Dokument
Horizontale Hilfslinien dienen der Orientierung beim Gestalten.

Raster in HTML/CSS

Durch die Verwendung eines zuvor definierten Rasters wird die Arbeit am HTML/CSS-Gerüst zwar nicht anders als bei einer rasterlosen Umsetzung, aber es erleichtert das Berechnen der Breite von Blockelementen, Margins und Paddings enorm. Anstatt für jeden Abstand unterschiedliche Werte auszumessen, erkennt man auf einen Blick, welche Breite welches Element im Design zugewiesen bekommen hat. Fehler bei Fehlverhalten in der Browserdarstellung sind somit leicht auszumachen. Zudem lassen sich innerhalb des Rasters auch schnell aus dem Stegreif weitere Elemente ergänzen, die sich optisch nahtlos einfügen, ohne das Photoshop & Co bemüht werden müssen.

Die folgende Abbildung zeigt eine Website mit einem 16er-Raster. Die Spalten sind jeweils 40 Pixel breit, die Stege dazwischen 20 Pixel.

Abbildung einer ihr Raster zerlegten Website
Website in ihr Raster zerlegt

Zerlegt man das bereits in HTML umgesetzte Design (siehe auch Arbeitsmaterial) in die einzelnen Inhaltsblöcke und Seitenabstände erkennt man in den zugehörigen CSS Schnipseln wie systematisch sich mit dem Gestaltungsraster arbeiten lässt.

Systematische Darstellung des Gestaltungsraster an der Beispiel-Website
Systematische Darstellung des Gestaltungsraster an der Beispiel-Website

Der Wrapper, also der Div-Container der sämtliche Inhalte der Website umschließt, erhält die fixe Breite von 960 Pixel und entspricht damit der Gesamtbreite unseres Rasters. An dieser Stelle ist es wichtig zu beachten, dass ein eventuell vergebener Rahmen (border) auf den Wert für die Breite addiert wird (Stichwort: Boxmodell). Wenn der Rahmen als Teil des Inhalts konzipiert ist, muss die Gesamtbreite des Wrappers entsprechend der Breite des Rahmens nach Unten korrigiert werden.

Das gesamte Content-Div, in der Abbildung der Bereich zwischen dem Lineal und dem grünblauen Footer, (06/09) erhält ein seitliches Padding von 20 Pixel (rechts) bzw. 60 Pixel (links). Das entspricht 1:1 den definierten Rastermaßen.

Das Div „textspalte“ hat eine fest zugewiesene Inhaltsbreite von 400 Pixel, aus Sicht des Gestaltungsrasters also 6 x Spalte mit Steg zuzüglich einmal Spalte ohne Steg. Zudem kommt als rechter Abstand (padding-right) nochmals ein Abstandshalter zum nebenstehenden Bild von 20 Pixeln. (01/07)

Der float:left sorgt dafür, dass der weitere Inhalt (Bild und Legende, zusammengefasst im Div „rechtespalte“) rechts davon und nicht darunter abgebildet werden. Auch diese Elemente haben wieder Maße, die das Gestaltungsraster aufgreifen. Das Bild (02) wurde in Photoshop auf eine Breite von 270 Pixel definiert. Das entspricht zwar soweit noch keinem Vielfachen unseres Rasters, da aber per CSS noch eine 5 Pixel starke Kontur zugewiesen wird, addiert sich die Breite zu 280 Pixel und passt wieder voll und ganz in unsere Vorgaben (4 x Spalte + Steg zuzüglich 1 x Spalte). Die nebenstehende Legende (03) besitzt eine Breite von 160 Pixel. Ein padding-right von 20 Pixeln (08) trennt die beiden Elemente optisch voneinander. Die entsprechenden Quellschnipsel, inklusive der benötigten floats zur korrekten Positionierung der als Definition List angelegten Bild-Text Kombination sind:

Im Footer wiederholt sich das ganze letztlich auf die gleiche Weise.

Wie bereits das Content-Div erhält auch der Footer Links und Rechts einen Seitenabstand von 60 Pixel (links) und 20 Pixel (rechts) (10 / 13)

Die drei Inhaltsblöcke sind bis auf eine kleine Ausnahme identisch. Das Icon besitzt eine Breite von 40 Pixel (entspricht einer Rasterspalte), daneben der Text, dessen Breite auf 220 Pixel (3 x Spalte + Steg zuzüglich 1 x Spalte) festgelegt ist (11). Für den Abstand zwischen den einzelnen Inhalten sorgt ein seitliches Margin des Textes von jeweils 20 Pixel (Breite Steg).

Lediglich der letzte Block muss leicht modifiziert werden. Hier gibt es am rechten Rand bereits einen Abstand, der zuvor für den gesamten Footer definiert wurde. Entsprechend erhält er eine eigene Klasse (.lastdl) in der das margin-right auf 0 gesetzt wird:

Raster für liquide Websites

Die Umsetzung eines Gestaltungsrasters für liquide Websites ist vom Grundprinzip identisch. Letzlich geht es hier „nur“ darum, die fixen Pixelwerte des definierten Rasters in em-Werte umzurechnen. Eine ausführliche Erklärung, wie und auf der Basis welcher Elemente Sie die em-Werte berechnen finden Sie in dem Artikel „Fluid Grids“ von A List Apart.

Raster für mobile Endgeräte

Was vor einigen Jahren, nicht zuletzt aufgrund der immens hohen Datentarife,nur eine Randerscheinung war, erfreut sich heute großer Beliebtheit: Das mobile Surfen. Überall und zu jeder Zeit können wir uns mit dem Smartphone ins Web einklinken. Diese Mobilität führt jedoch zu einem gestalterischen „Rückschritt“. Während am Heimrechner die Monitore im Lauf der Jahre immer größer und hochauflösender werden und somit viel komfortablen Platz zur Gestaltung bieten, stellen die mobilen Geräte den exakten Gegenpol da. Displays mit, im Vergleich, winzigen Auflösungen. Da man sicher behaupten kann, dass dies kein vorübergehender Trend ist, werden Websites in Zukunft also doppelt gestaltet werden müssen. Für private Auftritte sicherlich kein Muss, im kommerziellen Bereich wird es aber zum guten Ton gehören, sich auch mobil angepasst zu präsentieren. Glücklicherweise betrifft das vorwiegend die Gestaltung per CSS. Die in HTML verfasste Struktur sollte sich bei guter Aufbereitung nahezu vollständig wieder verwerten lassen.

Dabei lässt sich grob zwischen zwei Gruppen von Endgeräte unterscheiden. Auf der einen Seite stehen die Smartphones mit großen Displays und Multitouch-Technik, wie Sie Apple mit dem iPhone als Pionier eingeführt hat. Die modernen Geräte unter ihnen ermöglichen eine Anzeige herkömmlicher Websites ohne weitere Anpassung der Stylesheets. Der formale Aufbau der Website anhand eines Rasters mit Floats wird problemlos übertragen. Per Fingergeste wird ein bestimmter Ausschnitt der zuvor komplett gerenderten Website angezeigt und skaliert. Das funktioniert insgesamt gut, dennoch verliert man bei umfangreichen Angeboten gerne den Überblick. Zudem müssen sämtliche Bild-und Textinhalte geladen werden, was gerade bei einer langsamen Internetverbindung zum Geduldsspiel werden kann und zudem den Traffic erhöht.

Auf der anderen Seite gibt es natürlich noch die „normalen Handys“ und älteren Smartphones, die weiterhin nur über  Tasten oder evtl. einen Stylus bedient werden. Das zwangsläufige horizontale und vertikale Scrollen wird hier zur Last.

Optimal ist es also, in jedem der beiden Fälle, eine speziell für mobile Endgeräte angepasste Website anzubieten. Aufgrund der geringen Auflösung aktueller Geräte sollten Sie hier auf Mehrspaltigkeit und damit also auch auf ausgefeilte Raster verzichten. Aus Usability-Sicht hat sich eine einspaltige Darstellung etabliert, die mit kleinen Bildern und kurzen Texten die Inhalte in knapper Form anteasert und einen schnellen Überblick auch bei kleinen Platzverhältnissen schafft. Die beiden folgenden Bildbeispiele zeigen die unterschiedliche Darstellung zweier Websites in normaler und mobiler Ansicht auf dem iPhone.

Gegenüberstellung der mobilen und Desktop-Website von kicker und A List Apart
Gegenüberstellung der mobilen und Desktop-Website von kicker und A List Apart

Die Auflösung aktueller Handys und Smartphones in der Breite reicht von 240 Pixel, über 360 Pixel, 480 Pixel bis hin zum derzeitigen Maximum von 680 Pixeln beim iPhone 4. Da Du in der Regel jedoch nicht weißt, mit welchem Endgerät der Besucher Deine Seite ansurft, empfiehlt es sich, keine festen Werte in Pixel als Maßeinheit zu verwenden, sondern Schriften und Abstände in em anzugeben und die Breite der mobilen Website auf 100% zu setzen.

Einige hilfreiche Anregungen zur Konzeption und Gestaltung mobiler Websites finden Sie in dem Artikel „Pocket-Sized Design“ von A List apart.

Ressourcen zur Arbeit mit Rastern

Eine großartige Anlaufstelle für Artikel, Tutorials und Showcases zur Inspiration liefert designbygrid.com. In umfangreichen Archiven finden Sie alles was Sie zur Vertiefung und täglichen Dosis Raster benötigen.

Ausführlich beschäftigt sich auch das Design made in Germany-Maganzin in Ausgabe 5 mit Gestaltungsrastern.

Neben den theoretischen Inhalten haben sich einige Frameworks entwickelt, die im Laufe der Zeit einen beträchtlichen Umfang erreicht haben. Mit deren Verwendung sparst Du eine ganze Menge Zeit, da Du keine eigenen Raster mehr in Photoshop (oder anderen Grafikanwendungen) entwerfen musst – und auch das Schreiben zugehörigen Grundgerüste in HTML/CSS wird Dir hier bereits abgenommen. Die “Big Five” darunter sind YUI (Yahoo! User Interface), Baseline, YAML, Blueprint und 960.gs. Letzteres bietet neben Quelldaten in HTML und CSS auch noch zahlreiche Grafiktemplates für gängige Anwendungen wie Photoshop, Fireworks, Flash, aber auch für ausgefallenere Anwendungen wie Omnigraffle. Per Online-Generator lassen sich zudem flexible, eigene Werte für Spalten und Stege eintragen, der zugehörige Quelltext wird per Knopfdruck generiert- egal ob fix oder liquid.

Was dich zu diesem Thema interessieren könnte:

Was ist Deine Meinung?

Welche Rolle spielen Gestaltungsraster bei Dir im Webdesign? Empfindest Du sie als hilfreich oder eher als Einschränkung?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Pin It on Pinterest

Share This