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

Kopfzeilens

Typographie I

Typographie II

Schriftarten

Einheitlichkeit

Grundlegendes zu Tabellen

Länge der Seiten

Plattform-
übergreifende Fragen


Frames

Komplexe Tabellen


Der beste Maßstab für die Effizienz Ihrer Homepage
Wieviele Links befinden sich innerhalb der ersten vier Zoll Ihrer Menüseite? Das durchschnittliche Computerdisplay mißt derzeit nur etwa 14 bis 16 Zoll in der Diagonale und zeigt einen Desktop von etwa 640 x 480 Pixel an. Das sollte deutlich machen, daß die ersten vier Zoll Ihrer Homepage der wichtigste Bereich Ihrer Site sind. Dies ist der einzige Bereich, von dem Sie sicher sein können, daß ihn die meisten Besucher Ihrer Homepage tatsächlich zu Gesicht bekommen. Die Inhaber vieler Sites erliegen der Versuchung grafisch umfangreiche Homepages zu gestalten und vergessen dabei, daß eine Web-Seite nicht nur eine visuelle Erfahrung ist, sondern daß sie, um den Benutzer bei der Stange zu halten, auch effizient sein muß. Eine komplexe Homepage, die langwierig heruntergeladen werden muß, nicht auf den Bildschirm eines durchschnittlichen Benutzers paßt und wenig oder gar keine Funktionalität bietet, wird die meisten abschrecken.
Bedenken Sie, daß der User die Web-Seiten erst einmal laden muß und daß die Seite ihre grafische Wirkung nur schrittweise aufbaut. Der beste Maßstab für die Effizienz eines Seitendesigns ist die Zahl der Optionen, die innerhalb der ersten vier Zoll der Seite zur Verfügung stehen. Eine große, extravagante Grafik kann auf den ziellos surfenden Webbenutzer sicher anziehend wirken. Braucht der durchschnittliche Leser eine volle Minute, um auch nur den oberen Teil Ihrer Seite herunterzuladen, dauert es noch viel länger, bis er endlich auch zu den ersten Links die Seite herunterscrollen kann. So wird es Ihnen häufig passsieren, daß Sie Ihre Besucher verlieren, noch bevor Sie Gelegenheiten hatten, ihnen die Verbindungen zum Rest Ihrer Site anzubieten.

Denken Sie in Information-Screens, nicht in Seiten
Richten Sie das Design Ihrer Kopfzeile immer an dem aus, was der durchschnittliche Benutzer mit seiner Monitorgröße im ersten Bildschirm-Bild zu sehen bekommt. Die effektivsten Kopfzeilen von Web-Seiten beinhalten eine Kombination von Grafiken und interaktiven Links, meist in der Form einer Imagemap. Die Imagemap-Banner am oberen Seitenrand der Yale C/AIM Web-Site sind so ausgelegt, daß sie die Seite grafisch ansprechend machen und dem Benutzer gleichzeitig innerhalb der obersten anderthalb Zoll der Seite sechs Links anbieten:

Imagemap banner from Yale C/AIM Web site.

Grafik wurde von der Originalgröße reduziert.   www.med.yale.edu/caim/


Einheitliche Identität der Grafiken
Eines der wichtigsten Anliegen eines sorgfältigen Grafikdesigns besteht darin, der Web-Site eine einzigartige visuelle Identität zu verleihen. Eine einheitliche Signatur-Grafik und ein einheitlichen Seitenlayout gestatten es dem Leser, sofort zu erkennen, worum es in dem Dokument geht, und welche Beziehung die betreffende Seite eventuell zu anderen Seiten hat. Die in den Kopfzeilen verwendeten Grafiken können auch darauf hinweisen, daß eine Reihe von Web-Seiten miteinander verbunden sind. Im Gegensatz zu gedruckten Dokumenten kann der Designer einer Web-Site nie sicher sein, ob und welche anderen Seiten der Leser gesehen hat, bevor er die aktuelle Seite aufruft. Die vielen verschiedenen Web-Sites von Sun Microsystems beinhalten allesamt eine Signature-Kopfzeile, die gleichzeitig ein Imagemap mit grundlegenden Navigationslinks ist:

Sun Microsystem's Web page header graphic.

Grafik wurde von der Originalgröße reduziert.   www.sun.com


Selbst wenn Sie sich dafür entscheiden, auf Ihren Seiten auf Grafiken zu verzichten, sollte der Kopfzeilenbereich einer Web-Seite am oberen Seitenrand oder gleich darunter einen ins Auge springenden Titel enthalten. Grafiken, die oberhalb dieses Titels plaziert sind, sollten nicht so groß sein, daß sie den Titel und den Einführungstext aus der Seite eines normal großen Büromonitors (640 x 480 Pixel) hinausdrängen. In einer Serie von miteinander verbundenen Dokumenten kann es auch Subtitel, Abschnittstitel oder andere Textelemente geben, die die Beziehung des aktuell sichtbaren Dokuments zu anderen Dokumenten der Serie übertragen. Um effektiv zu sein, müssen diese Titelelemente quer durch alle Seiten Ihrer Site sorgfältig standardisiert werden.

Fußzeilen
Die Fußzeilen sollten immer grundlegende Informationen über Ursprung und Alter der Seite enthalten. Jede Web-Seite muß diese Basisinformationen beinhalten. Aufgrund ihrer repetitiven und prosaischen Natur möchte man sie aber meist nicht auf den oberen, wichtigen Teil der Seite plazieren. Die meisten Web-Seiten sind größer als das durchschnittliche Bildschirmdisplay. Deswegen sind Navigations-Links, die Sie möglicherweise am oberen Rand der Seite vorgesehen haben, zu dem Zeitpunkt, an dem die meisten Leser das Bild zum unteren Rand der Web-Seite gescrollt haben, nicht länger sichtbar. Gut gestaltete Fußzeilen bieten deshalb dem Benutzer normalerweise eine Gruppe von Links zu anderen Seiten an.
Die Seiten der Web-Site von Sun Microsystems sind allesamt mit einer charakteristischen Fußzeilengrafik versehen, die für eine einheitliche visuelle und funktionale Identität sorgt:

Footer menu graphic from Sun Microsystems site.

Grafik wurde von der Originalgröße reduziert.   www.sun.com


Referenzen

Sun Microsystems

Yale Center for Advanced Instructional Media (C/AIM)
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.