Design

Neben dem Inhalt einer Page ist natürlich vor allem das Design bei einer Homepage sehr wichtig. Wenn den Besucher das Design nicht anspricht, wird er vermutlich innerhalb 1-2 Minuten die Seite wieder verlassen, ohne sich um den Inhalt zu kümmern. Achte deshalb grundlegend immer darauf, daß das Design auf allen Seiten gleichbleibend ist.

» Erster Eindruck:

Der erste Eindruck ist, wie bei vielen anderen Dingen, auch bei der Gestaltung einer Homepage sehr wichtig. Ein schönes Startbild (themenbezogen), hat sich in der Praxis schon sehr bewährt, ist aber kein Muss. Achte aber darauf, dass auf dieser ersten Startseite nicht zu viel Text steht, sonst wirkt das schon nicht mehr so toll. Ein Willkommensgruß reicht völlig.

Verzichte auch auf sog. Alert-Fenster, diese veranlassen den Besucher eher zum sofortigen Verlassen der Page. Auch Popup-Fenster, die sich mit der Page öffnen, wirken eher störend. Achte darauf, dass die Page auf den ersten Blick übersichtlich und ordentlich aussieht.
Gib nicht zu viele Effekte und Gifs auf die Seite. Es macht keinen so guten Eindruck, wenn von allen Seiten Laufschriften über den Bildschirm wandern und es überall zappelt vor lauter Gifs.
Auf was du nun alles achten solltest, um einen ordentlichen Eindruck zu vermitteln, werde ich dir nun schildern.

» Schriften/Schriftfarben:

Achte darauf, das du immer die gleichen Schriftarten verwendet. Es wirkt gar nicht gut, wenn sich die Schriftart ständig wechselt. Bedenke auch beim Erstellen einer Page, dass nicht jeder Besucher alle Schriften installiert hat und deshalb exotische Schriften nicht angezeigt werden, sondern nur eine Standardschrift.
Manche Webmaster bieten die dazugehörigen Schriften zum Download an, damit man die Seite so sieht, wie sie gemacht wurde. Dies kann ich jedoch nicht empfehlen, da sich ein Webmaster immer dem Besucher anpassen sollte und nicht umgekehrt. Die meisten Besucher werden eher die Page verlassen, bevor sie eine Schrift extra wegen einer Page herunterladen und installieren werden. Es empfiehlt sich daher auf die Standardschriften zurückzugreifen.

Verzichte auch auf Schriften wie »WiLlKoMmEn AuF mEiNeR hOmEpAgE«, dies wirkt nicht gerade einladend und veranlasst viele Besucher zum sofortigen Verlassen der Page. Auch auf Laufschriften solltest du eher verzichten.

Achte auch auf die Farbe der Schrift. Verwende auf allen Seiten die selbe Schriftart, Schriftgröße und Schriftfarbe. Du kannst zwar manchmal einen Text in einer anderen Farbe hervorheben, wenn du auf etwas aufmerksam machen willst, aber es sollte eher die Ausnahme sein, da sich bei zu vielen Hervorhebungen sich der Text eigentlich nicht mehr hervorhebt.
Die Farben der Schrift sollten auch gut harmonieren mit dem Hintergrund. Denke auch daran, dass es auch Leute gibt, die nicht mehr ganz so gut sehen. Verwende deshalb nicht eine zu kleine Schrift.
Lies dazu auch meine Kapitel Texte und Barrierefreiheit.

» Überschriften:

Überschriften werden natürlich immer wieder benützt um den Anfang eines Kapitels zu dokumentieren.
Du solltest aber nicht einfach nur einen Text dementsprechend formatieren, daß er zur Überschrift wird, sondern den entsprechenden HTML Tag verwenden (H1, H2,...). Achte darauf, dass die selben Überschriften ( z.B. Überschrift 3) immer gleich aussehen, das bedeutet, sie sollte gleiche Schrift und gleiche Schriftfarbe haben. Wenn du Überschriften mit besonderen Schriften usw. möchtest, dann erstelle sie am besten als Bilder.
Siehe auch mein Kapitel Texte.

» Tabellen:

Tabellen eignen sich von der Struktur her natürlich sehr gut, um ein ganzes Layout daraus zu machen. Wenn möglich, sollte man dies aber aus verschiedenen Gründen eher vermeiden. Tabellen sollten einfach für das gebraucht werden, was ihre ursprüngliche Funktion ist, nämlich zur Darstellung für tabellarische Daten.

Wenn du Daten mit einer Tabelle darstellst, lohnt es sich auch, wenn du dich mit dem Kopf, Körper und Fuß (<thead> <tbody> <tfoot>) etwas genauer befasst, denn mit diesen Elementen läßt sich eine Tabelle sehr gut mit CSS formatieren.

Wenn du mit sichtbaren Tabellen arbeitest, solltest du vor allem darauf achten, dass die Rahmenstärke und auch die Rahmenfarben bei allen Tabellen gleich sind. Es macht keinen so guten Eindruck, wenn du mehrere Tabellen hast und jede schaut irgendwie anders aus.
Wie eine Tabelle aufgebaut wird, findest du bei SelfHTML.

» Bilder:

Bilder können das Design einer Page sehr verschönern. Leider werden von vielen Webmastern Bilder einfach nur irgendwie untereinander oder nebeneinander auf die Page gesetzt. Dies gibt der ganzen Page ein ungepflegtes Aussehen. Lass hier deine Phantasie walten. Es gibt sehr viele Möglichkeiten, Bilder auf eine Page zu geben, so dass sie einen sehr schönen Eindruck hinterlassen. Du kannst Rahmen für die Bilder basteln, du kannst sie in Tabellen geben und diese schön gestalten usw.

» Hintergrund:

Beim Hintergrund hast du die Möglichkeit, deine Phantasie etwas spielen zu lassen. Du kannst entweder nur einen einfarbigen Hintergrund mit HTML machen oder du kannst ein Hintergrundbild einbinden. Egal für welche Möglichkeit du dich entscheidest, achte darauf, das der Hintergrund zum Thema passt und die Schrift darauf gut lesbar ist. Pass aber beim Hintergrund gut auf, da auch er für den ersten Eindruck sehr entscheidend sein kann.

So strahlt eine helle Seite eher was fröhliches, unbefangenes aus, während eine dunkle Seite meist eher düster, bedrückend und unheimlich wirkt. Aber auch hier kommt es, wie bei vielem, darauf an, welche Besucher du ansprechen willst und welches Thema deine Page hat. Eine Page, die sich mit Gothic, Vampirismus oder etwas ähnlichem auseinandersetzt, wird sicher besser wirken, wenn sie in dunkleren Tönen gehalten wird. Hingegen eine Page, die sich mit Natur, Tieren oder etwas ähnlichem auseinandersetzt, wird in den meisten Fällen besser wirken, wenn sie in helleren Tönen gehalten wird.

Solltest du ein Hintergrundbild verwenden, solltest du es gleich so einstellen, dass es nicht mitscrollt, da dies eher unprofessionell wirkt. Es wirkt auch meist eher unschön, wenn sich der Hintergrund immer wiederholt.