Beispiel-Designs mit auch-rein.de

Anhand dieser Seiten, die seit Anfang 2005 online sind, möchte ich verschiedene Design-Varianten vorstellen, die jeweils auf dem selben Inhalt aufbauen. Nur das "Drumrum" ist anders.

Gemeinsamkeiten

Einsatz von CSS = Stand der Web-Technik: Trennung von Inhalt und Design.
CSS auch für angepasste Druck-Version.
Navigierhinweise in den "Sprechblasen" beim Überfahren der Links.
Zusätzlich in der untersten Zeile noch zwei Links zum automatisch erzeugten Inhaltsverzeichnis und zum Kontakt, sowie darunter eine sogenannte "Krümel-Navigation" ("Sie sind hier:"). Wird auf einigen Webseiten bevorzugt gegenüber der anderen Navigationsart, steht dann aber in der Regel oben auf der Seite. oder ergänzend.

Design 1

www.auch-rein.de

Charakteristika:
Farbiges Design mit kleiner GIF-Animation zur Auflockerung der Titelseite, Standbild auf Folgeseiten.
Eigentlicher Inhalt schlichter als der Rahmen.
Kleinere Layout-Tabellen im Kopf der Webseiten und der horizontalen Navigation, um die 2005 noch bestehenden Positionierungsprobleme von CSS zu umgehen.
Hauptthemen der Navigation horizontal angebracht, Unterseiten vertikal mit Kenntlichmachung des aktuellen Standorts per Pfeil. Unterseitennavigation sieht "ausgeklappt" aus.

Design 2

www2.auch-rein.de

Charakteristika:
Demgegenüber etwas nüchterner, farblich ruhiger.
Klassische Buttons zur Navigation der ersten Ebenen, allerdings sind diese nicht per Bild, wie oft üblich, sondern mit CSS realisiert worden.
Kleinere Layout-Tabelle im Kopf der Webseiten, um die 2005 noch bestehenden Positionierungsprobleme von CSS zu umgehen.
Hauptthemen der Navigation horizontal angebracht, Unterseiten vertikal. Der Weg der Navigation ist über die eingesunkenen Buttons erkennbar.

Design 3

www3.auch-rein.de

Charakteristika:
Wieder mit Comic aus Design 1 zur Auflockerung.
Navigation nur auf der linken Seite.
Aufgerufene Seite dunkel unterlegt.
Hierarchie vie Einrückung, Schriftintensität und -farbe verdeutlicht.
Überfahreffekte nicht mit JavaScript wie oft üblich, sondern nur mit rein CSS realisiert.
Keinerlei Layout-Tabellen.

Design 4