Dunckelfeld

Projekt schließen

Endlich
Universell


Ein digitales Zuhause für die Stars und Superstars des Major Labels.

UNVERSAL MUSIC Deutschland

Die deutsche Ländergesellschaft mit Sitz in Berlin ist Teil der UNIVERSAL MUSIC GROUP, weltweiter Marktführer in der musikbasierten Unterhaltung.

Konzept

Start am Reissbrett

Wer das Universum erforschen will, sollte genau wissen, was er tut. Mit über 670 Sitemaps, Flowcharts, Wireframes und Co. haben wir das Projekt von Anfang an auf ein stabiles Gerüst gestellt. Drei Konzeptkriterien waren uns dabei besonders heilig:

Don't make me think

Dieser Satz war unser Leuchtfeuer. Von der ersten Projektminute bis zur letzten Codezeile haben wir uns an ihm orientiert. Er steht für die Notwendigkeit in allen Elementen, selbsterklärend und kinderleicht bedienbar zu sein.

Make it modular

Um den Ansprüchen an Branding und Interaktion gerecht zu werden, braucht es eine modalere Herangehensweise. So lassen sich viele Elemente – ob im Design oder im Code – adaptieren und erlauben effizienteres Arbeiten sowie minimalen Wartungsaufwand.

Native experience

Wir haben auf progressive Technologien gesetzt, damit sich die Website für den Nutzer wie eine native App anfühlt. Mit anderen Worten: schnell, verlässlich, immersiv.

wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire

Features

Erst die Pflicht, dann die Kür. Ohne den Blick aufs Wesentliche zu verlieren, haben wir einige konzeptionelle Besonderheiten clever gelöst und in die Seite integriert.

Audioplayer

Unser eigens entwickelter Audioplayer ist eher eine multifunktionale Streaming-App. Egal wie mit der Website interagiert wird, die Musik hört nur auf, wenn du das willst.

Backstage

Du bist ein Superfan? Dann ist Backstage das Richtige für dich! Wir haben den exklusiven Bereich mit allerlei Funktionen wie Gewinnspielen oder Gratis-MP3s ausgestattet, die den User die Künstler noch intensiver erleben lassen.

Color Shade Generator

Jetzt wird’s bunt. Durch algorithmusgestützte Farbgebung erhält jeder Künstler seine eigene Farbe.

Genre Selector

Eine stylische Genreübersicht unterstützt dich bei der Suche nach deiner Lieblingsmusik.

Integriertes Karriereportal

Eine Seite in der Seite – im Company-Bereich erfährt du alles über Universal Music Germany als Arbeitgeber.

Intuitive Suchfunktion

Ohne Schnick-Schnack – die intuitive Suchfunktion gibt dir schnell und einfach, wonach du suchst.

Design

Schön gemacht

Wenn man für UNIVERSAL MUSIC gestaltet, dann ist "the sky" ganz sicher nicht "the limit". Jedes Detail muss sitzen und genau so viel Grund zum Staunen geben wie der Gesamteindruck.

Final vs. Pitch

Design ist ein Prozess. Oft verändert sich das initiale Design in der Ausarbeitung noch, weil neue Ideen, Entscheidungen oder Funktionalitäten hinzukommen. Unsere Aufgabe ist es, mit Komplexität so umzugehen, dass sie für den Nutzer am Ende nicht spürbar ist. Vorhang auf für die Gegenüberstellung: Finale Ausarbeitung first, Pitchdesign second.

Farbgebung und Icons

Minimalistische Icons erleichtern die Orientierung in der Genreauswahl.

genre-klassik
Klassik
genre-pop
Pop
genre-rock
Rock
genre-urban
Urban
genre-songwriters
Songwriters
genre-jazz
Jazz
genre-schlager
Schlager
genre-folk
Volksmusik
Familie
genre-hörbuch
Hörbuch

Typografie

Durch eine sorgfältig auswählte Schrift- und Farbwelt entwickelt sich der Charakter der Seite. Hierbei achten wir besonders auf Ästhetik, Kontrast und optimale Lesbarkeit.

Open Sans
Aa
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
Regular
Bold
Noto Serif
Aa
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
Regular Italic
 

Modularer Aufbau

Im Zeichen des Google Material Design haben wir uns für ein einfaches und verständliches Interface mit extrem modularen Elementen entschieden, um flexibel auf alle Situationen reagieren zu können.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum dolor sit amet doloris da la ipsum dela loris de ru ipsumusus
Tile Image

Abkürzung gefällig?

Copy in Überlänge wird mit etwas CSS elegant überblendet. Da freut sich das SEO-Herz.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

Fokus auf Interaktion

Durch den flexiblen Actionbereich der modularen Tiles können Nutzer ihre Lieblingskünstler per Schnellzugriff sofort favorisieren.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

Für alles gewappnet

Die Tiles folgen alle demselben Aufbau, können jedoch unterschiedliche Funktionalitäten erfüllen, wie z. B. die Chartplatzierung des jeweiligen Künstlers anzeigen.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

Content schlank verpackt

Bei der wiederholenden Darstellung von Informationen im Listenformat (z.B. Tourdaten) helfen die schlanken Formate der Tiles, um den Nutzer zu führen und weiterzuleiten.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ips
Tile Image

Kompaktes Format

Auch auf engstem Raum funktioniert eine reduzierte Darstellung von relevanten Informationen.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

Flexible Aufteilung

Die drei Kernbereiche der Tile: Bild, Inhalt und Menübereich können flexibel angeordnet werden - in Hoch- oder Querformat.

Künstlerseiten

Auf über 3100 individuellen Künstlerseiten macht sich das modulare Design richtig bezahlt. Unser anpassbares User Interface steht dem Weltstar mit vollem Programm von Musikvideo bis Merch genauso gut wie dem Newcomer mit nur einem Hit.

Standard

Die Künstlerseiten werden standardisiert generiert mit dem Material (Produkte, Videos, News, Fotos), das vom Künstler im CMS hinterlegt ist.

Storytelling

Die Redakteure haben für jeden Künstler den vollen Gestaltungsspielraum um einzigartige Storytelling-Seiten zu erstellen. Diese können z. B. Countdowns, Gewinnspiele, Newsletter und vieles mehr enthalten.

default
custom

Development

Die Technik macht's

Für unser technisch bislang anspruchsvollstes Entwicklungsprojekt sind wir an vielen Stellen neue Wege gegangen. So ist es uns gelungen aus einer komplexen Herausforderung eine hochperformante Web Experience zu entwicklen.

Mobile First

Wir zwängen keinen Desktop in ein Smartphone-Korsett. Von Grund auf für mobile Endgeräte konzipiert macht die Seite immer eine schlanke Figur. Natürlich hat sie auch den nötigen Hüftschwung, um den Platz am heimischen Flatscreen genauso auszufüllen.

Technologische Besonderheiten

Die Seite macht Spaß und fühlt sich superleicht an. Damit dieser Eindruck entsteht, wurde so einiges getan. Ein Blick unter die Motorhaube des musikalischen Epizentrums:

Progressive Webapp

Schnell, verlässlich und absolut immersiv – die Seite fühlt sich an wie eine native App.

Big, bigger, universal

42 Seitentypen, 3119 individuelle Künstlerseiten und Zugriff auf über 38 Terabytes an Datensätzen.

Data on demand

Bei herkömmlichen Websites wird bei jedem Seitenaufruf meist der komplette HTML-Quellcode geladen. Nicht so hier. Unser Kickstart versteckt sich in einem ultraschlanken JavaScript-Code, der auf unter 1MB komprimiert wurde und nur noch Content und Bildpfade nachlädt.

Auf Nummer Sicher

Alles safe – mit einem hybriden Set aus Verschlüsselungsprotokollen wie Internet Secure System, TLS, und VAuth für den Backstage-Bereich.

Musik nonstop

Kein Audioplayer, sondern viel mehr als das – wir sprechen hier von einer multifunktionalen Streaming-App, die unterbrechungsfreien Musikgenuss garantiert.

Next Level Caching

Formel 1 fährt man mit Turboknopf. Wir fahren mit Varnish Cashing – einem Web-Beschleuniger für dynamische Seiten mit besonders viel Inhalt.

Development Stack

Nur mit einem perfekt abgestimmten Technologie-Motor lassen sich neue Bestzeiten erzielen. Wir setzen auf ein fortschrittliches, modales und komponentenbasiertes System, das wir passend zu den hohen Ansprüchen der Website zusammengestellt haben.

React

Zukunftsweisende JavaScript-Bibliothek zum Erstellen von client- und serverseitig gerenderten Benutzeroberflächen.

Relay

Framework um datengetriebene React-Anwendungen zu kreieren.

GraphQL

Flexible Querysprache, welche exakt die benötigten Daten anfordert.

Webpack

Buildtool, welches den komplexen Ansprüchen einer wachsenden Plattform gerecht wird.

Babel (ES6 und ES7)

Modernes JavaScript, perfekt zugeschnitten auf die Node- und Browser-Umgebung.

Varnish-Cashing mit VAuth

Optimale Erreichbarkeit von gecachten Inhalten – auch für geschützte Bereiche.

Zusammengezählt

Wir bedanken uns für die wundervolle Zusammenarbeit mit Universal Music Germany und den Backend-Partnern VOTUM und ostec. Ein großartiges Projekt – zusammengefasst in einer unglaublichen Zahlenwucht.

  • 42Seitentypen

  • 670Wireframes

  • 327Designdateien

  • 65.969Unique Lines of Code

  • 38Terabyte an Datensätzen

  • 3.119Individuelle Künstlerseiten

  • 1.000.000Unique Visitors im Monat