Die Eigenheiten des Mediums haben Konsequenz für die Gestaltung
der Benutzeroberfläche des Bildschirms. Hier haben wir mit Elementen
und Funktionen zu tun, die im Printbereich nicht vorhanden sind:z.B.:
Animationen, interaktive Elemente. Durch die unterschiedliche Ausstattung
an Hard- und Softwarekomponenten der Benutzer ist die Darstellung der
Seiten verschieden. All diese Faktoren lassen auch einen neuen Rasterbegriff
im Webdesign entstehen, der nicht mehr mit der -aus dem Printbereich bekannten-
mathematischen Genauigkeit zu tun hat, sondern einer Neudefinition und
Anwendung bedarf. Der im Webbereich definierte Raster bezieht sich viel
mehr auf die Visuelle Konsistenz des Erscheinungsbildes und Wiedererkennbarkeit
einer Seite, und trägt dadurch zur Orientierung bei.
Die Rasterelemente des Webdesigns lassen sich in der
folgenden Kategorisierung unterbringen (nach Götz):
- Funktions- und Hierarchieraster - bezieht sich auf Strukturierung-
und Funktionselemente des Bildschirms, Navigationselemente
- Farbraster - Farbelemente, Farbkodierung - die zur Orientierung dienen
-
- Soundraster - Sonorische Unterstützung der Interaktion, Feedback
des Systems
- Bewegungsraster - Einsatz von Animationen, die auf die Information
aufmerksam machen
- Zitatenraster - Elemente, die nicht verändert werden könne
durch Benutzereinstellungen - z.B. - Logo, Navigationsleiste
- Ästhetisches Raster - Seitencharakter und visuelle Erscheinungsform,
die zur Wiedererkennbarkeit beitragen
Basis-Elemente einer Webseite:
- Textfeld
- Bildfeld
- Navigationsfeld
- Filmfeld
Vorgang bei der Rastergestaltung
für das Web:
- Definition des Bildschrimformats in Pixel - hier
ist es wichtig die netto Gestaltungsfläche zu rechnen (Bildschirmgröße
minus Browserleisten in Pixel):
- 600x300 bei einer Auflösung von 640x480
- 760x420 bei einer Auflösung von 800x600
- 955x600 bei einer Auflösung von 1024x768
- Aufteilung der Gestaltungsfläche in Rasterzellen, konform
des funktionellen Schemas: Navigationsfeld, Textfeld, Bildfeld,
eventuell Filmfeld
-
Je detaillierter eine Rasterunterteilung ist, umso größere
Variabilität des Designs ermöglicht sie. Das oben gezeigte
Beispiel zeigt die Unterteilung des Standardformats 800x600, mit
einer tatsächlichen 760x420 Gestaltungsfläche (die
bunte Gestaltungsfläche auf die gesamte schwarze Fläche
verteilt, die stellvertretend für die Bildschirmauflösung
800x600 steht) mit Rasterzellen von 20 Pixeln. Die Rasterzellen
können zusammengefasst werden und ein variierendes Screenlayout
erstellt werden.
Grundsätzlich geht man bei der Rasterdefinition von
einer komplexeren Seite aus, wo die meisten Text und Bilder
geplant sind, mit den komplexesten Navigationsmöglichkeiten.
Das Raster der Startseite wird dann von diesem komplexeren Aufbau
abgeleitet.
Wichtig sind bei der Rastererstellung die ausgewogene Proportion
zwischen den funktionalen (Navigation) und inhaltlichen Elementen.
Am besten baut man eine Website von der Navigation ausgehend auf,
den verbleibenden Raum verwendet man dann für Text- und Bildelemente.
Beispiel: Website des Workshops "MISSION GALACTICA"
1,2 : Rasteraufteilug der Folgeseiten; 3: Startseite
Durch unterschiedliche Zusammenfassung mehrerer Rasterzellen und
Rhythmus der Bild-Text-Elemente gelingt man zu einer variierten
Gestaltung
http://www.erco.com