Neuer Webauftritt der Fachhochschule Köln - Gestaltungsrichtlinien Entwurf - Stand: 29. Juli 2003

Transkript

1 1 Neuer Webauftritt der Fachhochschule Köln - Gestaltungsrichtlinien Entwurf - I. Ziele II. Umgang mit Sprache und Information III. Inhaltliche Struktur des Webauftritts in einem Bereich IV. Seitengestaltung a. kleinster gemeinsamer Nenner für alle Seiten b. Startseite-Layout (Fakultäten, Verwaltung, Einrichtungen, Institute) c. Elemente der Startseite - Logos - "Atmo"-Bild - Aktuelle Meldungen und Veranstaltungshinweise d. Navigationsstruktur e. Seiten zu inhaltlichen Schwerpunktthemen I. Ziele: Der Webauftritt der Fachhochschule Köln soll professionalisiert und vereinheitlicht werden. Der gegenwärtige Zustand mit unterschiedlichen Design-Entwicklungsstadien und Navigationskonzepten soll schrittweise verschwinden. Die folgenden Festlegungen dienen diesem Ziel und sollen als Gestaltungsrichtlinie für Redakteure/-innen und Seitenentwickler/-innen der Fakultäten und Einrichtungen dienen. II. Umgang mit Sprache und Information 1. Weg von Linkseiten hin zu kommentierten Wegweisern Links werden durch kurze einleitende Texte (2-3 Zeilen) erläutert. Im Text versteckte Links sollten vermieden werden. Alternative: Kontextmodul "Weitere Links" oder Kontextmodul "Download" 2. Umgang mit langen Texten - Textliche Anleitungen, Informationstexte, Pressemitteilungen werden als pdf-download angeboten - pdf-dateien werden eindeutig als solche gekennzeichnet und wenn möglich gebündelt im Kontextmenu als download angeboten (nicht mehr als textliche Links) - pdf-dateien werden grundsätzlich und immer als solche gekennzeichnet, möglichst auch mit Angabe der Dateigröße 3. Schrift Myriad wird weiterhin als Element der Corporate Identity für Print-Produkte benutzt. Auf Grund der leichteren Verfügbarkeit und besseren Lesbarkeit wird "Verdana" als Standardschriftart für den Webauftritt der FHK eingeführt. 4. Begriffliche Konsistenz Es wird eine Liste eindeutiger klarer und verbindlicher Bezeichnungen für Kurstypen, Prüfungstypen u.a. erstellt ("Corporate Wording"), das später auch die Übersetzung in fremdsprachliche Versionen erleichtert. Webredakteure sollen darauf achten, dass dieselben Begriffe für dieselben Sachverhalte benutzt werden. Das gleiche gilt für die Bezeichnung von Navigationspunkten. 5. Schreibkonventionen

2 2 Das Standard-Datumsformat wird in amerikanischer /internationaler Norm festgelegt, d.h. Jahr-Monat-Tag Alternative: Datum in ausgeschriebener Form: 7. Februar Kombination "E-" für "electronic" mit deutschen oder englischen Wörtern: , E- Learning, E-Commerce usw (nicht , elearning u.a.) wird fortgesetzt

3 3 III. Inhaltliche Struktur des Webauftritts in einem Bereich Die Struktur des Gesamtauftritts einer Fakultät, eines Instituts oder einer Einrichtung erfordert gründliche Überlegung und Abstimmung unter den Beteiligten. Die Inhalte sollten auf vier übergeordnete Blöcke mit beliebig vielen Unterpunkten verteilt werden. Diese Struktur soll klar und vorab geklärt sein, bevor das Content-Management-System gefüttert wird. Sie entspricht der Navigationsstruktur im CMS, weil alle Kapitel und Unterkapitel werden im System als "Rubriken" abgebildet. Die Rubrikenstruktur gehört zum Starterpaket, das die ZI den Bereichen der Hochschule zur Verfügung stellt. Hilfreich für die Besucher von Webseiten ist die Einhaltung bestimmter Minimalorientierungen, insbesondere die Angabe von Ort und Kontakt im linken obenen Bereich der Seite. Vorschlag für die Hauptnavigationspunkte einer Fakultät: Fakultät - Studium - Internationales - Forschung Darunter sollten auf der Startseite maximal acht Zeilen stehen. Hat ein Oberkapitel mehr als 8 Unterpunkte, wird der 8. Punkte durch [...] ersetzt. Die kompette Anzahl der Punkte wird dann erst auf der darunterliegenden Ebene im Seitenmenü aufgeführt. Dies erfordert eine Priorisierung der Punkte, die auf der ersten Seite erscheinen. Die fünfte Spalte steht bei Bedarf für "Suchen", "Intern", "fremdsprachliche Versionen" IV. Seitengestaltung a. kleinster gemeinsamer Nenner für alle Seiten: FH-Logo Atmo-Grafik Fußzeile: Copyright, Impressum, letzte Änderung, Autor

4 4 b. Startseiten-Layout (Fakultäten, Verwaltung, Einrichtungen, Institute) FH-Logo eigenes Name Fakultät Logo / Institut / Name Einrichtung / leer "Atmo"-Bild Untermenu1 Untermenu2 Untermenu3 Untermenu4 Suchen u.a. Aktuelles zur Nachrichtenübersicht Termine zum Veranstaltungskalender 50 % 50% Fußzeile: Copyright, Impressum, Druckversion letzte Änderung, Autor c. Elemente der Startseite Logos in Webseitenkopf Im Logo wird bei Fakultäten und Instituten auf die englischsprachige Version verzichtet. Die Logos können in fremdsprachlicher Version erscheinen, wenn auch die Seiten in englisch/ französisch /spanisch veröffentlicht werden. Begründung: Fremdsprachliche Versionen erfordern an dieser Stelle zu viel Platz. Dadurch wird die Seite unübersichtlich. Fakultäts- und Institutslogos Vorschlag für zwei aufeinander folgende Seiten 1. Seite 2. Seite

5 5 Die Institutsnamen sind teilweise so lang, dass es unmöglich ist, die Institutsnamen unter den Fakultätsnamen zu setzen. Aus Platzgründen sollte auch auf den deutschen Seiten auf die englische Übersetzung der Fakultäts- und Institutsnamen verzichtet werden. Die Punkte symbolisieren die Zugehörigkeit zur Fachhochschule Köln hinreichend auch ohne den zugehörigen Schriftzug - ein Platz, der damit für den Fakultätsnamen frei wird. Daten zur Gestaltung des Bereichs-Logos: Grafik 60/225 pxl, weißer Hintergrund Schrift: Mac-Version von Myriad, alternativ: Verdana, 10 pkt mager, antialiased, untere Zeile auf gleicher Höhe mit Schriftzeile des FH-Logos. Sogenanntes "Atmo"-Bild Die Bilder müssen folgende Kriterien erfüllen * a) sie müssen eine Atmosphäre wiedergeben oder Situationen darstellen b) in den meisten Fällen sollte das Bild vor allem Menschen zeigen bei Tätigkeiten, Bewegung, Geselligkeit c) die Bilder dürfen abgesehen vom Ausschnitt und Kontrasteinstellungen nicht weiter manipuliert werden d) sie dürfen nicht versuchen eine Information zu übermitteln (z.b. Darstellung einer bestimmten Person), denn das Bild soll nicht als»inhalt«verwechselt werden e) sie dürfen mit dem Inhalt einer Seite nur thematisch verbunden sein f) die Bilder müssen nicht genau zu der jeweiligen Überschrift passen sie dürfen aber keinen Widerspruch bilden oder befremdlich wirken g) die Bilder sollten entweder eine Totale oder ein Close-Up beinhalten h) in die Bilder dürfen keine Schriftzeichen oder Logos eingebracht werden i) die Bilder dürfen nicht zusammengesetzt sein aus mehreren Bildern (keine Collagen) j) der Ausschnitt muss genau 720 x 85 Pixel groß sein" Aktuelle Meldungen und Veranstaltungshinweise Der untere Bereich teilt sich in zwei Spalten, die zu 60 % für aktuelle Meldungen und zu 40% für Veranstaltungshinweise reserviert sind. Die Titel von beiden Texten sind kurz und schlagzeilenartig zu formulieren (wenn möglich einzeilig, maximal zweizeilig). Die Kopfzeile über dem Titel des Kalendereintrags sollte noch über die Art von Veranstaltung informieren (Konzert, Lesung, Vortrag u.ä.) Formatbeispiel siehe rechte Spalte. Eröffnungskonzert "Kultur im Café Himmelsblick" mit Klaus, dem Geiger. Der "Paganini der Asphaltmusik" (Express) spielt gemeinsam mit Sascha Loss (Gitarre, Blues harp) Musik, deren Stil in keine gängige Schublade passt [...] Datum: 20. Feburar 2003, 19 Uhr Ort: GWZ, Claudiusstraße 1, Café Himmelsblick. Nachrichten Die Kopfzeile über dem Titel der Meldung sollte über die Herkunft der Meldung informieren (z.b. Pressestelle, Rektorat, Fakultät XY u.ä.) Formatbeispiel: * Auszug aus dem fotografischen Bildkonzept aus dem Papier der Design-Arbeitsgruppe:

6 6 Pressemitteilung 03. April 2003 Transferbeispiele aus dem Bereich Computational Intelligence Mit zahlreichen Exponaten beteiligt sich die Fachhochschule Köln an der diesjährigen Leistungspräsentation der nordrheinwestfälischen Hochschulen auf dem Gemeinschaftsstand Forschungsland NRW der Hannover-Messe, die vom 7. bis 12. April 2003 stattfindet (Halle 18, Stand M12, 1.OG.).[ ] d. Navigationsstruktur Startseite kommt man auf die Übersichtsseite mit eigener Seitennavigation, zweispaltig/ohne Kontextmodule ( weitere Übersichtsseite mit eigener Seitennavigation, zweispaltig /ohne Kontextmodule: Je nach Komplexität des Inhalts kann eine weitere thematische Übersichtsseite mit eigener Seitennavigation eingefügt werden) Inhaltsseiten mit Kontextmodulen Beispiel aus den ZI-Seiten

7 7 weitere Hinweise zur Seitengestaltung und Navigationsstruktur im Text "Navigationsstruktur" e. Seiten zu inhaltlichen Schwerpunktthemen Eine Ausnahme bilden die Webauftritte, deren Inhalte von mehreren Einrichtungen bestückt, werden, zum Beispiel die Weiterbildungsseiten). Die Standardstartseite fällt weg, als erste Seite erscheint die Standardübersichtsseite. 1. Seite/ Elemente: - Atmobild - Titel der Seite - Auflistung der Inhalte zweispaltig, kurze Erläuterungstexte zu den Unterkapiteln 2. Seite /Elemente: - Atmobild - darüber: Hauptnavigation - Seitennavigation - Auflistung der Unterkapitel mit Kurzerläuterungen, zweispaltig 3. Seite/ Elemente - Atmobild - darüber: Hauptnavigation - mittlere Spalte: Inhalt - rechte Spalte: Kontext wird fortgesetzt...