Gestaltungsraster im Webdesign

Inhaltsverzeichnis

1 Einleitung.

2 Das Gestaltungsraster im Corporate Design.
2.1 Aufkommen des Gestaltungsrasters
2.2 Das Gestaltungsraster im Printdesign
2.3 Das Gestaltungsraster im Webdesign
2.3.1 Flexibilität der Darstellung
2.3.2 Rasterkonstruktion im Webdesign

3 Die Internetpräsenz des »Vertriebsanzeigers«.
3.1 Die Anzeigenplattform »Vertriebsanzeiger«
3.2 Die Zielgruppe
3.3 Zweck der Internetpräsenz
3.4 Die Gestaltungselemente: Text und Grafik
3.5 Überlegungen zur Art des Rasters
3.6 Die praktische Umsetzung
3.6.1 Das Gestaltungsraster
3.6.2 Die Seitenelemente
3.6.3 Elementbeschreibung
3.6.4 Die Navigationsstruktur
3.6.5 Die Farbgebung
3.6.6 Abstände und Winkel
3.6.7 Die Wirkung der Internetpräsenz
3.6.8 Abhängigkeiten innerhalb des Gestaltungsrasters

4 Die Internetpräsenz von Claudia Faust
4.1 Die Fotografin Claudia Faust
4.2 Allgemeine Vorüberlegungen und Ideen
4.3 Die Seitenstruktur
4.3.1 Die Bereiche der Seite
4.3.2 Das Navigationskonzept
4.4 Die Gestaltung
4.4.1 Das Farbkonzept
4.4.2 Das Gestaltungsraster
4.5 Kurzvorstellung der Administrationsoberfläche. . .

5 Zusammenfassung .

6 Glossar.

7 Literaturverzeichnis.
7.1 Offline-Medien
7.2 Online-Medien

8 Abbildungsverzeichnis.
8.1 Übernommene Abbildungen
8.2 Eigene Abbildungen

Einleitung

Zu Beginn sollen einige Eckdaten zu Ursprung und Funktion des Gestaltungsras- ters als Element des Corporate Designs genannt werden. Die Prinzipien der visu- ellen Gestaltung, die schon aus dem Printbereich bekannt sind, werden daraufhin auf ihre Anwendbarkeit im Webdesign überprüft. Dies geschieht anhand zweier Praxisbeispiele aus dem Webdesign, die auf ihre Gestaltungselemente hin ana- lysiert werden, wobei sowohl Chancen als auch Grenzen hinsichtlich der Gestal- tungselemente für Internetpräsenzen deutlich werden sollen.

An den zwei ausgewählten Praxisbeispielen soll der Unterschied zwischen statischen und dynamischen Gestaltungsrastern für das Webdesign nachvollzieh- bar aufgezeigt werden. Sie werden in quasi historischer Abfolge präsentiert.

Das ältere statische Gestaltungsraster eröffnet den praxisorientierten Teil dieser Hausarbeit. Im Anschluss findet das modernere dynamische Gestaltungs- raster - im Beispiel ein in Flash umgesetztes Raster - seinen Platz in der Ana- lyse. An beiden Beispielen wird die praktische Umsetzung der Richtlinien und Gesetzmäßigkeiten für die Erstellungen eines Gestaltungsrasters im Webdesign untersucht. Ebenso soll in dieser Analyse verdeutlicht werden, dass ein Gestal- tungsraster im Webdesign eine umfangreichere Funktion ausübt als ein Raster im Printdesign.

2 Das Gestaltungsraster im Corporate Design

Das Corporate Design umfasst die formale Vereinheitlichung unterschiedlicher Kommunikationsmittel einer Organisation oder eines Unternehmens. Dadurch kann im Hinblick auf zentrale Kommunikationsziele ein charakteristisches Er- scheinungsbild vermittelt werden¹. Neben ständig wiederkehrenden Unterneh- mens- oder Markenzeichen zählen auch Hausfarben und -schriften zu den zentra- len Gestaltungselementen, die auf alle denkbaren Trägermedien beziehungsweise Werbemittel anwendbar sein sollen. Bei klassischen Printprodukten (Briefe, Bro- schüren, Flyer, Plakate usw.) spielen Formate und materielle Zusammensetzungen (Haptik) eine Rolle. Die sichtbaren Gestaltungselemente werden mit Hilfe eines so genannten Gestaltungsrasters angeordnet.

2.1 Aufkommen des Gestaltungsrasters

Das Raster ist wie ein Fischernetz, das typographische Zeichen, Bilder, Grafiken, Farbflächen usw. auffängt. Die Maschen dieses Netzes geben jedem Element sei- nen richtigen Platz.

Das Gestaltungsraster hat seinen Ursprung in der Typographie der 20er und 30er Jahre. Im Jahre 1928 fasste Tschichold in seinem Buch »Die neue Ty- pographie« moderne typographische Prinzipien in Form eines Regelwerks zu- sammen. Rastersysteme im Grafikdesign, wie wir sie heute kennen sind jedoch um einige Jahre jünger. Sie entstanden erst nach dem Zweiten Weltkrieg in der Schweiz. Das »Streben nach größtmöglicher Ordnung und Ökonomie in der Ver- wendung der typografischen Mittel«² einerseits sowie der Trend hin zu einer sachlichen Präsentation, die von strengen Text- und Bildkonzepten geprägt war, führten zum Durchbruch des Rasterprinzips in der Gestaltung. Die Publikation Vgl. Bruhn, Manfred. Integrierte Unternehmens- und Markenkommunikation: Strategische Planung und operative Umsetzung. 3., überarb. und erweiterte Auflage: Stuttgart: Schäffer-Poeschel Verlag, 2003, S. 64. 2 Müller-Brockmann, Josef. Rastersysteme für die visuelle Gestaltung. 3. überarb. Auflage: Stuttgart: Verlag Gerd Hatje, 1988, S. 7. »Gestaltungsprobleme des Grafikers«, die 1961 erschien, widmete sich erstmals diesem Thema. Bald erkannte der Autor Josef Müller-Brockmann anhand der mangelhaften praktischen Anwendung des Rasters durch die Grafiker, dass eine didaktisch durchdachte Theorie notwendig wäre, um eine kompetente Umsetzung zu ermöglichen und zu gewährleisten.

»Es bedarf eines sorgfältigen Studiums aller Kriterien, will ein Designer den Raster sinnvoll und funktionell gebrauchen. Die Tatsache, dass die überwiegende Zahl der Designer das Ordnungssystem nicht kennen oder falsch verstehen und deshalb auch falsch anwenden, mag ein Hinweis dafür sein, dass der Gebrauch des Rasters seriös erlernt werden will.«³

Eine weitere Veröffentlichung schuf Abhilfe. Brockmanns Handbuch »Rastersyste- me für die visuelle Gestaltung« verhalf dem Raster insofern zum Durchbruch, als es die komplexe Theorie schrittweise darstellt und mit zahlreichen Anwendungs- beispielen und Varianten verknüpft. Bereits 1982 erschienen, gilt es noch immer als Standardwerk der Rastertheorie.⁴

Brockmann legte seinen Ausführungen eine regelrechte Philosophie des Gestaltungsrasters zugrunde. Ästhetik geht einher mit Funktionalität und Logik. Der kreative Prozess wird in gewisser Hinsicht rationalisiert um die Fläche bezie- hungsweise den Raum beherrschen und zum Wesentlichen vordringen zu kön- nen.⁵

Das Raster ist selbst kein sichtbares Gestaltungselement, sondern bietet die Grundlage für den logischen und gleichermaßen spannungsvollen Aufbau der sichtbaren Elemente. Sowohl ökonomische Gründe (Zeit- und Kostenersparnis) als auch rationale Gründe (stilistische Vereinheitlichung, Wiedererkennung, Präsen- tationslogik) sprechen für seine Anwendung.⁶

2.2 Das Gestaltungsraster im Printdesign

Die vorliegende Arbeit geht lediglich auf das zweidimensionale Gestaltungsras- ter ein, das sowohl im Print- als auch im Webdesign relevant ist. Verschiedene Überlegungen gehen der Rasterkonstruktion des Designers voraus. Da allen Ge- staltungselementen eine mehr oder weniger feste Position im Raster zugewiesen werden soll, müssen bestimmte Elemente beziehungsweise Elementeigenschaften festgelegt werden.

Zunächst muss ein angemessenes Format gewählt werden. Hier ist anzu- merken, dass von der DIN-Norm abweichende Formate hohe Produktionskosten verursachen, da diese entweder extra hergestellt werden müssen oder es durch den Beschnitt von DIN-Formaten auf das Sonderformat zu Papierverlust kommt. Es ist daher zu überlegen, ob das abweichende Format einen bestimmten Zweck erfüllt und tatsächlich notwendig ist⁷. Daraufhin ist die Bestimmung von Schrift- grad, Spaltenbreite und Zeilenabstand wichtig. Erfahrungswerte im Printdesign zeigen, dass sieben bis zehn Worte pro Zeile einen optimalen Lesefluss ermög- lichen. Zu lange und zu kurze Zeilen sind ermüdend für den Leser. Je nachdem, welcher Schriftgrad gewählt wird, kann nun die Zeilenlänge beziehungsweise Spaltenbreite ermittelt werden.⁸

Daraus ergibt sich wiederum die größtmögliche Anzahl von Spalten im gewählten Format. Der Zeilenabstand muss an den Schriftgrad angepasst sein. Zu eng gesetzte Zeilen lassen das Textfeld zu dunkel erscheinen. Die Zeilen verlie- ren an Klarheit und Ruhe. Außerdem kollidieren bei zu geringem Zeilenabstand Unter- und Oberlängen der Buchstaben. Bei zu weit gesetzten Zeilen verliert das Schriftbild an Geschlossenheit und die Zeilen erscheinen isoliert.

Ein mögliches Prinzip, um den Zeilenabstand zu bestimmen, ist der soge- nannte »Modulor«, das 1947 von Le Corbusier veröffentlicht wurde. Er greift auf die auch für den Goldenen Schnitt relevante Fibonacci-Zahlenreihe zurück.

Dabei setzt er Schriftgrad und Zeilenabstand anhand zweier Fibonacci-Zahlensys- teme in Bezug. Für einen Schriftgrad von 10, 16 beziehungsweise 26 Punkt ergibt sich so ein Zeilenabstand von 11, 18 beziehungsweise 29 Punkt.⁹ In Anlehnung an den Modulor ist ein Zeilenabstand von etwa 110 Prozent (des Schriftgrades) zu empfehlen.

Eine weitere festzulegende Größe sind die Randproportionen und damit der Satzspiegel. Ein zu kleiner Rand lässt die Seite überfüllt wirken, ein zu großer Rand erweckt den Eindruck der Platzverschwendung. Allseits gleicher Rand wirkt häufig langweilig und statisch. Als ein ästhetisches und spannungsvolles Seiten- verhältnis gilt der Goldene Schnitt, bei dem Bund, Kopf, Außenrand und Fuß im Verhältnis 2 : 3 : 5 : 8 stehen.¹⁰

Der Satzspiegel bezeichnet die Nutzfläche des Papiers. Er wird allseits von den Seitenrändern umgeben, die einerseits genügend Spielraum für eventuell ungenauen Beschnitt bieten, andererseits aber auch eine ästhetische Funktion als Freiflächen erfüllen. Die Gestaltungselemente liegen bis auf die Paginierung und tote Kolumnentitel innerhalb des Satzspiegels. Bilder oder Marginalien können jedoch auch außerhalb liegen.

Die bisherigen Überlegungen zu Satzspiegel, Schriftgrad und Spaltenbreite müssen schließlich aufeinander abgestimmt werden. Die Höhe der Rasterfelder er- gibt sich als ein Vielfaches der Zeilenhöhe, da der Kopf der Versalien mit der obe- ren und die Unterlänge der Kleinbuchstaben mit der unteren Rasterfeldkante ali- nieren sollten. Brockmann aliniert anhand der Kegelhöhe. Ein anderes mögliches Prinzip der Alinierung orientiert sich an der x-Höhe, die Höhe der Kleinbuchsta- ben ohne Ober- und Unterlängen, die nicht in direktem Bezug zum Schriftgrad steht, sondern je nach Schriftart variiert. Legenden und Überschriften, also abweichende Schriftgrade, können mit Hilfe eines angepassten Durchschusses mit dem Fließtext aliniert werden. Grafiken und Bilder werden auf die Größe von Rasterfeldern entworfen.

Das Raster darf weder zu simpel noch zu komplex sein. Ein komplexes Raster mit vielen Rasterfeldern eröffnet einen zu großen Spielraum für die Größenverhält- nisse und Positionierungen der Elemente, so dass die Ordnung verloren gehen kann und das Layout zerrissen und unstrukturiert wirkt. Die Beherrschung eines kleinteiligen Rasters erfordert daher viel Erfahrung auf Seiten des Designers. Ein zu grobes Raster hingegen kann zu statisch sein und die Gestaltungsmög- lichkeiten stark einschränken.¹¹ Hier gilt es, anhand der vorgegebenen Elemente eine sinnvolle funktionale Lösung zu finden. Mit 32 Rasterfeldern ist eine äußerst variable Positionierung möglich.

Abbildung 1: Skizzen für ein Raster mit 32 Feldern; Müller-Brockmann (1988), S. 94f.

Abbildung in dieser Leseprobe nicht enthalten

Das Raster soll in jedem Fall den Gestaltungsprozess beschleunigen, die visuelle Wirkung verbessern und die Funktionsweise des Designs transparenter machen.¹²

Im gesamten Erscheinungsbild eines mehrseitigen Dokuments ist es der Verdienst des Gestaltungsrasters, wenn Titel und Untertitel in gleich bleibendem Stil (Schriftgrad und -art) auf gleich bleibender Position platziert werden. Ebenso erwünscht ist das konstante Verhältnis von Schriftgrad und Zeilenabstand, sowie Absätzen im Text. Die Abstände der anderen Elemente (Legenden, Randnoten, Datengrafiken, Illustrationen) voneinander sollten durch das Raster im gleich bleibenden Verhältnis sein. Gleiche Farben für gleiche Inhalte verstehen sich von selbst. Ein qualitativ hochwertiges Raster zeichnet sich dadurch aus, dass es auch für die ansprechende Gestaltung der Titelseite taugt.¹³

Ein Raster, das auf weitere Formate anwendbar sein soll (zum Beispiel Visitenkarten, Poster usw.), kann mit der Angabe von Verhältnissen arbeiten. Eine Hilfe für die Anwender sind dabei Gestaltungsrichtlinien, die in Form von Hand- büchern vom Grafiker erstellt werden und genaue Angaben zur Verwendung des Rasters bei wechselnden Formaten oder Medien machen.

Interessant wird die Frage nach der verhältnismäßigen Positionierung der Elemente, wenn es um die Übertragung auf digitale Medien geht. Im folgenden Kapitel soll es deshalb um vorhandene Parallelen und zu beachtende Unterschiede zwischen der Rasterkonstruktion im Printdesign zu der im Webdesign gehen.

2.3 Das Gestaltungsraster im Webdesign

Der Nutzen des Gestaltungsrasters im Webdesign ist deckungsgleich mit dem im Printdesign. Dennoch gelten für die Darstellung von Informationen auf dem Bild- schirm vom Printdesign abweichende Gesetzmäßigkeiten.

2.3.1 Flexibilität der Darstellung

Bildschirm-, Grafikkarten- und Browsereinstellungen bestimmen die Seitengröße und Anordnung der Elemente auf der Seite.

Gestaltungselemente können sowohl fest als auch relativ dimensioniert wer- den. Beide Varianten haben Vor- und Nachteile.¹⁴ Dies zeigen auch die Praxisbei- spiele im zweiten Teil der Arbeit, die je eine der beiden Varianten repräsentieren.

Verschiedene Methoden liegen der Seitengestaltung zugrunde (HTML, XHTML, CSS, FLASH). Aufgrund der Vielfalt und Komplexität ist es an dieser Stelle nicht möglich, auf technische Einzelheiten einzugehen. Im Folgenden sollen daher all- gemeine Hinweise zur Darstellung von Internetseiten gegeben werden.

Vor allem die Bestimmung von Schriftarten, Schriftgraden und Farben ist verbunden mit einer gewissen Darstellungsflexibilität. Falls die gewählte Schrift- art beim Benutzer nicht vorhanden ist, wählt der Browser automatisch eine im System installierte Ersatzschriftart, was die Darstellung erheblich verändern kann. Bei einer Verschiebung des Zeilenumbruchs wird die Seite unter Umstän- den unbrauchbar.¹⁵

Es sollten daher lediglich gängige, für die Bildschirmdarstellung optimierte Systemschriften verwendet werden.¹⁶ Das Gleiche gilt für den Schriftgrad, der in seiner Darstellung von der Bildschirmauflösung abhängt und auch vom Benutzer verändert werden kann. Außerdem ist zu bedenken, dass am Bildschirm ein Le- seabstand von zirka 50 bis 100 Zentimetern empfohlen wird¹⁷, während man im Printbereich von einem Leseabstand von zirka 20 bis 30 Zentimetern ausgeht. Die Schriftgrade können daher nicht ohne weiteres aus der Printversion ins Web über- tragen werden. Monitorart, -größe und -auflösung sind weitere Variablen. Außer- dem verwenden PC und Mac voneinander abweichende Definitionen eines Pixels, so dass Schriftgrade am Mac grundsätzlich kleiner dargestellt werden als am PC.

Es ergeben sich darüber hinaus auch unvermeidbare »Farbverschiebungen durch den Wechsel des Farbraums von Skalen- oder Körperfarben (CMYK) bezie- hungsweise genormten Paletten (HKS, Pantone) zu Spektralfarben (RGB)«.¹⁸ Die jeweilige Farbgebung hängt von der eingestellten Farbtiefe der Grafikkarte und den Bildschirmeinstellungen ab.

»Am drastischsten sind die Farbabweichungen zwischen Mac und PC (anderer Gammawert)«.¹⁹

Hinsichtlich der Gestaltung seiner Internetpräsenz als Kommunikationsmit- tels bedeuten diese Unterschiede für das Unternehmen, dass es nicht letztgültig bestimmen und kontrollieren kann, in welcher Form ein Kunde die Seiteninhalte (zum Beispiel eine Produktpräsentation) wahrnimmt.

Haptische Aspekte, die im Printdesign ein wichtiger Aspekt der Präsenta- tion sein können, entfallen gänzlich. Dafür kommen andere Dimensionen hinzu. Im Webdesign ist es möglich, verschiedenste Audio- und Videofunktionen einzu- binden: animierte Grafiken, Hintergrundmusik, Navigationssounds können den Eindruck sowohl positiv als auch negativ entscheidend prägen. »Trotz multimedi- aler ‚Spielereien‘ sind Texte und Bilder nach wie vor die wichtigsten Inhalte auf Webseiten.«²⁰

2.3.2 Rasterkonstruktion im Webdesign

Das Gestaltungsraster im Webdesign dient ebenso wie im Printdesign dazu, dass Titel, Grafiken usw. innerhalb einer Internetpräsenz immer an der gleichen Stelle stehen. Ein möglichst statischer, gleich bleibender Hintergrund gibt den veränder- lichen Elementen eine Grundlage. Zunächst steht fest: Im Webdesign ist die sicht- bare Gestaltungsfläche, also die Anzeige des Ausgabebildschirms, in der Regel ein Querformat, dessen Gestaltungsfläche sich durch Scrollen nach unten und rechts vergrößert. Eine Textzeile darf jedoch nie über den Bildschirmrand hinaus- gehen, damit der Benutzer während des Lesens nicht scrollen muss.

Zu den klassischen Elementen zählt im Webdesign die Navigationsleiste beziehungsweise das Navigationsmenü, das beim Navigieren durch die Seite für eine benutzerfreundliche Bedienung durchgehend sichtbar sein sollte. Gestalte- rische Ästhetik muss dabei der Funktionalität nicht prinzipiell entgegenstehen, darf jedoch Übersichtlichkeit und Logik der Seite nicht gefährden.²¹

[...]

¹ Vgl. Bruhn, Manfred. Integrierte Unternehmens- und Markenkommunikation: Strategische Planung und operative Umsetzung. 3., überarb. und erweiterte Auflage: Stuttgart: Schäffer-Poeschel Verlag, 2003, S. 64.

² Müller-Brockmann, Josef. Rastersysteme für die visuelle Gestaltung. 3. überarb. Auflage: Stuttgart: Verlag Gerd Hatje, 1988, S. 7.

³ Müller-Brockmann (1988), S. 9.

⁴ Vgl. Müller-Brockmann (1988), S. 7ff.

⁵ Vgl. Müller-Brockmann (1988), S. 10.

⁶ Vgl. Müller-Brockmann (1988), S. 12.

⁷ Vgl. Müller-Brockmann (1988), S. 15.

⁸ Vgl. Müller-Brockmann (1988), S. 30ff.

⁹ Ambrose, Gavin; Harris, Paul. Grafikdesign: Grundmuster des kreativen Gestaltens.Reinbek: Rowohlt Taschenbuch Verlag GmbH, 2004, S. 45.

¹⁰ Böhringer, Joachim u.a. Kompendium der Mediengestaltung für Digital- und Printmedien.Zweite, überarbeitete und erweiterte Auflage: Heidelberg: Springer, 2002, S. 27.

¹¹ Müller-Brockmann (1988), S. 76; 87.

¹² Ambrose u.a. (2004), S. 50.

¹³ Vgl. zu diesem Abschnitt Müller-Brockmann (1988), S. 134.

¹⁴ Brossmann, Ulf. Brossmann Webpublishing. 10. September 2006.<http://www.brossmann.biz/goodies.php?d=tipps&t=schriftgroesse>

¹⁵ Vgl. Böhringer u.a. (2002), S. 129.

¹⁶ Vgl. Böhringer u.a. (2002), S. 871.

¹⁷ Kuratorium Gutes Sehen e.V. sehen.de | Das Portal für gutes Sehen. Ratgeber, Gesundheit, Styling.13. September 2006. <http://www.sehen.de/downloads/broschueren/KGS_sehen_bildschirm.pdf>, S. 8.

¹⁸ Lankau, Ralf. Webdesign und -publishing: Projektmanagement für Websites. Darmstadt: Hanser, 2000, S. 66.

¹⁹ Lankau, Ralf (2000), S. 122; ebenso Böhringer u.a. (2002), S. 865.

²⁰ Böhringer u.a. (2002), S. 871.

²¹ Vgl. Böhringer u.a. (2002), S. 167ff.