Produkt:

Website und Digital-Branding (Logo war bereits vorhanden) des Tonstudios „Strawberry Sound".

Ziel:

Analysebasiertes Digital Branding und Umsetzung einer intuitiven, zweisprachigen Website – mit SEO-Fokus, kurzen User-Journeys und einem CMS für einfache Inhaltsverwaltung.

Die zentralen Herausforderungen:

• Digital Branding, welches die Identität des Tonstudios authentisch wiedergibt.
• Herausheben des USP: Der Mix aus traditionellen Aufnahmetechniken wie Analog- und Live-Recording mit einem modernen Digitalstudio ist ein starkes Alleinstellungsmerkmal.
• Klare Benutzerführung und Informationsarchitektur. Verständliche Darstellung komplexer Inhalte – wie etwa die Recording-Chain (Schritte des Aufnahmeprozesses).
• Vollständig responsive und SEO-optimiert für bestmögliche Sichtbarkeit.
• CMS zur einfachen Inhaltsverwaltung.

Lösungen:

• Nach einer strategischen Betriebsanalyse wurden USP und Zielsetzung definiert und in einem UI-Styleguide visualisiert.


Der Styleguide zur Definition der UI-Elemente.

• Bestehendes Logo und eine professionelle Fotoreihe aus einer Aufnahmesession wurden ins Branding-Konzept einbezogen.
• Über Font, Farben, Bildstil und subtile Effekte wird der Charakter eines Hybrid-Tonstudios (Analog/Digital) erlebbar gemacht – wobei der Analog-Aspekt als zentraler USP im Vordergrund steht.

• Nach Festlegung der UI-Komponenten wurde ein vollständiges Prototyp-Layout erarbeitet, das zur Abstimmung mit dem Kunden und zur Freigabe für die Umsetzung diente.
• Ein dezent asymmetrisches Layout mit Sidebar-Navigation – die sich auf schmaleren Geräten in eine Hamburger-Navigation verwandelt – sorgt für eine klare Struktur und intuitive Benutzerführung. Logo-, Banner- und Infografikanimationen auf SVG-Basis bringen Lebendigkeit und Verspieltheit mit Top-Performance, während ein leichtes Hintergrundflimmern das Analog-Flair subtil transportiert.

Eine perspektivisch versetzte Transform-Origin beim Hover der Sidebar-Navigation erzeugt einen subtilen 3D-Effekt und stärkt die intuitive Orientierung.

Eine Infografik kann dabei helfen komplexe Abläufe wie eine Recording-Chain einfach zu erklären. Die Animationen helfen dabei Zusammenhänge und Abhängigkeiten zu erklären und hauchen dem Ganzen Leben ein. SVG-Animationen sind zudem extrem performant und belasten Ladezeiten nicht wie andere Bewegtformate.

• Die manuelle HTML/CSS/JavaScript-Umsetzung in Kombination mit Vibecoding via Cursor AI steigert die Entwicklungsgeschwindigkeit, ohne die Kontrolle vollständig an eine KI abzugeben. Gleichzeitig ermöglicht dieser Ansatz hohen Pagespeed, saubere SEO-Optimierung und Barrierefreiheit – für eine ausgezeichnete organische Sichtbarkeit.


Pagespeed Auswertung auf pagespeed.web.dev von Google.