Siteseeing Digital Design company logo
Hochschule-fuer-Musik-Webrelaunch

UX / UI Design und Programmierung

Hochschule für Musik Karlsruhe
Klassik trifft auf Moderne

Branche:

  • Öffentliche Einrichtung

Aufgaben:

  • Webentwicklung
  • UX / UI Design
  • Prototyping
  • Programmierung
  • Qualitätsmanagement
  • Design System Entwicklung
Die Hochschule für Musik Karlsruhe ist eine renommierte, vom Land Baden-Württemberg getragene Hochschul-Einrichtung für die künstlerische und wissenschaftliche Berufsausbildung von Musikern, Komponisten, Musikwissenschaftlern, Musikjournalisten und für Musik/Computer-Technologie. Hier trifft Klassik seit langem mit Erfolg auf Moderne, und das sollte auch nach außen getragen werden. Siteseeing hatte die Aufgabe, die Website visuell in neue Wege zu leiten, die dem Selbstverständnis der Hochschule und der Studenten entsprechen.

Website: hfm-karlsruhe.de
Multimediakomplex an der Hochschule für Musik Karlsruhe
Hochschule für Musik Karlsruhe, Webrelaunch

Klarheit
in jeder Hinsicht.

Eines der Kernprobleme der alten Seite war der Mangel an Übersichtlichkeit für die riesige Menge an Informationen. Aus dem Grund arbeiteten wir zunächst an einer Neustrukturierung der Inhalte, um verschiedene Nutzergruppen bestmöglich und schnell erreichen zu können. Die Inhalte wurden daher in drei Gruppen aufgeteilt, sodass jedes Interessensgebiet eine eigene Übersichtsseite hat.

Der Fokus auf eine Klarheit und Einfachheit erstreckt sich über das ganze Erscheinungsbild der Website. Nicht nur was das visuelle betrifft, sondern vor allen der Ordnung und dem Aufbau der Informationen.

Nicht nur hinsichtlich des Visuellen, sondern vor allem unter dem Aspekt der Ordnung und des Aufbaus der Informationen.

Hochschule für Musik Karlsruhe, Website-Relaunch

Designsystem

Jedes Designelement steht hinter dem Ziel, gleichzeitig eine anmutende Klassik und Moderne zu verkörpern.

Schrift
Daher entschieden wir uns für eine serifenlose Schrift, die ihre Wurzeln in Serifenschriften aus der Renaissance hat. Ein weiterer entscheidender Faktor war es, eine Schrift zu haben, die auch für spätere Zwecke wie Plakate ebenso gut nutzbar ist. Für längere Texte brauchten wir jedoch eine vom Grauwert weniger dichte Schrift und entschieden uns für die sehr gut ausgebaute Fira Sans, die wunderbar auf den kleinsten Größen lesbar ist.
Hochschule für Musik, Schrift, Designsystem
Farben
Die Farbauswahl wurde unter gleichen Gesichtspunkten definiert. Zu Großteilen kühle und zurückhaltende Farben strahlen die Seriosität und Erhabenheit der Hochschule aus. Ein kräftiges warmes Rot komplementiert das Gesamtbild als moderner Akzent.
Hochschule für Musik, Farben, Designsystem
UI Kit
Die Reduzierung von verschiedenen Elementen vereinfacht die Interaktion für den Nutzer. Wiederkehrende Strukturen werden schnell und intuitiv gelernt, sodass die Konzentration immer bei dem Inhalt bleibt.
Hochschule für Musik, UI Kit, Designsystem
Hochschule für Musik Karlsruhe. Website Screens

Weitere Projekte:

  • Aeditive – Brand-, Corporate- und Web-Design

    UX / UI Design, Brand und Corporate Design

    Aeditive – 3D-Druck und Automatisierung für die Baubranche von morgen

    Projekt ansehen
  • App-Entwicklung Hamburg

    UX / UI Design

    H2.LIVE App + Website — Wir zeigen der Welt, dass Wasserstoffmobilität funktioniert

    Projekt ansehen
  • Website Agentur

    UX / UI Design und Programmierung

    Leica – Konzentration auf das Wesentliche

    Projekt ansehen
  • Previiew UX Design

    UX / UI Design, Brand und Corporate Design

    Previiew – Find first class artists here

    Projekt ansehen
  • Im Dialog mit dem Kunden – Der Blog der Hamburger Hochbahn

    UX / UI Design und Programmierung

    Hamburger Hochbahn Blog – Informationen, Hintergründe und Geschichten

    Projekt ansehen
  • Oschätzchen Online-Shop Entwicklung

    UX / UI Design

    Oschätzchen – Online-Shop für Hamburgs kulinarisches Paradies

    Projekt ansehen
  • nordbahn Website Relaunch

    UX / UI Design, Programmierung

    Webrelaunch der nordbahn

    Projekt ansehen