Ü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		Ausgewogenheit der Seiten Bei der Gestaltung von Web-Seiten geht es hauptsächlich darum abzuwägen, wie sich ihr Aufbau mit Hilfe von Grafiken und beweglichen Bildern im Verhältnis zur Leistungsfähigkeit der unterschiedlichen Hypermedia-Internet-Verbindungen verhält. Manche Homepages oder Menüseiten ähneln in ihrer Funktion eher den Umschlagseiten eines Buches oder eines Magazins. Es geht jedoch vielmehr darum, den Leser mit einer Kombination von beschreibendem Text und interessanten Grafiken, die auf die Themen Bezug nehmen, in die Seiten hineinzuziehen: Die Grafik wurde von der Originalgröße verkleinert   www.apple.com Das effizienteste Design für den herkömmlichen Internet-Benutzer, der sich über Modem in das Netz einwählt, besteht aus einem sorgfältigen Text- und Link-Layout mit relativ wenigen kleinen Grafiken. Solche Seiten lassen sich rasch laden, selbst wenn der Zugriff mit einem 28.8 kbps-Modem über SLIP- oder PPP-Leitungen erfolgt. Trotzdem können sie eine gute grafische Wirkung haben. Hier sehen Sie das elegante, aber minimalistische Layoutdesign von Razorfish für die Pace-Wildenstein Gallery: Die Grafik wurde von der Originalgröße verkleinert   http://www.pacewildenstein.com/ Der Bildschirm ist kleiner als eine gedruckte Seite Während Web-Seiten und konventionelle Dokumente viele grafische, funktionale und redaktionelle Gemeinsamkeiten haben, werden Informationen auf Webbasis hauptsächlich auf Computerbildschirmen bereitgestellt. Dabei ist zu beachten, daß sich der Bildschirm von einer gedruckten Seite sehr stark unterscheidet. Grafikdesigner erstellen oft Seitengitternetze, die auf ihren extragroßen Monitoren gut aussehen. Dabei vergessen sie oft, daß die meisten Benutzer nicht mehr als etwa die Hälfte einer typischen Web-Seite auf einmal sehen können und nur 10% der Websurfer die Seiten weiterscrollen. Die Breite der Seite Computerbildschirme sind meist kleiner als Bücher oder Magazine. Ein sehr häufiger Fehler im Web-Design besteht darin, die Breite der Seitengrafik über den Bereich hinaus auszudehnen, den die meisten Benutzer auf ihren 14- oder 15 Zoll-Bildschirmen sehen können. Die Größe der Grafiken in Web-Seiten Grafiken von Web-Seiten sollten nicht mehr als 535 Pixel breit und 320 Pixel hoch sein. Anderenfalls ist die Grafik zu breit, um sie auf auf einem A4-Blatt oder gar einem noch kleineren Format auszudrucken. Selbst wenn Ihre Benutzer in der Regel große Bildschirme haben, weist das typische Netscape- oder Internet Explorer-Fenster eine normierte Fenstergröße auf, die auf kleinere Monitore abgestimmt ist. Die ansonsten exzellente Homepage von Microsoft zum Beispiel ist für viele Standard-Büromonitore zu breit. Die Grafik wurde von der Originalgröße verkleinert   www.microsoft.com Die folgenden Größenempfehlungen basieren auf den typischen Abmessungen eines Web-Browsers auf einem 14- oder 15 Zoll-Macintosh- oder Windows 95-Bildschirm: Die richtigen Abmessungen der Seiten Eine Web-Seite kann so gut wie jede Länge haben. Trotzdem bleibt Ihnen am oberen Rand nur etwa 30 Quadratzoll Platz, um die Aufmerksamkeit des durchschnittlichen Lesers zu erwecken. Der Grund dafür ist, daß der Benutzer beim Laden Ihrer Seite nicht mehr sieht. Wenn Sie nichts als eine große, langsam ladbare Grafik anbieten, werden sich die meisten zufälligen Benutzer von Ihrer Site abwenden, bevor sie den Rest auch nur zu Gesicht bekommen haben. Wir haben eine Seitenhintergrundsgrafik erstellt, die die Sicherheitsbereiche für 640 x 480 Pixel-Bildschirme zeigt und auch die entsprechenden Seitenbegrenzungen für das Ausdrucken von Web-Seiten angibt. Beachten Sie, daß es sich bei den Grenzwerten nur um ungefähre Angaben handelt, da die Schriftgrößen verschiedener EDV-Plattformen und Betriebssysteme äußerst unterschiedlich sein können. Seite mit Gitternetzhintergrund Diese Seite zeigt dieselbe Hintergrundgrafik auf der Seite plaziert, auf der Sie sie für Ihre eigene Verwendung kopieren können. Halten Sie sich an die Anleitung Ihres spezifischen Browsers für das Kopieren von Bildern. Benutzer der Windows-Version von Netscape klicken mit der rechten Maustaste auf die Grafik, um ein Optionenmenü für das Kopieren und Speichern der Grafik zu erhalten. Mac-Benutzer von Netscape 2.0 oder einer späteren Version klicken und halten die Maustaste gedrückt, bis das Pop-up-Menü erscheint. Homogenität und Vorhersagbarkeit sind wesentliche Attribute jedes gut gestalteten Informationssystems. Diese Faktoren unterstützen den Benutzer bei der Identifikation von Ursprung und Relationen der World Wide Web-Seiten und bieten ihm darüber hinaus einen einheitlichen und leicht auffindbaren Zugang zum Interface und den Seitenelementen sowie ein konsequentes grafisches Gestaltungschema. Design-Gitternetze, die den meisten gut gestalteten gedruckten Publikationen zugrundeliegen, sind bei der Gestaltung elektronischer Dokumente und Online-Publikationen ebenso wichtig, da sich die räumlichen Beziehungen zwischen den einzelnen auf dem Bildschirm erscheinenden Elementen ständig verschieben, durch ihre Abhängigkeit zum User-Input einerseits und der Systemaktivität andererseits. Der Patchwork-Effekt Die derzeitigen Implementierungen der Hypertext Markup Language (HTML) bieten nicht die Flexibilität und die Kontrollmöglichkeit, die Grafikdesigner von Seitenlayout-Software oder von konventionellen Multimedia-Authoring-Werkzeugen herkömmlicherweise erwarten. Trotzdem kann die HTML-Sprache bei sorgfältiger Anwendung dazu benutzt werden, komplexe und gleichzeitig hoch funktionelle Informationssysteme zu erstellen. Bei unsachgemäßer oder inkonsequenter Verwendung jedoch können die typografischen Steuerungen und Inline-Grafiken der World Wide Web-Seiten zu einem zersplitterten, verworrenen Chaos führen, dem jede erkennbare Hierarchie fehlt. Dieser unglückliche Patchwork-Effekt eines unzusammenhängenden WirrWarrs von Grafiken und Text führt zu einer verschlechterten Nutzbarkeit und Lesbarkeit wie es auch bei gedruckten Dokumenten zu beobachten ist. Ein sorgfältig aufgebautes Design-Gitternetz, das über eine Gruppe von Seiten hinweg konsequent implementiert wird, hilft den Benutzern, die gewünschten Informationen schnell aufzufinden und stärkt gleichzeitig die Annahme, eine mit Bedacht organisierte Sammlung von Informationen vor sich zu haben: Referenzen Apple Computer, Inc. Hurlbutt, A. 1978. The grid. New York: Watson-Guptill. Microsoft Corporation Pace-Wildenstein Gallery razorfish White, J. V. 1988. Graphic design for the electronic age. New York: Watson-Guptill.