Überblick Page Design Einführung Grafikgestaltung 100 Ausgewogenheit der Seiten Design-Gitternetze für Seiten Sicherheitsbereiche für Grafiken Kopfzeilen Typographie I Typographie II Schriftarten Einheitlichkeit Grundlegendes zu Tabellen Länge der Seiten Plattformübergreifende Fragen Frames Komplexe Tabellen		Grafikgestaltung 100 Das Medium verstehen Die Benutzer erfahren eine Web-Seite auf zweierlei Weise: einerseits als direktes Medium, auf dem sie die Seiten online lesen, und andererseits als Bereitstellungsmedium, mit dem sie auf Informationen zugreifen, die sie später in Textdateien herunterladen oder auf Papier ausdrucken. Für welches Design Sie sich entscheiden, hängt zu einem großen Teil davon ab, wie die Benutzer die Site Ihrer Meinung nach vorwiegend nutzen werden. Dokumente, die online gelesen werden sollen, müssen kompakt sein. Bei ihnen müssen Menge und Umfang der Grafiken sorgfältig auf die Bandbreite abgestimmt sein, die dem Großteil Ihres Publikums zur Verfügung steht. Vermeiden Sie es aber, Ihre Leser zu bevormunden oder ihre Intelligenz zu unterschätzen. Das verbreitete Vorurteil, daß Web-User durchwegs halbgebildete "Screenager" seien, die nicht mehr als zwei Sätze nacheinander zu lesen imstande sind, ist eine grobe Unterschätzung und aller Wahrscheinlichkeit nach für Sie und Ihr Publikum ohnehin ohne Relevanz. Sie brauchen Ihre Inhalte nicht idiotensicher zu präsentieren oder sie auf ein sinnloses Skelett zu reduzieren. Machen Sie sich einfach bewußt, daß die Leser längere Seiten oder komplexere Präsentationen meist ausdrucken, um sie offline auf Papier zu lesen. Eine visuelle Hierarchie schaffen Die wichtigste Aufgabe der grafischen Gestaltung besteht darin, eine starke, konsequente visuelle Hierarchie zu schaffen. In ihr werden die wichtigen Elemente in den Vordergrund gestellt, die Inhalte in logischer und vorhersagbarer Weise geordnet.. Grafische Gestaltung ist visuelles Informationsmanagement mit Hilfe von Layout, Typografie und Illustration. Dieses Mittel wird dazu verwendet, den Blick des Lesers über die Seite zu führen. Er nimmt eine Seite zuerst als eine große Ansammlung von Formen und Farben wahr (siehe unten), bei der sich die Elemente des Vordergrunds gegen den Hintergrund abheben. Erst in zweiter Linie beginnt er, spezifische Informationen, zunächst aus eventuellen Grafiken, wahrzunehmen. Erst dann beginnt er in die Tiefe des Mediums einzudringen und einzelne Worte und Phrasen zu lesen: Aus diesem Grund ist die allgemeine grafische Ausgewogenheit und Ordnung der Seite entscheidend dafür, ob es gelingt, den Leser für den Inhalt der Site zu gewinnen. Eine langweilige Seite mit Fließtext wirkt abschreckend auf das Auge, weil sie sich als eine Masse undifferenzierten Grautons präsentiert. Gleichzeitig macht eine Seite, die von schlecht gestalteten oder zu aufdringlichen Grafiken oder Schriften dominiert wird, einen schlechten Eindruck auf anspruchsvolle Benutzer, die nach aussagekräftigen Inhalten Ausschau halten. Daher sollte eine Ausgewogenheit angestrebt werden, die das Auge durch visuelle Kontraste anzieht: Proportionen und Angemessenheit sind die wichtigsten Faktoren für eine erfolgreiche Gestaltung. Entscheidungen hinsichtlich dieser Faktoren können Sie nur im Kontext Ihrer allgemeinen Vorstellungen und Absichten bei der Entwicklung einer Web-Site treffen. Weiterhin müssen Sie die Art Ihrer Inhalte und vor allem die Erwartungen Ihres Publikums berücksichtigen. Den Blick des Lesers führen In der westlichen Welt wird von links nach rechts und von oben nach unten gelesen. Die zugrundeliegende visuelle Achse ist bestimmend für die meisten Gestaltungsentscheidungen und Ausgangsbasis für das grafische Design gedruckter Publikationen. Im Seitenlayout dominiert herkömmlicherweise der obere Seitenteil, was für Web-Seiten ganz besonders zutrifft, da auf den typischen 14 bis 16 Zoll großen Computermonitoren zunächst nur die ersten vier Zoll der Seite sichtbar werden. Zarte Pastelltöne, wie sie in der Naturabbildungen häufig vorkommen, eignen sich am besten als Hintergrund oder für kleinere Elemente, vor allem dann, wenn Sie in der Grafikgestaltung und Farbauswahl ein Neuling sind. Vermeiden Sie grelle, hochsaturierte Primärfarben, ausgenommen in Bereichen, die Sie besonders betonen wollen. Aber selbst dort sind diese Farben mit Vorsicht zu verwenden. Buchstaben müssen sich immer scharf von der Hintergrundfarbe abheben. Wenn Sie auffällige oder komplexe Grafiken verwenden wollen, sollten Sie einen professionellen Grafikdesigner beauftragen. Wenn Sie kein Grafikdesigner sind und die Grafiken selbst erstellen müssen, halten Sie alles eher konservativ, konventionell und einfach. Grafische Verwirrung Hüten Sie sich vor grafischen Verschnörkelungen. Horizontale Trennlinien, kreisförmige Absatzmarken, Piktogramme und andere visuelle Markierungen haben in manchen Fällen zwar durchaus ihre Berechtigung, sollten aber, wenn überhaupt, nur sparsam verwendet werden, um einen zersplitterten und verwirrenden Layouteindruck zu vermeiden. Dasselbe gilt für größere Schriftgrade auf Web-Seiten. Einer der Gründe, warum professionelle Grafikdesigner so unzufrieden mit HTML sind, liegt in den grotesk großen Schriftgraden, die von den meisten Web-Browsern bei der Verwendung der H1 und H2 Header-Tags angezeigt werden. Die Werkzeuge für grafische Hervorhebungen sind ausdrucksstark genug und sollten, um eine maximale Wirkung zu erzielen, nur sparsam verwendet werden. Ihr übermäßiger Einsatz wirkt wie ein Patchwork- alles ist grell und bunt, nichts wird wirklich betont: Seien Sie konsequent Erstellen Sie sich ein Layout-Gitternetz und eine Vorlage für den Umgang mit Ihrem Text und Ihren Grafiken. An diese Vorlage halten Sie sich dann konsequent. So sorgen Sie dafür, daß alle Seiten Ihrer Site einen bestimmten Rhythmus und ein einheitliches Erscheinungsbild haben. Wiederholungen sind in diesem Fall nicht langweilig, sondern geben ihr eine grafische Identität. So wird das spezifische "Ortsgefühl" verstärkt, durch das Ihre Site den Benutzern besser im Gedächtnis bleibt. Ein einheitlicher Layout- und Navigationsansatz gestattet es ihm, sich schnell auf Ihr Design einzustellen und sicher vorauszusagen, wo er die gewünschten Informationen und Navigationssteuerungen findet. Wenn Sie sich für ein grafisches Thema entschieden haben, verwenden Sie dieses durchgehend auf Ihrer Site. Das Banner auf der Homepage von Metadesign (siehe unten) legt ein grafisches Thema fest und stellt die unverwechselbare Typografie sowie eine Gruppe von Navigationssymbolen vor: Die Grafik wurde von der Originalgröße verkleinert   www.metadesign.com/ Dies ist ein Banner auf dem oberen Teil einer Innenseite der Site von Metadesign. Beachten Sie, wie sich das Typografie- und Symbolthema durch alle Banner der Innenseiten hindurchzieht. So können beim Benutzer keine Zweifel mehr entstehen, durch wessen Site er navigiert. Die Grafik wurde von der Originalgröße verkleinert   www.metadesign.com/ Stil Versuchen Sie nicht angestrengt, einen bestimmten Stil für Ihre Site zu kreieren und achten Sie auf der anderen Seite darauf, daß Sie nicht einfach grafische Elemente einer anderen Site oder einer gedruckten Publikation importieren und damit Ihre Seiten dekorieren. Der grafische und redaktionelle Stil Ihrer Web-Site sollte sich aus dem natürlichen Umgang mit Inhalt und Seitenlayout ergeben. Referenzen Hurlburt, A. 1977. Layout: The design of the printed page. New York: Watson-Guptill. Meggs, P. B. 1989. Type and image: The language of graphic design. New York: Van Nostrand Reinhold. Metadesign. Mok, C. 1996. Designing business: multiple media, multiple disciplines. San Jose: Adobe Press. Spiekermann, E., and E. M. Ginger. 1993. Stop stealing sheep & find out how type works. Mountain View, CA: Adobe Press. Tufte, E. R. 1990. Envisioning information. Cheshire, CT: Graphics Press. White, J. V. 1988. Graphic design for the electronic age. New York: Watson-Guptil. Wilson, A. 1974. The design of books. Salt Lake City: Peregrine Smith, Inc.