DJ !mauf Website Konzept

Kund:in

Freies Projekt

Kategorie

UI Design,
Prototyping,
Branding

Tools

Figma,
After Effects

DJ !mauf am Pult im Beatpol Dresden – Silhouette gegen warmes orangerotes Bühnenlicht, tanzende Menge im Vordergrund

If there’s noise in my head i’m out of control!

Wer ist !mauf?

Markus, bekannt als DJ !mauf, legt seit knapp 20 Jahren auf. Er ist in der Dresdner Neustadt zuhause, spielt Indie und Rock, betreibt eine eigene Veranstaltungsreihen in verschiedenen Clubs und ist Gründer von zwei größeren Projekten: den Silent Disco Touren und dem Festival Dresden am Meer. Ich gehe regelmäßig zu seinen Events. Und irgendwann ist mir aufgefallen, dass seine Website davon nichts so richtig erzählt.
Die bestehende Seite lief auf einem veralteten WordPress-Theme, das jahrelang nicht angefasst wurde. Das Layout war auf ältere Bildschirmproportionen ausgelegt, nutzte moderne Displaybreiten kaum und versteckte seine wichtigsten Projekte in kleinen, leicht zu übersehenden Textblöcken. Die Eventliste war unübersichtlich und schwer zu scannen. Für jemanden mit diesem Output hat die Website das einfach nicht gespiegelt.

Wie ich anfing.

Er hat mich nicht gefragt. Ich hab einfach angefangen.

Damals war ich gerade dabei, von Adobe XD auf Figma umzusteigen, und wollte ein echtes Projekt zum Reinarbeiten. Aber je tiefer ich reingekommen bin, desto weniger ging es ums Tool und desto mehr um das eigentliche Problem. Ich hab mir angeschaut, was !mauf visuell ausmacht: seine Farbpalette, die Ästhetik seiner Veranstaltungsreihe. Und darauf aufgebaut, statt von Null anzufangen. Same same, but different. Das Vinyl-Motiv und der Audiowellen-Gradient waren Wege, eine visuelle Sprache zu entwickeln, die sich nach Musik anfühlt, ohne es plakativ zu machen.

Als Figma für die geplanten Interaktionen an seine Grenzen stieß, habe ich die entsprechenden Screens für After Effects vorbereitet und dort animiert. Das war eine bewusste Entscheidung: Die Animationsqualität, die ich im Kopf hatte, brauchte ein anderes Tool. Ich lerne lieber den richtigen Workflow, als beim Ergebnis Abstriche zu machen.

DJ !mauf Website-Konzept – drei mobile Screens: Hero mit DJ-Porträt und Intro-Text, Event-Detailansicht mit Headliner-Zitat und Veranstaltungsinfos, Terminübersicht mit farbigen Kreis-Bildern als Thumbnail
DJ !mauf Website-Konzept – Desktop-Ansicht der Eventseite „Nachtbaden feat. Ms Lightning" im Bärenzwinger: DJ !mauf und Ms Lightning als Schwarz-Weiß-Foto vor grün-gelbem Farbverlauf, Eventinfos und Künstler:innen-Beschreibungen
DJ !mauf live im Beatpol Dresden – tanzende Menge mit erhobenen Händen, DJ-Silhouette auf der Bühne, alles in intensivem Blaulicht mit Discokugel
DJ !mauf Website-Konzept – Übersicht verwendeter Gestaltungselemente: Schriftarten Exo 2 und Safiro, Farbpalette mit Türkis und Gelb, Vinyl-Motiv und UI-Komponenten wie Button und CUE-Regler
DJ !mauf Website-Konzept – Farbpalette des Design Systems mit sechs Farbgruppen (Neutral Grey, Night Yellow, Arctic Blue, Arctic Turquoise, Night Green, Soul Red) in gestuften Helligkeitswerten, kombiniert mit dem Jubiläums-Foto von DJ !mauf im Beatpol
DJ !mauf springt jubelnd vor der Bühne des Beatpol Dresden – Schwarz-Weiß-Foto vom Shooting zum 10-jährigen DJ-Jubiläum
DJ !mauf Design System – Farbpalette mit sechs Farbgruppen: Neutral Grey, Arctic Blue, Arctic Turquoise, Soul Red, Night Green und Night Yellow, jeweils in fünf Helligkeitsstufen mit Hex-Werten

Was daraus wurde.

Als die visuelle Sprache stand, habe ich weitergebaut: Eventplakate, Merch, Social-Media-Posts, alle konsistent mit dem Website-Konzept. Das Ziel war zu zeigen, dass das Design kein Einzelstück ist, sondern ein System, das über verschiedene Formate funktioniert.

Irgendwann habe ich Markus eingeladen und ihm alles gezeigt. Er war begeistert. Und weil er selbst Designer ist, hat mir das etwas bedeutet. Umgesetzt wurde es nicht. Der Grund war Zeit und Budget, nicht das Konzept.

Social-Media-Mockup: Instagram-Feed auf mobilem Screen neben vier Event-Slides mit DJ-Porträt, Partyfoto, Musikliste und Slogan „Come As You Are, Come as A Friend"
DJ !mauf Eventplakat-Mockup – schwarzes Hochformat-Plakat mit Slogan „I Bet You Look Good On The Dancefloor", Veranstaltungsinfos und türkis-blauem Farbverlauf, auf einer Betonstufe liegend
DJ !mauf Merchandise-Mockup – schwarze Tote Bag mit türkisfarbenem Henkel und Slogan „I Bet You Look Good On The Dancefloor" auf einer Treppe
DJ !mauf Website-Konzept – Mockups für Print und Merchandise: schwarze Tote Bag mit Slogan „I Bet You Look Good On The Dancefloor" auf einer Treppe, daneben ein passendes Eventplakat im gleichen Design

Team / Credits

Konzept & Design, Animation, Prototyping

Lisa-Justine Schmidt

Text, Feedback

Markus Harrasser
(a.k.a. DJ !mauf)

Fotografie

Susann Klauck