Yale C/AIM Web Style Guide

Ü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

Es gibt kein definiertes Gitternetzsystem, das sich gleichermaßen für alle Web-Seiten eignet. Die erste Überlegung bei einem Webprojekt sollte darin bestehen, ein grundlegendes Layout-Gitternetz für alle Seiten zu erstellen. Mit einem solchen grafischen Rückgrat legt man das Muster fest, nach dem die wichtigsten Schrift- und Illustrationsblücke regelmäßig auftreten. Außerdem legt man damit die Plazierungs- und Stilrichtlinien für wichtige Bildschirmtitel, Subtitel und Navigationslinks oder Buttons fest. Sammeln Sie zu Beginn repräsentative Beispiele Ihres Textes sowie einige Grafiken, Scandateien oder andere Illustrationsmaterialien und experimentieren Sie mit verschiedenen Anordnungen der einzelnen Elemente auf der Seite. Bei größeren Projekten läßt sich nicht vorhersagen, wie die verschiedenen Kombinationen von Text und Grafiken auf dem Bildschirm interagieren werden. Es ist jedoch ratsam, die Layout-Skizzen sowohl anhand der komplexesten als auch der einfachsten Seiten zu testen.

Es geht darum, möglichst schnell ein einheitliches, logisches Bildschirmlayout zu finden, das es Ihnen ermöglicht, auf den einzelnen Seiten rasch Text und Grafiken einzufügen, ohne daß Sie bei jeder Seite eine Denkpause einlegen und Ihren grundlegenden Gestaltungansatz neu überdenken müssen. Ohne ein fest zugrundeliegendes Design-Gitternetz wird sich das Seitenlayout Ihres Projekts an Randproblemen orientieren und so das allgemeine Design Ihres Websystems einen unzusammenhängenden und visuell verwirrenden Eindruck bekommen.

Die Analyse der Seitengitternetze
Für die Gestaltung dieses Handbuchs verwendeten wir ein bestimmtes Seitengitternetz, das auf dem oberen Rand jeder Seite ein Symbolmenü und auf dem unteren Paging Buttons enthält. Eine Scanning-Spalte am linken Seitenrand erfüllt eine doppelte Aufgabe: erstens bietet sie Platz für lokale Links zu eingebundenen Inhalten und verbessert zweitens die visuelle Verständlichkeit, weil sie den Text auf ca. 60-70 Zeichen pro Zeile verschmälert. Das folgende Diagramm zeigt die wichtigsten immer wieder vorkommenden Komponenten der Seiten unseres Handbuchs:



Die folgende Illustration zeigt die unsichtbare Tabelle (BORDER="0"), die der Spaltenstruktur dieser Seite zugrundeliegt, sowie die wichtigsten Seitenabmessungen:

Diagram shows critical page dimensions for this manual.

Wir wählten 535 Pixel als Höchstwert für das Seitenlayout, weil dies die größte Tabellenbreite ist, die sich auf einem Standard-Briefformat oder einem A4-Blatt ausdrucken läßt. Dabei kann allerdings, bedingt durch die Unterschiede von Web-Browsern, Schriften und Laserdruckern ein gewisser Beschneidungseffekt auftreten. Mit einigen wenigen Ausnahmen wurden sämtliche Grafiken für dieses Handbuch so gestaltet, daß sie in den 365 Pixel-Sicherheitsbereich der Textspalte passen. Wenn Sie sich den Quellcode für diese Handbuchseiten ansehen, werden Sie feststellen, daß die Tabellenstruktur, für die wir uns entschieden haben, ziemlich komplex ist. Die untenstehende Beispielseite zeigt ein ähnliches, aber stark vereinfachtes Layout auf Tabellenbasis ohne Unterteilung in eine Scanning-Spalte und eine Textspalte. Für Illustrationszwecke haben wir den Tabellenrand auf 1 eingestellt, damit Sie die entstehenden Ränder erkennen können:
Beispiel eines einfachen Seitenlayouts auf Tabellenbasis

Um dieses Beispiel für Ihre Zwecke zu modifizieren, klicken Sie auf den Link zum Öffnen der Seite. Dann wählen Sie die Option "View source code" (Quellcode ansehen) Ihres Browsers, um den HTML-Code zu sehen und zu kopieren.
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.