
Die Planung von einzelnen Websites ohne Gestaltungsraster ist undenkbar. Ein klares und durchgängiges Layout ist die Voraussetzung dafür, dass sich der Benutzer auf der Website leicht bewegen kann, ohne sich neu orientieren müssen. Das Grundlayout einmal definiert, gilt auch als Vorlage oder Template für das Aussehen anderer Seiten der Website.
Das Raster steht als Organisationsprinzip hinter jedem Grafikdesign und ermöglicht das Entwerfen einer guten, ausgewogenen und konsistenten visuellen Logik der Elemente. Ein gut aufgebautes Rastersystem ermöglicht visuelle und funktionale Kontinuität aber auch Freiheit in der Gestaltung.
Viele Regeln aus dem Seitenlayout für den Druck können nicht ohne weiteres für den Screen übertragen werden. Es handelt sich um veränderte Bedingungen der Informationsgestaltung, die aus den Gegebenheiten des Mediums kommen, daher ist eine Neudefinition des Rasterbegriffs notwendig . Wenn sich ein Raster im Printbereich als präzise definieren lässt, ist das im Webbereich nur "ungefähr" definierbar . Durch die Eigenheiten des Webs gegenüber des Papiers haben wir es mit sich verändernden Hard-und Softwarebedingungen zu tun, die das Aussehen des Endprodukts beeinflussen und unterschiedlich bei dem Benutzer aussehen können. Der Rasterbegriff bezieht sich im Web-Bereich nicht mehr auf eine mathematische Genauigkeit der Rasterstruktur, sondern sichert Kontinuität, Wiedererkennbarkeit, Orientierung im Web.
In der nachfolgenden Tabelle sind die Eigenheiten des Mediums aufgelistet, bezüglich ihren Möglichkeiten und Grenzen sowie die Folgen und Auswirkungen auf die Gestaltung.
Vergleich Buch- und Webdesign | ||
Gestaltungsaspekte | Buch | Website |
| -Inhaltselemente linear organisiert: Inhaltsverzeichnis, Text, der in Kapitel gegliedert ist und einen Index -die “Bedienung” eines Buches ist also unproblematisch und vertraut | -Informationen sind nicht linear, sind durch vielfältigste Bedienungs- und Navigationskonzepte vielfältig miteinander verknüpft -In einem Hypertext gibt es keine vor- gegebene Reihenfolge, sondern unterschiedliche Möglichkeiten für Benutzer, sich die Informationen zu erschließen. |
| -Papierformat und Ausrichtung frei wählbar | -Bildschirmformate/Pixel: 640x480, 800x600, 1024x768 -Ausrichtung: verbindend quer |
| -Farbgestaltung ist Kostenfrage -CMYK als Grundlage (subtraktives Farbsytem / Magenta, Cyan, Yellow) -die Farbdarstellung- und Wahrnehmung ist konsistent | -Farbgestaltung kostet nichts -RGB-Modell (additives Farbsystem / Rot, Grün, Blau) -die Farbdarstellung wird von vielen Faktoren beeinflusst: Plattform (Mac o. PC), Monitoreinstellung, Monitorüberstrahlung |
| -Antiquaschriften sind auf dem Papier gut lesbar; -jeder Schriftschnitt ist anwendbar -die Wahl der Schriften ist nicht begrenzt -Spaltenbreiten auf dem Papier können bis zu zehn Wörter (35-55 Anschläge) aufnehmen, ohne negative Auswirkung auf die Lesbarkeit -Schriftgrößen ab 6Punkt lesbar | -Groteskschriften sind auf dem Bildschirm besser darstellbar |
| -Spaltenbreite, -abstand, -länge | -Funktions-und Hierarchieraster -Farbraster -Soundraster -Bewegungs- und Zeitraster -Zitatenraster -Ästhetisches Raster |
Die Kontruktion eines Rasters für den Druck beinhaltet die folgende Schritte:
- Auswahl des Papierformats und Ausrichtung
- Auswahl der Schrift
- Definition der Spaltenbreite, - abstand und -länge
- Festlegen der Satzspiegel
- Festlegen des Zeilenabstands (Durchschusses)
- Definieren der Seitenränder und Satzspiegel
- Zufügen von Extraelementen zum Raster
Die Rasterelemente stehen in engem Zusammenhang miteinander und haben Auswirkung auf die Lesbarkeit des Textes.
Die Schriftgröße ist abhängig von der Spaltenbreite: für gute Lesbarkeit sind 7 bis 10 Wörter in eine Zeile unterzubringen. Spaltenbreite, Schrift und Schriftgrad, Zeilenabstand sind gemeinsam für die Lesbarkeit des Textes verantwortlich. Der Abstand zwischen den Spalten hängt von der Spaltenbreite und der Satzart ab.
Bei der Gestaltung von Websites müssen die Eigenheiten des Bildschirms berücksichtigt werden, z.B.
- das vorgegebene Format und Auflösung des Bildschirms
- veränderte Wahrnehmung am Bildschirm / Orientierung, Textrezeption, Farbwahrnehmung, Bildaufbau
- Datenübertragung
Daher ist es wichtig, dass der Designer besonders Wert legt auf die Logistik und visuelle Hierarchien der Website. Ein gut durchdachtes Rastersystem kann viel zur Orientierung auf der Website beitragen.
Die wichtigsten Anforderungen an die Gestaltung von Rasterstrukturen für den Bildschirm sind:
- Wiedererkennbarkeit
- Funktionale Stabilität
- Rhythmus
Der logisch voraussehbare Aufbau einer Site trägt zu einer schnellen Orientierung und leichte Handhabung der Site seitens des Benutzers bei.
Übertragen von Rastern - vom Buch zum Web
Eine Rasterstruktur aus dem Printbereich lässt sich nicht ohne Anpassung auf das Web übertragen. Bei Vorliegen einer Printpublikation muss man sich entscheiden, wie sich die einzelnen Strukturen auf das Internet übertragen lassen. Grundlegende Entscheidungen sind von den Eigenheiten des Mediums abhängig, sowie von dem zu übertragenden Infomaterial.
Gestaltungselemente, wie Format Typografie, CI-Farben, müssen überprüft und am Bildschirm angepasst werden, unter der Berücksichtigung der Wahrnehmung der Internet-Kommunikation, aber auch die Erwartungen des Benutzers bezüglich Aktualität und Vielfalt der darzustellenden Information. Zusätzlich sollte man auch die zusätzlichen technischen Möglichkeiten der digitalen Medien zur Informationsvermittlung nutzen.