Inhaltsverzeichnis

1  Einleitung  5

2  Das Gestaltungsraster im Corporate Design  6

2.1  Aufkommen des Gestaltungsrasters  6

2.2  Das Gestaltungsraster im Printdesign  8

2.3  Das Gestaltungsraster im Webdesign  11

2.3.1  Flexibilität der Darstellung  11

2.3.2  Rasterkonstruktion im Webdesign  13

3  Die Internetpräsenz des Vertriebsanzeigers  14

3.1  Die Anzeigenplattform Vertriebsanzeiger  14

3.2  Die Zielgruppe  14

3.3  Zweck der Internetpräsenz  15

3.4  Die Gestaltungselemente: Text und Grafik  15

3.5  Überlegungen zur Art des Rasters  17

3.6  Die praktische Umsetzung  17

3.6.1  Das Gestaltungsraster  17

3.6.2  Die Seitenelemente  20

3.6.3  Elementbeschreibung  20

3.6.4  Die Navigationsstruktur  21

3.6.5  Die Farbgebung  22

3.6.6  Abstände und Winkel  24

3.6.7  Die Wirkung der Internetpräsenz  25

3.6.8  Abhängigkeiten innerhalb des Gestaltungsrasters  25

1  Einleitung  

4  Die Internetpräsenz von Claudia Faust  27

4.1  Die Fotografin Claudia Faust  27

4.2  Allgemeine Vorüberlegungen und Ideen 27 Zu Beginn sollen einige Eckdaten zu Ursprung und Funktion des Gestaltungsras-  

4.3  Die Seitenstruktur 28 ters als Element des Corporate Designs genannt werden. Die Prinzipien der visu-  

4.3.1  Die Bereiche der Seite 28 ellen Gestaltung, die schon aus dem Printbereich bekannt sind, werden daraufhin  

4.3.2  Das Navigationskonzept 30 auf ihre Anwendbarkeit im Webdesign überprüft. Dies geschieht anhand zweier  

4.4  Die Gestaltung 32 Praxisbeispiele aus dem Webdesign, die auf ihre Gestaltungselemente hin ana-  

4.4.1  Das Farbkonzept 33 lysiert werden, wobei sowohl Chancen als auch Grenzen hinsichtlich der Gestal-  

4.4.2  Das Gestaltungsraster 34 tungselemente für Internetpräsenzen deutlich werden sollen.  

4.5  Kurzvorstellung der Administrationsoberfläche 42 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.  

5  Zusammenfassung 43 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-  

6  Glossar 44 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-  

7  Literaturverzeichnis 49 tungsraster im Webdesign eine umfangreichere Funktion ausübt als ein Raster im  

7.1  Offline-Medien 49 Printdesign.  

7.2  Online-Medien  49

8  Abbildungsverzeichnis  52

8.1  Übernommene Abbildungen  52

8.2  Eigene Abbildungen  52

2 Das Gestaltungsraster im Corporate Design

»Gestaltungsprobleme des Grafikers«, die 9 erschien, widmete sich erstmals diesem Thema. Bald erkannte der Autor Josef Müller-Brockmann anhand der Das Corporate Design umfasst die formale Vereinheitlichung unterschiedlicher mangelhaften praktischen Anwendung des Rasters durch die Grafiker, dass eine Kommunikationsmittel einer Organisation oder eines Unternehmens. Dadurch didaktisch durchdachte Theorie notwendig wäre, um eine kompetente Umsetzung kann im Hinblick auf zentrale Kommunikationsziele ein charakteristisches Er-zu ermöglichen und zu gewährleisten.

scheinungsbild vermittelt werden. Neben ständig wiederkehrenden Unternehmens- oder Markenzeichen zählen auch Hausfarben und -schriften zu den zentra-»Es bedarf eines sorgfältigen Studiums aller Kriterien, will ein Designer den len Gestaltungselementen, die auf alle denkbaren Trägermedien beziehungsweise Raster sinnvoll und funktionell gebrauchen. Die Tatsache, dass die überwiegende Werbemittel anwendbar sein sollen. Bei klassischen Printprodukten (Briefe, Bro-Zahl der Designer das Ordnungssystem nicht kennen oder falsch verstehen und schüren, Flyer, Plakate usw.) spielen Formate und materielle Zusammensetzungen deshalb auch falsch anwenden, mag ein Hinweis dafür sein, dass der Gebrauch (Haptik) eine Rolle. Die sichtbaren Gestaltungselemente werden mit Hilfe eines so des Rasters seriös erlernt werden will.« ³ genannten Gestaltungsrasters angeordnet.

Eine weitere Veröffentlichung schuf Abhilfe. Brockmanns Handbuch »Rastersyste- 2 .1Aufkommen des Gestaltungsrasters me für die visuelle Gestaltung« verhalf dem Raster insofern zum Durchbruch, als Das Raster ist wie ein Fischernetz, das typographische Zeichen, Bilder, Grafiken, es die komplexe Theorie schrittweise darstellt und mit zahlreichen Anwendungsbeispielen und Varianten verknüpft. Bereits 982 erschienen, gilt es noch immer Farbflächen usw. auffängt. Die Maschen dieses Netzes geben jedem Element seinen richtigen Platz. als Standardwerk der Rastertheorie. 4

Das Gestaltungsraster hat seinen Ursprung in der Typographie der 20er Brockmann legte seinen Ausführungen eine regelrechte Philosophie des und 30er Jahre. Im Jahre 928 fasste Tschichold in seinem Buch »Die neue Ty-Gestaltungsrasters zugrunde. Ästhetik geht einher mit Funktionalität und Logik. pographie« moderne typographische Prinzipien in Form eines Regelwerks zu-Der kreative Prozess wird in gewisser Hinsicht rationalisiert um die Fläche beziesammen. Rastersysteme im Grafikdesign, wie wir sie heute kennen sind jedoch hungsweise den Raum beherrschen und zum Wesentlichen vordringen zu könum einige Jahre jünger. Sie entstanden erst nach dem Zweiten Weltkrieg in der nen.

Schweiz. Das »Streben nach größtmöglicher Ordnung und Ökonomie in der Ver-Das Raster ist selbst kein sichtbares Gestaltungselement, sondern bietet wendung der typografischen Mittel« ² einerseits sowie der Trend hin zu einer die Grundlage für den logischen und gleichermaßen spannungsvollen Aufbau der sachlichen Präsentation, die von strengen Text- und Bildkonzepten geprägt war, sichtbaren Elemente. Sowohl ökonomische Gründe (Zeit- und Kostenersparnis) als führten zum Durchbruch des Rasterprinzips in der Gestaltung. Die Publikation auch rationale Gründe (stilistische Vereinheitlichung, Wiedererkennung, Präsentationslogik) sprechen für seine Anwendung.

Vgl. Bruhn, Manfred. Integrierte Unternehmens- und Markenkommunikation: Strategische Planung und 3 Müller-Brockmann (988), S. 9.

operative Umsetzung. 3., überarb. und erweiterte Auflage: Stuttgart: Schäffer-Poeschel Verlag, 2003, S. 4. 4 Vgl. Müller-Brockmann (988), S. ff. 2 Müller-Brockmann, Josef. Rastersysteme für die visuelle Gestaltung. 3. überarb. Auflage: Stuttgart: Verlag Vgl. Müller-Brockmann (988), S. 0. Gerd Hatje, 988, S. . Vgl. Müller-Brockmann (988), S. 2.

2 .2 Das Gestaltungsraster im Printdesign sich so ein Zeilenabstand von , 8 beziehungsweise 29 Punkt. ⁹ In Anlehnung an den Modulor ist ein Zeilenabstand von etwa 0 Prozent (des Schriftgrades) zu Die vorliegende Arbeit geht lediglich auf das zweidimensionale Gestaltungsraster ein, das sowohl im Print- als auch im Webdesign relevant ist. Verschiedene empfehlen.

Überlegungen gehen der Rasterkonstruktion des Designers voraus. Da allen Ge-Eine weitere festzulegende Größe sind die Randproportionen und damit staltungselementen eine mehr oder weniger feste Position im Raster zugewiesen der Satzspiegel. Ein zu kleiner Rand lässt die Seite überfüllt wirken, ein zu großer werden soll, müssen bestimmte Elemente beziehungsweise Elementeigenschaften Rand erweckt den Eindruck der Platzverschwendung. Allseits gleicher Rand wirkt festgelegt werden. häufig langweilig und statisch. Als ein ästhetisches und spannungsvolles Seiten-Zunächst muss ein angemessenes Format gewählt werden. Hier ist anzuverhältnis gilt der Goldene Schnitt, bei dem Bund, Kopf, Außenrand und Fuß im Verhältnis 2 : 3 : : 8 stehen. ⁰ merken, dass von der DIN-Norm abweichende Formate hohe Produktionskosten verursachen, da diese entweder extra hergestellt werden müssen oder es durch Der Satzspiegel bezeichnet die Nutzfläche des Papiers. Er wird allseits von den Beschnitt von DIN-Formaten auf das Sonderformat zu Papierverlust kommt. den Seitenrändern umgeben, die einerseits genügend Spielraum für eventuell Es ist daher zu überlegen, ob das abweichende Format einen bestimmten Zweck ungenauen Beschnitt bieten, andererseits aber auch eine ästhetische Funktion als erfüllt und tatsächlich notwendig ist. Daraufhin ist die Bestimmung von Schrift-Freiflächen erfüllen. Die Gestaltungselemente liegen bis auf die Paginierung und grad, Spaltenbreite und Zeilenabstand wichtig. Erfahrungswerte im Printdesign tote Kolumnentitel innerhalb des Satzspiegels. Bilder oder Marginalien können zeigen, dass sieben bis zehn Worte pro Zeile einen optimalen Lesefluss ermög-jedoch auch außerhalb liegen.

lichen. Zu lange und zu kurze Zeilen sind ermüdend für den Leser. Je nachdem, Die bisherigen Überlegungen zu Satzspiegel, Schriftgrad und Spaltenbreite welcher Schriftgrad gewählt wird, kann nun die Zeilenlänge beziehungsweise müssen schließlich aufeinander abgestimmt werden. Die Höhe der Rasterfelder er-Spaltenbreite ermittelt werden. ⁸ gibt sich als ein Vielfaches der Zeilenhöhe, da der Kopf der Versalien mit der obe-Daraus ergibt sich wiederum die größtmögliche Anzahl von Spalten im ren und die Unterlänge der Kleinbuchstaben mit der unteren Rasterfeldkante aligewählten Format. Der Zeilenabstand muss an den Schriftgrad angepasst sein. Zu nieren sollten. Brockmann aliniert anhand der Kegelhöhe. Ein anderes mögliches eng gesetzte Zeilen lassen das Textfeld zu dunkel erscheinen. Die Zeilen verlie-Prinzip der Alinierung orientiert sich an der x-Höhe, die Höhe der Kleinbuchstaren an Klarheit und Ruhe. Außerdem kollidieren bei zu geringem Zeilenabstand ben ohne Ober- und Unterlängen, die nicht in direktem Bezug zum Schriftgrad Unter- und Oberlängen der Buchstaben. Bei zu weit gesetzten Zeilen verliert das steht, sondern je nach Schriftart variiert. Legenden und Überschriften, also Schriftbild an Geschlossenheit und die Zeilen erscheinen isoliert. abweichende Schriftgrade, können mit Hilfe eines angepassten Durchschusses Ein mögliches Prinzip, um den Zeilenabstand zu bestimmen, ist der soge-mit dem Fließtext aliniert werden. Grafiken und Bilder werden auf die Größe von nannte »Modulor«, das 94 von Le Corbusier veröffentlicht wurde. Er greift auf Rasterfeldern entworfen.

die auch für den Goldenen Schnitt relevante Fibonacci-Zahlenreihe zurück. Dabei setzt er Schriftgrad und Zeilenabstand anhand zweier Fibonacci-Zahlensysteme in Bezug. Für einen Schriftgrad von 0, beziehungsweise 2 Punkt ergibt 9 Ambrose, Gavin; Harris, Paul. Grafikdesign: Grundmuster des kreativen Gestaltens. Reinbek: Rowohlt Taschenbuch Verlag GmbH, 2004, S. 4. 0 Böhringer, Joachim u.a. Kompendium der Mediengestaltung für Digital- und Printmedien. Vgl. Müller-Brockmann (988), S. . 8 Vgl. Müller-Brockmann (988), S. 30ff. Zweite, überarbeitete und erweiterte Auflage: Heidelberg: Springer, 2002, S. 2.

8 9

Das Raster darf weder zu simpel noch zu komplex sein. Ein komplexes Raster mit Absätzen im Text. Die Abstände der anderen Elemente (Legenden, Randnoten, vielen Rasterfeldern eröffnet einen zu großen Spielraum für die Größenverhält-Datengrafiken, Illustrationen) voneinander sollten durch das Raster im gleich nisse und Positionierungen der Elemente, so dass die Ordnung verloren gehen bleibenden Verhältnis sein. Gleiche Farben für gleiche Inhalte verstehen sich von kann und das Layout zerrissen und unstrukturiert wirkt. Die Beherrschung eines selbst. Ein qualitativ hochwertiges Raster zeichnet sich dadurch aus, dass es auch kleinteiligen Rasters erfordert daher viel Erfahrung auf Seiten des Designers. für die ansprechende Gestaltung der Titelseite taugt. ³ Ein zu grobes Raster hingegen kann zu statisch sein und die Gestaltungsmög-Ein Raster, das auf weitere Formate anwendbar sein soll (zum Beispiel lichkeiten stark einschränken. Hier gilt es, anhand der vorgegebenen Elemente Visitenkarten, Poster usw.), kann mit der Angabe von Verhältnissen arbeiten. Eine eine sinnvolle funktionale Lösung zu finden. Mit 32 Rasterfeldern ist eine äußerst Hilfe für die Anwender sind dabei Gestaltungsrichtlinien, die in Form von Handvariable Positionierung möglich. 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

Bildschirm-, Grafikkarten- und Browsereinstellungen bestimmen die Seitengröße Abbildung : Skizzen für ein Raster mit 32 Feldern; Müller-Brockmann (988), S. 94f.

und Anordnung der Elemente auf der Seite.

Das Raster soll in jedem Fall den Gestaltungsprozess beschleunigen, die visuelle Gestaltungselemente können sowohl fest als auch relativ dimensioniert wer-Wirkung verbessern und die Funktionsweise des Designs transparenter machen. ² den. Beide Varianten haben Vor- und Nachteile. ⁴ Dies zeigen auch die Praxisbei-Im gesamten Erscheinungsbild eines mehrseitigen Dokuments ist es der spiele im zweiten Teil der Arbeit, die je eine der beiden Varianten repräsentieren. 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

3 Vgl. zu diesem Abschnitt Müller-Brockmann (988), S. 34.

4 Brossmann, Ulf. Brossmann Webpublishing. 0. September 200. Müller-Brockmann (988), S. ; 8. 2 Ambrose u.a. (2004), S. 0.

0

Verschiedene Methoden liegen der Seitengestaltung zugrunde (HTML, XHTML, »Am drastischsten sind die Farbabweichungen zwischen Mac und PC (anderer CSS, FLASH). Aufgrund der Vielfalt und Komplexität ist es an dieser Stelle nicht Gammawert)«. 9

Hinsichtlich der Gestaltung seiner Internetpräsenz als Kommunikationsmitmöglich, auf technische Einzelheiten einzugehen. Im Folgenden sollen daher allgemeine Hinweise zur Darstellung von Internetseiten gegeben werden. tels bedeuten diese Unterschiede für das Unternehmen, dass es nicht letztgültig Vor allem die Bestimmung von Schriftarten, Schriftgraden und Farben ist bestimmen und kontrollieren kann, in welcher Form ein Kunde die Seiteninhalte (zum Beispiel eine Produktpräsentation) wahrnimmt. verbunden mit einer gewissen Darstellungsflexibilität. Falls die gewählte Schrift-Haptische Aspekte, die im Printdesign ein wichtiger Aspekt der Präsentaart beim Benutzer nicht vorhanden ist, wählt der Browser automatisch eine im System installierte Ersatzschriftart, was die Darstellung erheblich verändern tion sein können, entfallen gänzlich. Dafür kommen andere Dimensionen hinzu. kann. Bei einer Verschiebung des Zeilenumbruchs wird die Seite unter Umstän-Im Webdesign ist es möglich, verschiedenste Audio- und Videofunktionen einzubinden: animierte Grafiken, Hintergrundmusik, Navigationssounds können den Es sollten daher lediglich gängige, für die Bildschirmdarstellung optimierte Eindruck sowohl positiv als auch negativ entscheidend prägen. »Trotz multimedi-Systemschriften verwendet werden. Das Gleiche gilt für den Schriftgrad, der in aler ‚Spielereien‘ sind Texte und Bilder nach wie vor die wichtigsten Inhalte auf seiner Darstellung von der Bildschirmauflösung abhängt und auch vom Benutzer Webseiten.« 20

verändert werden kann. Außerdem ist zu bedenken, dass am Bildschirm ein Le- 2 .3 .2Rasterkonstruktion im Webdesign seabstand von zirka 0 bis 00 Zentimetern empfohlen wird , während man im Printbereich von einem Leseabstand von zirka 20 bis 30 Zentimetern ausgeht. Die Das Gestaltungsraster im Webdesign dient ebenso wie im Printdesign dazu, dass Schriftgrade können daher nicht ohne weiteres aus der Printversion ins Web über-Titel, Grafiken usw. innerhalb einer Internetpräsenz immer an der gleichen Stelle stehen. Ein möglichst statischer, gleich bleibender Hintergrund gibt den verändertragen werden. Monitorart, -größe und -auflösung sind weitere Variablen. Außerdem verwenden PC und Mac voneinander abweichende Definitionen eines Pixels, lichen Elementen eine Grundlage. Zunächst steht fest: Im Webdesign ist die sichtso dass Schriftgrade am Mac grundsätzlich kleiner dargestellt werden als am PC. bare Gestaltungsfläche, also die Anzeige des Ausgabebildschirms, in der Regel Es ergeben sich darüber hinaus auch unvermeidbare »Farbverschiebungen ein Querformat, dessen Gestaltungsfläche sich durch Scrollen nach unten und durch den Wechsel des Farbraums von Skalen- oder Körperfarben (CMYK) bezie-rechts vergrößert. Eine Textzeile darf jedoch nie über den Bildschirmrand hinaushungsweise genormten Paletten (HKS, Pantone) zu Spektralfarben (RGB)«. ⁸ Die gehen, damit der Benutzer während des Lesens nicht scrollen muss. Zu den klassischen Elementen zählt im Webdesign die Navigationsleiste jeweilige Farbgebung hängt von der eingestellten Farbtiefe der Grafikkarte und den Bildschirmeinstellungen ab. beziehungsweise das Navigationsmenü, das beim Navigieren durch die Seite für eine benutzerfreundliche Bedienung durchgehend sichtbar sein sollte. Gestalterische Ästhetik muss dabei der Funktionalität nicht prinzipiell entgegenstehen,

darf jedoch Übersichtlichkeit und Logik der Seite nicht gefährden. ² Vgl. Böhringer u.a. (2002), S. 29. Vgl. Böhringer u.a. (2002), S. 8.

Kuratorium Gutes Sehen e.V. sehen.de | Das Portal für gutes Sehen. Ratgeber, Gesundheit, Styling. 9 Lankau, Ralf (2000), S. 22; ebenso Böhringer u.a. (2002), S. 8.

3. September 200. , S. 8. 20 Böhringer u.a. (2002), S. 8. 8 Lankau, Ralf. Webdesign und -publishing: Projektmanagement für Websites. Darmstadt: Hanser, 2000, S. . 2 Vgl. Böhringer u.a. (2002), S. ff.

2 3