Bei der Gestaltung der Webseiten im aktuellen Layout der Universität Münster sind einige Aspekte zu beachten. Hier finden Sie eine Übersicht über verschiedene Gestaltungselemente wie die Farbgestaltung, die Verwendung von Icons oder die verwendeteten Schriftarten.
Das Logo der Universität Münster (Wort- und Bildmarke) ist wie unter Seitenaufbau erläutert, einzusetzen. Hier kommt die Logovariante 1 zum Einsatz (siehe CD-Manual). In begründeten Ausnahmen kann das Logo in Abstimmung mit der Stabsstelle Web und Design in der Logovariante 2 genutzt werden. Eine begründete Ausnahme ist gegeben, wenn die Lesbarkeit von Logovariante 1 nicht realisierbar ist, z.B. bei Verwendung in Fremd-Applikationen, die nicht im Layout bzw. Header angepasst werden können.
Die Primärfarbe für den zentralen Internetauftritt der Universität Münster ist der Grünton Pantone 369. Er wird vorwiegend flächig eingesetzt, zum Beispiel in den Balken über den Newstexten. Die Sekundärfarbe ist der Blauton Pantone 315. Er kommt bei Überschriften, externen Links, Tabellen und Hinweis-Texten zum Einsatz. Diese gewählten Farben entsprechen dem Farbspektrum, das zum Corporate Design der Universität Münster gehört und sind einzig den zentralen Uniwebseiten vorbehalten.
Fachbereiche und Institute können jeweils eine eigene Primar- und Sekundärfarbe frei wählen, sollten aber im Sinne der Barrierefreiheit auf gute Kontraste achten, damit Menschen mit bestimmten Sehbehinderungen wie etwa partieller Farbblindheit oder Grauem Star Schrift und Hintergrund gut voneinander unterscheiden können. Der Kontrastwert sollte immer mindestens 3:1 betragen. Die "Aktion Mensch" hat eine Übersicht von Werkzeugen zur Überprüfung von Webseiten auf ihre Barrierefreiheit erstellt: Werkzeuge zur Überprüfung Ihres Webauftritts.
Eine Liste verfügbarer Farben finden Sie hier.
Primärfarbe zentraler Webauftritt
Grün (Pantone 369)
#7ab51d
RGB: 122, 181, 22
Sekundärfarbe zentraler Webauftritt
Blau (Pantone 315)
#006E89
RGB: 0, 110, 137
Zum Einsatz kommen außerdem Zusatzfarben, so zum Beispiel im Seitenfuß oder als Hintergrundfarbe für hervorgehobene News. Es handelt sich um folgende Farben:
Zusatzfarbe 1
Schwarz
#333333
RGB: 51,51,51
Zusatzfarbe 2
Grau
#8c9598
RGB: 140,149,152
Zusatzfarbe 3
Hellgrau
#ededed
RGB: 237,237,237
Der Einsatz von Bildern im Inhaltsbereich der Seiten ist sehr wichtig, denn im ansonsten sehr reduzierten Webdesign sorgen sie für eine lebendige und freundliche Wirkung. Bilder eignen sich gut, um zum Beispiel Artikel hervorzuheben und Themen zu veranschaulichen. Allerdings sollten bei Bildern immer Alternativtexte angeben werden, damit auch sehbeeinträchtigte Menschen die Chance haben, die Bildinformation zu erfassen. Bilder, die Text enthalten, sollten möglichst nicht verwendet werden. Wenn dies doch gemacht wird, müssen die Vorgaben der Barrierefreie-Informationstechnik-Verordnung (BITV) voll umgesetzt werden.
Eine Hilfestellung zur Recherche, Beurteilung und Beauftragung von professionellem Bildmaterial bietet der Leitfaden zur Bildsprache an der Universität Münster (pdf).
Auf der Startseite der Rubrik Studieninteressierte sehen Sie die für News- oder Wegweiserseiten im Design der Universität Münster verwendeten Bilder im Format 2:1 und 1:1. Darüberhinaus haben Sie auf reinen Informationsseiten selbstverständlich auch die Möglichkeit, andere Formate einzusetzen (beispielsweise das Modul "Imagefilm").
Bildgrößenautomatik in Imperia
Laden Sie ins "Media Asset Management" (MAM) von Imperia hochauflösende Bilder hoch und überlassen Sie Imperia das Errechnen weboptimierter Bilder. Sie müssen die Bilder lediglich im Seitenverhältnis anpassen, wenn dies gewünscht ist. Den Bildausschnitt können sie im MAM selbst vornehmen, entweder vorgegeben 1:1 sowie 2:1 oder frei. Außer dem Bildauschnitt können Sie auch die Bildgröße im MAM anpassen. Die automatische Erstellung verschiedener Bildgrößen in Imperia hat zwei entscheidende Vorteile:
Übrigens: Imperia veröffentlicht auf dem Webserver ausschließlich die web-optimiert errechneten und verkleinerten Bilder, nicht die Originaldateien, die Sie in die Mediendatenbank hochgeladen haben. Dennoch sollten Sie sich darüber im Klaren sein, dass moderne Webdesigns mit großen Bildern in hohen Qualitäten arbeiten. Die veröffentlichten Bilder haben also immer noch eine gute Qualität. Wer sicher verhindern möchte, dass veröffentlichte Bilder von Dritten gespeichert und zweckentfremdet werden, dem bleibt nur, sie nicht im Web zu veröffentlichen bzw. die missbräuchliche Weiterverwendung rechtlich zu verfolgen. Sind Sie im Einzelfall unsicher, überlegen Sie besser, ob Sie ein anderes Bildmotiv finden, das unkritisch ist.
Dateiformate
Für die Darstellung von Bildern im Internet bieten sich folgende Dateiformate an:
Bildinformationen in Imperia speichern
Sie haben in Imperia die Möglichkeit, den Verwendungsnachweis und eine Beschreibung des Bildes bzw. Bildzeile direkt mit dem Bild in der Mediendatenbank zu speichern.
Das Feld "Copyright" für den erforderlichen Urheberrechtsnachweis ist ein Pflichtfeld. Füllen Sie es exakt so aus, wie es Ihrer Vereinbarung mit dem Urheber oder seines rechtlichen Vertreters vereinbart ist. In welcher Form der Bildnachweis zu erbringen ist, geben die Rechteinhaber vor. Dies gilt auch und insbesondere bei Stockfotos. Dieser Eintrag wird dann automatisch am oder über dem Bild - je nach Darstellungsmodul - ausgegeben. Ein gesonderter Bildnachweis in Form einer eigenen Datei ist dann für diese Medien nicht mehr notwendig.
Das Feld "BILDUNTERZEILE [deutsch] " können Sie nutzen, um hier eine Beschreibung des Bildes zu hinterlegen. Sie wird im Modul Bildergalerie als Bildzeile ausgegeben. Das Feld "BILDUNTERZEILE [englisch]" funktioniert entsprechend für englisch-sprachige Bildzeilen.
Alle drei Felder können Sie bereits beim Vorgang des Hochladens ausfüllen. Nachträglich können Sie dies, indem Sie in der Mediendatenbank beim gewünschten Bild auf "Details" klicken.
Klären Sie vor der Veröffentlichung von Bildern immer die Nutzungsrechte und veröffentlichen Sie sie korrekt. In jedem Fall ist jeder selbst in der Verantwortung, die korrekte Angabe des Bildnachweises sicher zu stellen. Im Haftungsfall haftet der Informationsanbieter, also die im Impressum als inhaltlich und redaktionell verantwortlich genannte Person, direkt. Logos sind von dieser Verpflichtung in der Regel ausgenommen. Beachten Sie in diesem Zusammenhang unsere entsprechenden Hinweise zum Urheberrecht.
Alle Icons, die im Webauftritt der Universität Münster verwendet werden, haben den Anspruch, Symbole als klare und eindeutige Formen darzustellen. Sie weisen nicht zu viele Details auf und sind eher abstrakt und stark stilisiert. Die Symbole sollten möglichst flächig wirken.
Im Funktionsbereich dienen die Icons dazu, die Inhalte und Funktionen der Anwendungen zu verdeutlichen. So weist zum Beispiel das Icon "Kalender" auf Termine hin. Die Icons werden weiß auf einer flächigen Farbe dargestellt. Sie werden stets linksbündig in den Kasten gesetzt.
Im Inhaltsbereich kommen Icons vor allem als Symbole für die verschiedenen Linktypen vor:
interner Link (einfache Pfeilspitze nach rechts)
externer Link (doppelte Pfeilspitze nach rechts, ein neues Browserfenster wird geöffnet)
Im Fußbereich weisen Icons auf die verschiedenen Social-Media-Kanäle der Universität Münster hin (siehe Fußbereich dieser Seite). Die Palette der Icons kann in Absprache mit der Online-Redaktion erweitert werden. Dabei muss aber darauf geachtet werden, dass die Grafiken zum restlichen Erscheinungsbild der Universität Münster passen.
Im Webdesign der Uni Münster werden die Webfonts "Meta Web Pro Normal", "Meta Web Pro Normal Italic", "Meta Web Pro Bold" und "Meta Web Pro Italic Bold" eingsetzt. Es handelt sich um die Hausschrift der Uni Münster. Webfonts sind für den Einsatz in (X)HTML-Webseiten vorgesehen. Beim Aufruf einer Webseite werden sie nicht aus der lokalen Schriftdatenbank (Schriftensammlung) eines Computers (z. B. PC, Tablet, Smartphone), sondern von einem externen Webserver in den Browser (Client) eingeladen. Das Einbinden in eine Webseite geschieht über CSS (Cascading Style Sheets).
Die Schriftdefinitionen erfolgen ausschließlich über Cascading Style Sheets (CSS). Als Maßeinheiten für die Angabe von Schriftgrößen werden die relativen Einheiten m-Höhe (em) und Prozent (%) verwendet. Damit wird dem Besucher des Internetangebotes die Möglichkeit gegeben, die Schriftgröße selber im Browser zu verändern. Diese Option ist für Personen mit eingeschränktem Sehvermögen unverzichtbar.
Fließtext
Zusatzfarbe 1
Schwarz
#333333
RGB: 51,51,51
Unterüberschriften
Zusatzfarbe 2
Grau
#8c9598
RGB: 140,149,152
Bildunterschriften
Zusatzfarbe 2
Grau
#8c9598
RGB: 140,149,152
Beschriftung Slideshow
Weiß
#ffffff
RGB: 255, 255, 255
Zitate
Zusatzfarbe 1
Schwarz
#333333
RGB: 51,51,51