Gestaltungsempfehlungen für Webprojekte
Intro
Übersicht 		Konzept
Seitenaufbau
Seitengestaltung
Navigation 		Gif oder Jpeg?
Schnelles Laden
HTML
PlugIns 		Glossar
Ressourcen
Druckversion

Seitengestaltung

Konsistenz
Beschränkung der grafischen Hilfsmittel.

Einheitliche Linienstärken, sparsam verwenden.

Weniger ist mehr.

Konsistenz heißt das die Seiten des Projekt wie "aus einem Guß" erscheinen sollen. Dies erreicht man indem man sich zu Beginn für ein Repertoire aus gestalterischen Mitteln entscheidet. Daraus kann sich ein "Look" ergeben, so wie man auf Anhieb "Hotwired", die "South China Morning Post" oder "Jodi" an ihrem Layout identifizieren kann, selbst wenn sie in Blindtext gesetzt währen.

Eingebundene Bilder sollten gleiche Größe und Duktus haben. Grafische Grundelemente erscheinen an der gleichen Stelle und Größe.

Raster
Tabellen sind eine große Hilfe.

Experimentieren, es lohnt sich.

Und:
Weniger ist mehr.

Ein Raster sollte die Aufgabe erfüllen Texte und Bilder so übersichtlich und einfach auf der Seite zu gliedern das sie vom Benutzer ohne Aufwand zugeordnet und gelesen werden können.

Es gibt kein entgültiges Raster für jeden Zweck. Man muß selbst eines entwickeln das dem jeweiligen Projekt angemessen ist. Man sollte nicht davor zurückschrecken entwürfe erst auf Papier anzufertigen und später auf den WWW Seiten zu umzusetzten. Eine große Hilfe hierbei sind Tabellen (Tables), die nicht nur elegante Layouts sonderen auch raffinierte Text und Bildmontagen erlauben.

Überschriften, Text und Farbe, farbige Hintergründe
Überschriften mit Header Tag anstelle von Font Size Tag auszeichnen.

<P> ist nicht <BR>

Farben mit verschiedenen Monitor-
einstellungen testen: 256, 32.000, Millionen
Aus 00, 33, 66, 99, CC, FF kombinieren
Rot, Grün, Blau:FF0000 00FF00 0000FF 330000 003300 000033 usw.

Zu einem Bodybg Image IMMER auch eine Color angeben!

Überschriften auf eine Auswahl der Möglichkeiten einschränken. Außer dem Fließtext kann man mit höchstens 2 zusätzlichen Schriftgrößen für die Kapitel- bzw. Seitenüber schriften auskommen. Man sollte beachten anstelle von FONT SIZE lieber HEADER zu verwenden. Also logisches MarkUp physikalischem vorzuziehen.

Text kann am Bildschirm nur schlecht gelesen werden. Man darf nicht vergessen das jeder Benutzer die Seite mit der von ihm eingestellten Schriftart zu Gesicht bekommt. Typografische Raffinessen wie spazionieren darf man vernachlässigen. Wichtig ist nur das man den Fleißtext in handliche Portionen mit Hilfe des Paragraphen Tags trennt. Dabei ist zu beachten das ein Paragraph <P> eine Leerzeile einfügt, ein Linebreak <BR> den Text jedoch nur in die nächste Zeile springen läßt. Auf diesen Seiten bin ich vom linken Rand weggerückt da ich denke das Text, direkt am linken Browserfenster angeschlagen, noch schlechter lesbar ist. Außerdem vermeidet man so das die Zeilen zu lang laufen. Mehr als acht bis zehn Worte pro Zeile erschweren das Lesen weiter.

Farben zu verwenden sind eine enorme Erweiterung der Möglichkeiten Texte auszuzeichnen. Sparsam verwenden!

Bodybackground Color: Zu bedenken ist die Farbwiedergabe des Monitors. Einige Farben die unter 32.000 bzw. Millionen Farben klar getrennt sind, liegen auf einem 256 Farben Monitor zu nahe beisammen um noch ein klare Trennung zwischen Text und Hintergrund zu gewährleisten. Der Kontrast wird niedrig, der Text ist nicht mehr lesbar. Nur Farbwerte deren Hexadezimalwert (R,G,B) aus 00, 33, 66, 99 , CC, >FF kombiniert wird, sind von den meisten Monitoren klar darzustellen. Dara us lassen sich die 216 Farben kombinieren die Dos- und Mac Farbtabellegemeinsam haben. Natürlich sollte man diese wohldosiert und nicht alle aufeinmal einsetzten.

Zu einem BODYBG IMG immer auch eine bgcolor angeben. Falls das Bild nicht lädt, aus welchen Gründen auch immer, kann man so abstimmen das der Text noch lesbar bleibt.

Linien
Vorsicht mit zu vielen Linien. Auf einheitliche Linienstärken achten. Mit Linien <HR> innerhalb des Textes sparsam umgehen. Sie können den Effekt haben den Text zu stark zu zerteilen das ein einheitliches Bild verlorengeht.
Kursiver Text
Kursive Tags <EM>, <I> und <CITE> aus ästhetischen Gründen vermeiden. Kursiver Text sieht am Bildschirm in den gewöhnlich eingestellten Schriftgeraden einfach schlecht aus. Deswegen rate ich zur Vermeidung. Es gibt andere Möglichkeiten Textstellen hervorzuheben.
Nur aus Gründen des logischen MarkUps würde ich zu <CITE> (Zitat) oder <EM> (Hervorhebung) raten.

Font Size 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7 Font Size +1 Font Size +2 Font Size +3 Font Size +4

Bildschirmbreite
Navigator Default: 480 Pixel
Bildschirmbreite 640 Pixel

Konsistent bleiben.

Nicht jedem Benutzer steht ein grosser Monitor zur Verfügung. Die meisten verfügen wohl über 640 Pixel breite Monitore. Um umständliches Scrollen zu vermeiden würde ich empfehlen Seiten nicht breiter als 600 Pixel zu machen, was eigentlich schon hart an der Grenze liegt. Besser ist wohl der Bereich zwischen 480 und 540 Pixel. So bleibt dem Benutzer noch etwas vom Schreibtisch.
Blink
Blink entweder vermeiden,
oder höchst | sparsam | einsetzten.
 		Es lenkt penetrant vom Inhalt ab, verstümmelt Worte und behindert den Lesefluß. Wenn es einmal absolut nicht zu vermeiden ist, sparsam einsetzten, wie im Beispiel.

Bilder & Grafiken
So klein wie möglich, so groß wie nötig!

Seiten die insgesamt mehr als 70 kb Information haben brauchen zum Laden richtig Zeit.

Bilder, also Gifs und Jpegs sind besonders speicherintensiv und benötigen deshalb viel mehr Übertragungszeit als reiner Text. Viele Benutzer schalten deshalb in ihrem Browsermenü die autoload images Funktion ab. Deshalb sollte mit Bildern grundsätzlich sparsam und überlegt umgegangen werden. Laut einer Untersuchung sind Wartezeiten über zwanzig Sekunden auf Dauer unzumutbar. Unter "Gif oder Jpeg?" und "Schnelles Laden" erfährt man mehr darüber wie man Bilder so bearbeitet das sie (sic!) schneller Laden.

Intro
Übersicht 		Konzept
Seitenaufbau
Seitengestaltung
Navigation 		Gif oder Jpeg?
Schnelles Laden
HTML
PlugIns 		Glossar
Ressourcen
Druckversion

Kommentare oder Vorschläge ?
http://www.digital.hdk-berlin.de/~mhohl/styleguide/seitengestaltung.html
© Hochschule der Künste Berlin
Michael Hohl
26-Juni-96 		Gestaltungsempfehlungen für Webseiten