Webseite-Konzept & Figma-Prototyp für Red Echo

von

Im Rahmen dieses Projekts entwickelte ich das komplette Designkonzept für die zukünftige Webseite der Band Red Echo. Von der ersten Recherche über ein Moodboard bis hin zum responsiven Figma-Prototyp entstand eine visuelle Grundlage, welche die Identität der Band digital erlebbar machen soll. Der Fokus lag dabei auf Konzeption, Design und Benutzerführung. Die technische Umsetzung der Webseite folgt im nächsten Semester.

Figma-Prototyp:

Phone: Prototyp

iPad: Prototyp

MacBook: Prototyp

Projektidee

Ziel dieses Projekts war die Entwicklung eines Webseite-Konzepts für die Band Red Echo. Die zukünftige Webseite soll als zentrale Anlaufstelle für Fans, Veranstalter und Interessierte dienen und die Band professionell präsentieren. Dabei soll sie nicht nur Informationen vermitteln, sondern auch die Stimmung und Identität der Band visuell transportieren.

Zu Beginn des Projekts beschäftigte ich mich intensiv mit der visuellen Identität von Red Echo. Da bereits ein Logo vorhanden war, bildete dieses die Grundlage für die weitere Gestaltung. Mithilfe eines Moodboards sammelte ich Inspirationen aus dem Bereich Musik, Band-Webseiten und moderner Webgestaltung. Zusätzlich analysierte ich den Instagram-Auftritt sowie das Spotify-Profil der Band, um ein besseres Verständnis für ihre Bildsprache, Zielgruppe und Wirkung zu erhalten.

Moodboard

Nachdem die gestalterische Richtung definiert war, begann ich mit der Entwicklung des Figma-Prototyps. Die Farbwelt orientiert sich an Schwarz- und Rottönen, welche den Rock-Charakter der Band unterstreichen und gleichzeitig einen hohen Wiedererkennungswert schaffen. Ergänzt wurde das Design durch auffällige Call-to-Action-Elemente, welche Besucher direkt zu Spotify weiterleiten und den Zugang zur Musik der Band erleichtern.

Die Webseite umfasst mehrere Unterseiten, darunter eine Startseite, eine Über-uns-Seite, eine Galerie, eine Event-Seite sowie eine Kontaktseite. Bei der Gestaltung legte ich besonderen Wert auf eine übersichtliche Struktur und eine intuitive Benutzerführung. Besucherinnen und Besucher sollen die wichtigsten Informationen schnell finden und gleichzeitig einen authentischen Eindruck der Band erhalten.

Für die Inhalte überarbeitete ich bestehende Texte der Band und bereitete diese speziell für die Webseite neu auf. Die Formulierungen wurden gemeinsam mit der Band abgestimmt und mehrfach angepasst. Zusätzlich führte ich ein Fotoshooting durch, um aktuelles Bildmaterial für die Webseite zu erstellen. Die entstandenen Bilder wurden anschliessend bearbeitet und direkt in das Design integriert.

Ein weiterer wichtiger Bestandteil des Projekts war die responsive Gestaltung. Sämtliche Seiten wurden für Desktop, Tablet und Smartphone ausgearbeitet. Dadurch konnte bereits in der Konzeptionsphase überprüft werden, wie die Inhalte auf unterschiedlichen Bildschirmgrössen funktionieren. Zusätzlich richtete ich verschiedene interaktive Klickfunktionen ein, um die spätere Nutzerführung realistisch simulieren zu können.

(mbi)

Projektumfang / Prozessdokumentation

Recherche & Konzeption

  1. Analyse bestehender Band-Webseiten
  2. Recherche von Designtrends im Musikbereich
  3. Erstellung eines Moodboards passend zur Bandidentität
  4. Analyse des Instagram- und Spotify-Auftritts von Red Echo
  5. Definition der Farbwelt, Typografie und Bildsprache
  6. Planung der Seitenstruktur und Benutzerführung

Content & Fotografie

  1. Sichtung bestehender Inhalte der Band
  2. Überarbeitung und Neuschreibung von Website-Texten
  3. Abstimmung der Inhalte mit der Band
  4. Durchführung eines Fotoshootings für die Webseite
  5. Auswahl und Bearbeitung der Bilder
  6. Integration der Bilder in den Figma-Prototyp

Design & Prototyping

  1. Erstellung der Startseite
  2. Gestaltung der Unterseiten
  3. Entwicklung eines konsistenten Designsystems
  4. Gestaltung verschiedener Call-to-Action-Elemente
  5. Integration eines Spotify-Buttons
  6. Aufbau einer Bildergalerie
  7. Erstellung interaktiver Klickfunktionen
  8. Feedbackrunden mit der Band
  9. Optimierung des Designs

Responsive Design

  1. Anpassung sämtlicher Seiten für Desktop
  2. Entwicklung einer Tablet-Version
  3. Entwicklung einer Smartphone-Version
  4. Optimierung von Abständen, Bildern und Navigationselementen
  5. Überprüfung der Benutzerfreundlichkeit auf unterschiedlichen Geräten

Die gesamte Konzeption, Gestaltung und Prototyp-Erstellung erfolgte eigenständig. Die Band war während des Projekts regelmässig in Feedbackprozesse eingebunden.

Reflexion

Recherche & Konzeptentwicklung

Besonders hilfreich war für mich die Erstellung des Moodboards zu Beginn des Projekts. Dadurch konnte ich relativ schnell eine gestalterische Richtung definieren und Entscheidungen während des Designprozesses einfacher treffen. Die Recherche von bestehenden Band-Webseiten sowie die Analyse der Social-Media-Kanäle halfen mir zusätzlich dabei, die Zielgruppe und die gewünschte Wirkung besser zu verstehen.

Gestaltung

Die Entwicklung des Designs bereitete mir besonders viel Freude. Spannend war die Herausforderung, die Energie und den Charakter einer Rock-Pop-Band in eine moderne Webseite zu übersetzen. Dabei musste stets darauf geachtet werden, dass die Gestaltung zwar auffällig wirkt, die Inhalte jedoch weiterhin gut lesbar und benutzerfreundlich bleiben.

Auch die Integration der selbst produzierten Fotos war ein interessanter Bestandteil des Projekts, da dadurch ein individueller und authentischer Auftritt geschaffen werden konnte.

Responsive Design

Der grösste Aufwand entstand bei der responsiven Umsetzung. Während die Desktop-Version relativ schnell entwickelt werden konnte, benötigten die Tablet- und Smartphone-Versionen deutlich mehr Zeit. Viele Elemente mussten neu angeordnet oder angepasst werden, damit sie auf kleineren Bildschirmen weiterhin funktionieren.

Rückblickend war dieser zusätzliche Aufwand jedoch sehr wertvoll, da bereits in der Konzeptionsphase viele potenzielle Probleme erkannt und gelöst werden konnten. Dies wird die spätere Programmierung der Webseite deutlich erleichtern.

Feedback

Die Rückmeldungen der Band fielen sehr positiv aus. Besonders geschätzt wurden die moderne Gestaltung, die klare Struktur sowie die Möglichkeit, die Musik durch direkte Verlinkungen zu Spotify stärker in den Vordergrund zu rücken. Die verschiedenen Feedbackschlaufen halfen dabei, das Design kontinuierlich weiterzuentwickeln und an die Vorstellungen der Band anzupassen.

Fazit

Insgesamt bin ich mit dem entstandenen Figma-Prototyp sehr zufrieden. Das Projekt hat gezeigt, wie wichtig eine gute Vorbereitung und Konzeption für die spätere Umsetzung einer Webseite sind. Durch die Kombination aus Recherche, Moodboard, Fotografie, Textarbeit und UX/UI-Design entstand eine solide Grundlage für die zukünftige Webseite von Red Echo.

Besonders spannend war für mich die Möglichkeit, verschiedene Kompetenzen miteinander zu verbinden und ein Design zu entwickeln, das die Band authentisch repräsentiert. Gleichzeitig konnte ich wertvolle Erfahrungen im Bereich Responsive Design und Webkonzeption sammeln.

Ich freue mich nun darauf, die gestalteten Entwürfe im nächsten Semester technisch umzusetzen und die Webseite als funktionierendes Endprodukt zu realisieren.