Zum Hauptinhalt springen

Webdesign

Das neue Design wurde unter Berücksichtigung der Gestaltungsvorlagen des Corporate Design Manuals der UP erstellt. Mediumspezifische Elemente, die nicht im Corporate Design Manual definiert waren, wurden in Anlehnung an das Webprojekt „Studium“ gestaltet oder neu entworfen.

Flat Design

Im „Flat Design“ entworfen, sorgt das neue Webdesign für einen modernen, seriösen und intuitiven Auftritt, der alle Zielgruppen gleichermaßen anspricht. Ein ruhiges Farbschema, klar definierte Navigations- und Inhaltselemente sowie feste Seitenvorlagen und funktionale Module sind flexibler und zugleich robuster Rahmen für die umfangreichen Inhalte der Universität.

Webtypografie

Typografisch setzt das Webdesign auf zwei Fonts: die SourceSansPro und die Systemschrift Georgia. Die Georgia ist bereits im Corporate Design Manual der UP vorgesehen und als Serifenschrift auf allen Computern installiert. Die serifenlose, moderne SourceSansPro wird für den Großteil der Textinformationen verwendet und über unseren eigenen Server bereitgestellt. Beide Schriften sind, auch in Bezug auf die Mehrsprachigkeit, sehr gut ausgebaut und für die Bildschirmdarstellung optimiert. Aus lizenzrechtlichen und Kostengründen kann die FF Scala, Hausschrift der UP, nicht im Web verwendet werden.

Responsive Design

Das Webdesign ist optimiert für die Darstellung auf mobilen Endgeräten wie Smartphones und Tablets. Je nach Bildschirmgröße (viewport) verändert sich das Layout und bietet eine angepasste Darstellung an die neue Größe (responsive design). Auch bei veränderter Darstellung haben Benutzer mit jedem Endgerät immer Zugang zu allen Inhalten und Funktionen der Website.

Webstandards

Die technische Umsetzung erfolgt mit moderner HTML5-Technologie, basierend auf dem CSS-Framework Foundation und bietet damit Grundlage für barrierearme und suchmaschinenoptimierte Webseiten. Moderne Browsergenerationen profitieren vom Einsatz aktuellster Webtechnologien (HTML5, CSS3, Javascript), während die Website gleichzeitig eine Abwärtskompatiblität für ältere Browser (bis IE8) gewährleistet. Durch den Einsatz verlustfreier SVG-Grafiken (alle Icons und Logos im Header) wird eine geringe Ladezeit und zugleich eine Unterstützung von Geräten mit hochauflösenden Displays erreicht (z.B. Retina-Displays).

Druckansicht

Die Webseite besitzt eine optimierte Druckansicht (print stylesheet). Angezeigt werden nur inhaltsrelevante Elemente der aktiven Seite, um einen kompatiblen, übersichtlichen und lesbaren Ausdruck zu erhalten. Ausgeblendet werden alle Menus und Navigationslinks, außer der Breadcrumbs-Navigation. Layout- und Inhaltselemente, die sich durch Hintergrundfarben abgrenzen (z.B. Seiten-Teaser), bekommen einen Rahmen (Hintergrundfarben werden nicht gedruckt).

Farben

Die Farben der zentralen Bereiche und der Fakultäten wurden für die Darstellung im Web angepasst. Bitte beachten Sie, dass die obigen Logo-Varianten ausschließlich im Web verwendet werden. Für den Printbereich gelten die bisherigen Farbwerte und Logos.

Für weitere Informationen und Fragen zum Webdesign, wenden Sie sich bitte an das Referat für Presse- und Öffentlichkeitsarbeit.

Webfarbcodes

Uni-Farben

Farbe für: aktiver Menüpunkt/ globale Linkfarbe/ Hervorhebung/ Link

aktiver Menüpunkt/ globale Linkfarbe/ Hervorhebung/ Link

# 004260
R:0, G:66, B: 96

Farbe für: 20% Uni-Blau/Menühintergrund

20% Uni-Blau/Menühintergrund

# cfdae3
R:207, G:218, B:227

Fakultäten

Farbe für: Juristische Fakultät

Juristische Fakultät

# e8674c
R: 232, G: 103, B: 76

Farbe für: Philosophische Fakultät

Philosophische Fakultät

# 931f1f
R: 147, G: 31, B: 31

Farbe für: Humanwissenschaftliche Fakultät

Humanwissenschaftliche Fakultät

# f69b2d
R: 246, G: 155, B: 45

Farbe für: Wirtschafts- und Sozialwissenschaftliche Fakultät

Wirtschafts- und Sozialwissenschaftliche Fakultät

# 3daa84
R: 61, G: 170, B: 132

Farbe für: Mathematisch-Naturwissenschaftliche Fakultät

Mathematisch-Naturwissenschaftliche Fakultät

# 0e8cdo
R: 14, G: 140, B: 208

Hintergrund und Text

Farbe für: Seitenhintergrund

Seitenhintergrund

# ededed
R: 237, G: 237, B: 237

Farbe für: Seitenhintergrund

Seitenhintergrund

# dedede
R: 222; G: 222; B: 222

Farbe für: normale Tabellenzeile/ Schrift auf dunklem Hintergrund

normale Tabellenzeile/ Schrift auf dunklem Hintergrund

# ffffff
R: 255, G: 255, B: 255

Farbe für: Textfarbe

Textfarbe

# 333333
R:51, G: 51, B: 51

Farbe für: Horizontale Trennlinie

Horizontale Trennlinie

# cccccc
R:204, G: 204, B: 204

Hervorhebung

Farbe für: Intern

Intern

# 004260
R: 0, G: 66, B: 96

Farbe für: Hinweis

Hinweis

# ffff99
R:255, G:255, B:153

Farbe für: Absetzung

Absetzung

# f5f5f5
R:245, G: 245, B: 245

Tabellenhervorhebung 1/ Tipp

Tabellenhervorhebung 1/ Tipp

# dff0f9
R:223, G:240, B:249

Farbe für: Tabellenhervorhebung 2

Tabellenhervorhebung 2

# cee2ed
R: 206, G: 226, B: 237