Das Orchester stellt sich vor
Für dieses Projekt haben wir ein ganzes Orchester zum Leben erweckt – aber nicht auf der Bühne, sondern auf dem Bildschirm. Ziel war es, ein komplettes Orchester zu illustrieren, animieren und interaktiv auf einer Webseite darzustellen. Mit einem Klick auf die verschiedenen Instrumentengruppen taucht man tiefer in die musikalische Welt ein – fast so, als würde man selbst im Saal sitzen.
Der Weg zum digitalen Orchester
1. Erste Töne – Idee & Konzept
Die Grundidee: Ein Orchester als liebevoll gestaltete, klickbare Illustration. Dafür haben wir unsere grauen Zellen angestrengt und haben uns in den nächsten paar Orchesterproben besonders geachtet, welche Instrumente wo platziert sind. Natürlich sind nicht alle Orchester gleich aufgestellt.
2. Skizzen, Stil & Charaktere
Danach ging’s an die Zeichenarbeit. Jeder einzelne Musiker wurde von Hand illustriert – mit individuellem Aussehen, aber einem einheitlichen Stil. Ziel war ein verspielter, aber klarer Look, der sich gut animieren und im Web darstellen lässt.
3. Animation – ein bisschen Bewegung muss sein
Um dem Ganzen Leben einzuhauchen, haben wir einzelne Elemente animiert: Noten wippen im Takt, Musiker schauen sich um und die Bögen schwingen beim Spielen – subtil, aber wirkungsvoll.
4. Umsetzung – alles auf die Bühne!
Schlussendlich wurde die Bühne ins Web gebracht. Das ganze Orchester ist auf der Startseite sichtbar – per Klick auf die Gruppen (z. B. Geigen, Celli, Pauke) gelangt man auf separate Unterseiten mit Infos und weiteren Animationen. Alles wurde mit HTML und CSS realisiert.
Work in Progress
Hier ein paar Screenshots vom Designprozess
Grundfarben der Webseite
Erste Designansätze entstehen
(abb)
Das Projekt war definitiv aufwändiger, als wir anfangs gedacht haben. Vor allem die vielen kleinen Schritte – von den Illustrationen über die Animationen bis zur Webumsetzung – haben mehr Zeit in Anspruch genommen, als geplant. Aber genau daran sind wir auch gewachsen. Ausserdem haben wir uns noch die Frage gestellt anfangs, ob wir es im Figma umsetzen wollten. Wir haben uns jedoch dagegen entschieden, nach einem Telefon mit Nick, daufgrund der Kontrolle des Inhaltes, das wir besser im Griff haben als wenn wir uns auf ein Designtool wie Figma verlassen müssten.
Die größte Herausforderung war es, den Überblick zu behalten und alle Elemente sauber zusammenzuführen. Gleichzeitig hat’s aber auch richtig Spass gemacht, kreativ zu arbeiten und am Ende alles live im Browser zu sehen. Beim Responsive Design haben wir am längsten gebraucht, wir hatten einige Probleme, die Unterseiten darzustellen, weil die Musikerinnen zuerst immer von der Fläche verdrängt wurden. Dies haben wir dann aber korrigieren können.
Wir haben viel gelernt – über Illustration, Animationen, Webtechnik und darüber, wie wichtig ein gutes Konzept von Anfang an ist. Und es war schön zu sehen, wie aus einer simplen Idee Schritt für Schritt eine interaktive, visuelle Welt entstanden ist.