|
|
Details zum Layout der WWW-Seiten der Universität zu
Köln
in der Version von 2006
Vorbemerkungen
In den Richtlinien für das Layout der
WWW-Seiten der Universität zu Köln von 2004 wird nur
Struktur, d.h. der Aufbau der Seiten festgelegt. Hier geht es um die
Ausgestaltung, wie sie im Wesentlichen vom Rektorat im Oktober 2006 beschlossen
und vom WWW-Arbeitskreis im Janaur 2007 in wesentlichen Details festgelegt
worden ist. Es können und sollen nicht alle Einzelheiten bis ins Detail
festgelegt werden. Wesentlich ist, dass das Erscheinungsbild aller WWW-Seiten
einheitlich ist und alle Navigations- und Informationselemente gut erkennbar
sind.
Aufbau
- Kopf
- Hintergrundfarbe: #FFFFFF (weiß)
- Hauptteil
- Hintergrundfarbe Content-Bereich: #EAEFF5
Hintergrundfarbe linkes
Menü: # DBE4ED
Balken über dem linken Menü optional (Farbe:
#41799E, Dicke 14px)
Trennlinienfarbe (oben und unten): #457492 (Dicke:
1px)
- Fuß
- Hintergrundfarbe: #FFFFFF (weiß)
- Siegel
- transparent rechts oben über Kopf und Hauptteil
Menüs
- Ankermenü
- Position: im Kopf rechts oben
Farbe: #41799E
Reihenfolge (von
rechts nach links, in der Reihenfolge der Notwendigkeit):
- Impressum
-
Kontakt
- Drucken
- Suche
- A-Z
- Sitemap
-
Sprachauswahl
Trennzeichen: |
- Icons sind alternativ/zusätzlich möglich.
- Zielgruppenmenü
- Menü ist optional
Position: im Kopf unten Mitte
Farbe:
#999999 (oder dunkeler)
Reihenfolge: SchülerInnen | Studierende |
Alumni & Förderer | Wirtschaft | Presse | Beschäftigte
Auswahl je nach Erfordernissen
- Hauptmenü
- Position: Hauptteil links
Ausrichtung: in der Regel
rechtsbündig, insbesondere bei 3-stufigen Menüs auch linksbündig
möglich
Farbe: #41799E, aktivierter Menüpunkt: #FF020E
(rot)
unter dem Menü wahlweise Siegel oder Icon der
Einrichtung
(vgl. auch u.a. Beispiele)
- hierarchischer Pfad (Krümelpfad)
- Position: Content-Bereich oben links
Farbe: #999999 (oder
dunkeler)
"Sie sind hier" sollte entfallen
anstatt "Start": der Name der
Einrichtung
- generell
- Farbe (Link-Hover): #FF020E (rot)
Kopf
- "Universität zu Köln" zumindest nicht kleiner als die
übrigen Bezeichnungen
- Zusätzlich zu "Universität zu Köln" und dem Namen der
Einrichtung sollte nur noch eine Zeile mit einer übergeordneten
Einrichtung aufgeführt werden, üblicherweise der Name der
Fakultät.
Beispiel:
Universität zu
Köln
Mathematisch Naturwissenschaftliche
Fakultät
Physikalische Chemie - Arbeitsgruppe
Prof. Strey
- Die Trennlinie in der Fakultätsfarbe erscheint unterhalb von
"Universität zu Köln". Die Länge (bis vor das Siegel oder
über das Siegel) ist irrelevant.
- Das Rechteck in der Fakultätsfarbe vor dem Namen der Einrichtung
entfällt.
- Der untere Rand von "Universität zu Köln" soll wenn
möglich vertikal zentriert zum Siegel sein, ansonsten der
Trennstrich.
- Das Instituts/Fakultäts-Logo/siegel erscheint nicht rechts im
Kopf (Kollision mit dem Uni-Siegel als Wasserzeichen) sondern unter dem
vertikalen Hauptmenü.
Content-Bereich (Haupttextbereich)
- Schriftart: font-family : verdana, arial, sans-serif;
- Schriftfarbe: #333 (dunkelgrau), alternativ keine Farbdefinition
(schwarz)
- Hyperlinks: Links sollen eine einheitliche, dem Hauptmenü
(Farbe-Menü: #41799e) angepasste, Grundfarbe erhalten, nicht besuchte
etwas dunkler, besuchte etwas heller:
Links (dunkler): #3A6E8E
besuchte
Links (heller): #699FC1
- Überschriften: Ein Überstrich (z.B. bei H3) wird als
problematisch angesehen, insbes. wenn andere Überschriften einen
Unterstrich haben, z.B. H2 und H3 direkt auf H2 folgt.
- Listen: anstatt dem "Bullit" wird ein roter Pfeil
verwendet:
http://www.uni-koeln.de/uni/images/pfeil-rot.gif
Fuß
Der Fuß sollte enthalten
- Datum der letzten Änderungen bzw. Versionsdatum -
- Autor der Seite (oder "Webmaster") mit einer "immer gültigen"
Mailadresse für ein Feedback (z.B. "online-redaktion@...")
- Farbe: 999999
Die Farben
| Element | Farbe |
|---|
Hintergrund Kopf,
Hintergrund Fuß | #ffffff |
| Hintergrund ContentBereich | #EAEFF5 |
| Hintergrund Menü | #DBE4ED |
Menü-Text (Ankermenü/Navigation),
Balken über dem Menü | #41799E |
| Trennlinienfarbe | #457492 |
| Links | #3A6E8E |
| Besuchte Links | #699FC1 |
Aktiver Menüpunkt,
Link-Hover | #FF020E |
| Normaler Text | #333333 | #000000 |
Zielgruppenmenü-Text,
Rootline,
Fuß-Text | #999999 |
Beispiele
|
English
Chinese