Gestaltungsmittel Raster

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.

Buchraster und Webraster

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
  • Orientierung
-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.
  • Format
-Papierformat und Ausrichtung frei wählbar -Bildschirmformate/Pixel:
 640x480, 800x600, 1024x768
-Ausrichtung: verbindend quer
  • Farbe
-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
  • Schriftauswahl, Lesbarkeit
-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
-Ultraleichte und leichte Schnitte eignen sich  für den  Bildschirm nicht, sondern fettere  Schriftschnitte
-die Schriftwahl beschränkt sich auf  Standardschriften (Systemschriften)

-Zeilenlänge auf dem Bildschirm sollte nicht  mehr  als 35 Anschläge beinhalten, mit einem  Durchschuss von 130-140% des Satzes
-Schriftgröße soll mind. 11Punkt sein

  • Rasterelemente

-Spaltenbreite, -abstand, -länge
-Schriftdefinitionen
-Seitenränder
-Satzspiegel
-Zusätzliche Elemente: Überschriften,  Bildlegenden, Pagina,  Marginalien,  Fußnoten,  Passerzeichen, Farbraster

-Funktions-und Hierarchieraster
-Farbraster
-Soundraster
-Bewegungs- und Zeitraster
-Zitatenraster
-Ästhetisches Raster

 

Rasters für den Druck

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.

Details zu den Printraster

Raster für den Bildschirm

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.

Details zu den Webraster

Rasterbeispiele Screen

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.

Details zu den Rasterbeispiele Screen

Ü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.

Details zu den Übertragen von Rastern vom Buch zum Web