Th-RosenheimWebsite Relaunch

Projekt | 2021 - 2022

Junge Frau hält oranges Buch in den Armen

Der Kunde

Die Technische Hochschule Rosenheim ist eine Hochschule für angewandte Wissenschaften mit über 6000 Studierenden. 1971 wurde sie als Fachhochschule Rosenheim gegründet. Sie ist vor allem durch ihre Fakultät für Holztechnik und Bau bekannt.

Das Projektziel

Einen modernen Web-Auftritt schaffen, der vor allem beim Anwerben neuer Studieninteressierter helfen soll. Dabei sollte die Gestaltung möglichst barrierearm sein und auch erste Ansätze für ein modernisiertes Corporate Design liefern.

Meine Rolle

Im Rahmen meiner Tätigkeit für Pluswerk München
Mitwirkung am Projekt Pitch
Artdirection
UI/UX-Design
Abstimmung mit dem Kunden

Projektdetails

Styles

Wie bekommt man die Worte "Technische Hochschule" verknüpft mit Emotionen wie: "Warm", "Herzlich", "Regional" und "Tradition"?

Farben

Der ursprüngliche Orange-Wert wurde um einen etwas helleren Orange-Beige und dunkleres Rot-Orange erweitert. Dadurch ergibt sich ein viel breiteres Gestaltungsspektrum, mit dem sich auch ein Farbverlauf darstellen lässt, der an einen Sonnenaufgang erinnert.

Zusätzlich weist das Rot-Orange einen deutlich erhöhten Farbkontrast zu Weiß auf, wodurch es sich zum Beispiel besser zur Auszeichnung von Links eignet.

Statt purem Weiß kommt eine stark aufgehellte Variante des Orange-Beige-Tons zum Einsatz, um den warmen Charakter der Seite zu unterstreichen.

Headlines auf voller Breite

Als besonders aufmerksamkeitsstarkes Element werden immer wieder Überschriften verwendet, bei denen alle Wörter/Zeilen auf die gleiche Breite skalieren.

Häufig verwendet für Seitentitel oder besonders große Teaser.

Schematische Darstellung von im Projekt verwendeten Schriften

Klar strukturierte Typo

Zwei Frauen die drausen auf einer Treppe sitzen

Junger Mann mit Kopfhörern der auf seinen Laptop schaut

Key-Visuals

Für die Keyvisuals werden die Bildmotive vom Hintergrund getrennt, indem dieser mittels Duplex-Effekt orange eingefärbt wird.

Navigation

Über 3000 Unterseiten, verteilt auf 6 Ebenen - wer soll da noch durchblicken? Und wie soll eine Navigation das alles unterbringen?

Die Idee: Suche und Navigation zu einem Element verschmelzen.

Front and Center

Die auf einen Suchschlitz reduzierte Menüleiste steht im Zentrum der Aufmerksamkeit und ist jederzeit erreichbar. Zum Öffnen des Menüs muss der Nutzer nur auf den Balken klicken oder die "/"-Taste drücken (analog zur Google Suche).

Schnell Suchen

Bei geöffnetem Menü kann der Nutzer dann gleich anfangen zu suchen und bekommt bei jedem Tastenanschlag Vorschläge für passende Seiten angezeigt.

Ein vereinfachter Bread-Crumb-Pfad hilft dabei, einzuordnen, ob die Seite dem Nutzerinteresse entsprechen könnte.

Da bei der schnellen Suche nur die Seiten-Titel in der Navigation durchsucht werden, gibt es jederzeit die Möglichkeit, eine detailierte Inhaltssuche auszulösen.

Detailiert Suchen

Bei der detaillierten Suche werden dann auch alle Seiteninhalte durchsucht und übersichtlich in einer Liste mit Vorschaubild und Link dargestellt.

Bei Bedarf lässt sich diese dann auch nach Seitentyp filtern.

Navigieren

Für die Seitenbesucher, die es lieber klassisch mögen, lässt sich die Navigation aber auch wie ein verschachteltes Burger-Menü bedienen.

Content

Bei einer Seite, die von hunderten Redakteuren gepflegt wird, braucht es klare Regeln für die Erstellung von Content.

Responsives Grid

Das Raster der Seite ist nach dem Prinzip des "Progressive Enhancements" aufgebaut. Sind es mobil nur zwei Optionen für Content-Breite (Text und Fullscreen), kommen bei größer werdenden Screens dynamisch weitere hinzu. So kann die Laufweite von Text für eine verbesserte Lesbarkeit begrenzt werden, während gleichzeitig Bilder und Videos von mehr Platz profitieren können.

Demoseite

Ein Layout, das sich dem Content anpasst

Die meisten Contentelemente – wie der hier gezeigte Bild-Text-Teaser – passen ihr Layout automatisch je nach Menge des Contents und dem zur Verfügung stehenden Platz an.

Neben der grundsätzlichen Gestaltung des Elements musste ich so nur noch eine Minimalbreite für jedes Element definieren.

Artikel zum Thema

Personendetailseite

Hero-Teaser

Ein besonders großer Teaser mit vielfältigen Gestaltungsoptionen, um aufmerksamkeitsstark für ausgesuchte Inhalte zu werben.

Studium

Die wichtigste Aufgabe der Seite ist das Anwerben von Studieninteressierten.

Deshalb sind sowohl die Studiengangs-Übersichts- als auch Detail-Seiten besonders ausschlaggebend für den Erfolg der Seite.

Studiengang finden

Auf der Studiengangsübersichtsseite finden sich Teaser für alle angebotenen Studiengänge mit einigen Kerndaten. Sie kann auch durchsucht und gefiltert werden.

Informieren

Auf der Studiengangsdetailseite wird der Besucher von einem zentralen Keyvisual oder Video begrüßt. Die Kerninformationen wie Dauer, Art und Sprache des Studiengangs sind dabei sofort ersichtlich.

Inhalt und Navigation der Studiengangsdetailseite

Durch den Studiengang navigieren

Für eine optimale vergleichbarkeit sind alle Studiengangseiten nach dem selben Muster aufgebaut. Die Inahltsnavigation in der linken Seitenleiste hilft den Studieninteressierten auch bei sehr langen Seiten den Überblick zu behalten. Ein Ansprechpartner und ein link zum Bewerbungsportal sind ebenfals über diese sofort erreichbar.

Inhalt und Navigation der Studiengangsdetailseite auf einem iPhone

Übersichtlich auch auf dem Smartphone

In der mobilen Variante der Seite kann der Nutzer die Funktionalitäten der Seitenleiste ebenfalls jederzeit über eine schmale Tabbar ereichen.