Red Echo – Programmierung und Umsetzung der Webseite
Nachdem im vorherigen Projekt das vollständige Designkonzept und der responsive Figma-Prototyp für die Webseite der Band Red Echo entstanden sind, ging es nun an die tatsächliche Umsetzung. Ziel dieses Projekts war es, aus meinem eigenen Design eine funktionierende Webseite zu entwickeln und diese anschliessend auch online zu veröffentlichen. Dabei stand für mich vor allem die Programmierung im Mittelpunkt, ein Bereich, in dem ich vor dem Studium kaum Erfahrungen hatte und in dem ich mich mit diesem Projekt bewusst weiterentwickeln wollte. Gleichzeitig entwickelte sich das Projekt auch gestalterisch weiter, da während der Programmierung unter anderem das bestehende Bandlogo nochmals überarbeitet und neu gestaltet wurde.
Link Webseite: https://redecho.ch
Projektidee
Die Grundlage für dieses Projekt bildete der Figma-Prototyp, den ich bereits im vorherigen Semester für Red Echo entwickelt hatte. Darin waren das gesamte visuelle Erscheinungsbild, die Seitenstruktur sowie Versionen für Desktop, Tablet und Smartphone definiert.
Im Juli begann ich mit der technischen Umsetzung der Webseite. Dabei startete ich mit der Startseite und versuchte, mein bestehendes Figma-Design Schritt für Schritt in eine funktionierende Webseite zu übertragen. Anschliessend folgten die weiteren Seiten und Funktionen.
Eine besondere Herausforderung war für mich, dass ich das Programmieren erst während meines Studiums gelernt habe. Ich verfügte dadurch zwar über Grundlagen, hatte zuvor aber noch nie eine Webseite in diesem Umfang selbstständig und ohne direkte Hilfe programmiert. Genau das war gleichzeitig meine Motivation für das Projekt. Ich wollte mich selbst herausfordern und herausfinden, wie weit ich mit meinen bisherigen Kenntnissen komme.
Während der Programmierung nutzte ich teilweise KI als Unterstützung. Vor allem wenn ich bei bestimmten Codes nicht weiterkam oder Fehler nicht selbstständig lösen konnte, half mir KI dabei, mögliche Lösungswege zu finden und die Funktionsweise einzelner Codes besser zu verstehen. Die Lösungen mussten anschliessend immer wieder auf meine Webseite angepasst, getestet und teilweise mehrfach verändert werden.
Schnell zeigte sich auch, dass sich nicht jedes Element aus dem Figma-Prototyp eins zu eins übertragen liess. Gewisse Bereiche mussten während der Programmierung nochmals angepasst oder neu gedacht werden. Gleichzeitig kamen vonseiten der Band neue Wünsche hinzu. Unter anderem sollte es möglich sein, verschiedene Dokumente auf der Webseite zur Verfügung zu stellen. Dafür passte ich zunächst mein bestehendes Figma-Design an und integrierte den neuen Bereich anschliessend in die programmierte Webseite.
Überarbeitung des Bandlogos
Während der Programmierung der Webseite stellte sich im gemeinsamen Austausch mit der Band heraus, dass das bestehende Logo nochmals überarbeitet werden sollte. Das ursprüngliche Logo war bereits im vorherigen Projekt entstanden, passte jedoch nicht mehr vollständig zum gewünschten Erscheinungsbild der Band und der neuen Webseite.
Deshalb entschied ich mich dazu, das Logo nochmals neu zu gestalten. Als Ausgangspunkt schaute ich mir die verschiedenen Entwürfe und Vorlagen aus dem vorherigen Jahr an und überlegte mir, welche Elemente ich übernehmen und welche ich verändern möchte.
Anschliessend entwickelte ich mit Adobe Illustrator mehrere Logovarianten. Dabei achtete ich besonders darauf, dass das Logo zum Musikstil der Band passt und gleichzeitig mit dem Design der Webseite harmoniert. Beide Varianten gestaltete ich selbstständig und stellte sie anschliessend der Band vor.
Gemeinsam besprachen wir die beiden Entwürfe und entschieden uns schliesslich für das Logo, welches die Band als passender zu ihrem Stil empfand. Dieses integrierte ich anschliessend in die Webseite und passte die Gestaltung entsprechend an.
Dadurch entwickelte sich das Projekt während der Programmierung auch gestalterisch nochmals weiter. Besonders interessant fand ich, dass nicht nur technische Anpassungen notwendig waren, sondern auch bereits bestehende Gestaltungselemente nochmals überdacht und neu entwickelt wurden.
Weitere Anpassungen und Umsetzung
Auch die Bildergalerie entwickelte sich während des Projekts immer weiter. Verschiedene Darstellungen wurden ausprobiert und gemeinsam mit der Band besprochen, bis eine passende Lösung gefunden wurde. Zusätzlich klärte ich die aktuellen Eventdaten mit der Band ab und integrierte diese in die Webseite.
Die Programmierung nahm insgesamt deutlich mehr Zeit in Anspruch als ursprünglich erwartet. Besonders kleinere Anpassungen oder Fehler führten teilweise dazu, dass ich mich mehrere Stunden mit einzelnen Bereichen beschäftigte. Gleichzeitig lernte ich dadurch sehr viel über den Aufbau einer Webseite und darüber, wie verschiedene Elemente miteinander zusammenspielen.
Nachdem die Webseite grundsätzlich fertig programmiert war, kaufte ich das Hosting bei Hostpoint und lud die Webseite erstmals online. Dadurch beschäftigte ich mich nicht nur mit der Gestaltung und Programmierung, sondern auch mit der tatsächlichen Veröffentlichung einer Webseite.
Da mir bewusst ist, dass mir insbesondere im Bereich Responsive Webdesign noch Erfahrung fehlt, entschied ich mich anschliessend für eine Zusammenarbeit mit Andri. Er unterstützte mich bei der technischen Kontrolle der Webseite und überprüfte insbesondere die Responsiveness auf verschiedenen Bildschirmgrössen. Dadurch konnten Fehler und Probleme erkannt werden, die mir selbst aufgrund meiner noch begrenzten Erfahrung möglicherweise nicht aufgefallen wären.
Zusätzlich nahm Andri verschiedene technische und gestalterische Optimierungen vor. Unter anderem ergänzte er ein Burger-Menü für die Navigation, überarbeitete die Bildergalerie und fügte verschiedene Animationen hinzu. Beispielsweise integrierte er bewegte Hintergründe sowie zusätzliche Animationen auf der Startseite, wodurch die Webseite insgesamt lebendiger und dynamischer wirkt. Gleichzeitig optimierte er verschiedene Elemente und deren Darstellung auf unterschiedlichen Bildschirmgrössen.
Besonders spannend fand ich, wie sich die Webseite durch diese zusätzlichen Anpassungen nochmals weiterentwickelte. Obwohl die grundlegende Gestaltung und Programmierung bereits vorhanden waren, konnte Andri mit seinem technischen Wissen weitere Verbesserungen vornehmen.
Vorher-Nachher-Vergleich
(lst)
Projektumfang / Prozessdokumentation
Vorbereitung & Überarbeitung
- Sichtung des bestehenden Figma-Prototyps
- Planung der technischen Umsetzung
- Überprüfung der bestehenden Seitenstruktur
- Abstimmung aktueller Inhalte mit der Band
- Anpassung des Figma-Designs aufgrund neuer Anforderungen
- Ergänzung eines Bereichs für Dokumente
- Gemeinsame Überprüfung des bestehenden Bandlogos
- Sichtung der ursprünglichen Logoentwürfe aus dem vorherigen Jahr
- Entwicklung von neuen Logovarianten mit Adobe Illustrator
- Präsentation und Besprechung der beiden Varianten mit der Band
- Gemeinsame Auswahl des Logos, welches am besten zum Stil der Band passt
- Integration des neuen Logos in die Webseite
Programmierung
- Beginn der Programmierung mit der Startseite (mit Visual Studio Code)
- Schrittweise Umsetzung der weiteren Unterseiten
- Übertragung des Figma-Designs in die Webseite
- Programmierung der Navigation und verschiedener Interaktionen
- Umsetzung und mehrfache Anpassung der Bildergalerie
- Integration der aktuellen Eventdaten
- Integration von Dokumenten
- Umsetzung verschiedener Verlinkungen und Funktionen
- Laufendes Testen der einzelnen Seiten
- Behebung verschiedener Fehler und Darstellungsprobleme
- Einsatz von KI als Unterstützung bei einzelnen Programmierfragen
- Laufende Überarbeitung und Optimierung des Codes (durch Andri)
Content & Abstimmung
- Austausch mit der Band zu aktuellen Inhalten
- Abklärung und Aktualisierung der Eventdaten
- Abstimmung der Bildergalerie
- Integration der bestehenden Fotos und Inhalte
- Besprechung zusätzlicher Wünsche
- Anpassung der Webseite aufgrund des Feedbacks der Band
- Gemeinsame Besprechung und Auswahl des neuen Bandlogos
- Abstimmung und Fehlerbehebung durch Andri
Veröffentlichung & technische Umsetzung
- Auswahl und Kauf des Hostings bei Hostpoint
- Vorbereitung der Webseite für die Veröffentlichung
- Upload der programmierten Webseite
- Kontrolle der Webseite in der Online-Version
- Überprüfung von Links und Funktionen
- Behebung von Fehlern nach der Veröffentlichung
Responsive Design & Qualitätskontrolle (Andri)
- Überprüfung der Darstellung auf unterschiedlichen Bildschirmgrössen
- Identifikation von Problemen bei der Responsiveness
- Zusammenarbeit mit Andri für die technische Kontrolle
- Anpassung einzelner Elemente für Desktop, Tablet und Smartphone
- Optimierung von Abständen, Navigation und Bildern
- Ergänzung eines Burger-Menüs für die Navigation
- Überarbeitung und gestalterische Optimierung der Bildergalerie
- Integration verschiedener Animationen, unter anderem bewegter Hintergründe
- Ergänzung von Animationen auf der Startseite
- Abschliessende Funktions- und Qualitätskontrolle
Reflexion
Programmierung & Lernprozess
Die Programmierung war für mich mit Abstand der herausforderndste, gleichzeitig aber auch lehrreichste Teil des Projekts. Da ich erst während meines Studiums mit dem Programmieren begonnen habe, war eine Webseite in diesem Umfang für mich etwas komplett Neues.
Gerade am Anfang musste ich mich stark in die verschiedenen Bereiche einarbeiten. Viele Dinge, die im Figma-Design sehr einfach erscheinen, sind in der technischen Umsetzung deutlich komplexer. Teilweise verbrachte ich mehrere Stunden damit, kleine Fehler zu suchen oder einzelne Elemente so anzupassen, dass sie wie gewünscht funktionieren.
Während des Projekts merkte ich jedoch auch, dass ich zunehmend besser verstand, wie die verschiedenen Bestandteile zusammenspielen. Probleme, bei denen ich zu Beginn noch lange nach einer Lösung suchen musste, konnte ich später teilweise deutlich schneller nachvollziehen.
Arbeiten mit KI
KI war während des Projekts ein hilfreiches Werkzeug. Besonders bei Problemen, bei denen mir aufgrund meiner noch begrenzten Programmiererfahrung das notwendige Wissen fehlte, konnte ich mir Lösungsansätze erklären oder Codebeispiele erstellen lassen.
Dabei stellte ich jedoch schnell fest, dass vorgeschlagener Code nicht einfach übernommen werden kann. Häufig musste dieser an meine bestehende Struktur angepasst oder nochmals verändert werden. Teilweise funktionierte eine Lösung zunächst, verursachte jedoch an einer anderen Stelle ein neues Problem.
Dadurch lernte ich, KI eher als Unterstützung und nicht als fertige Lösung zu verwenden. Für mich war es wichtig, zumindest nachvollziehen zu können, was der entsprechende Code verändert und wie ich ihn in meine Webseite integrieren kann. Deshalb überprüfte ich die Veränderungen jeweils direkt über die Vorschau im Browser.
Vom Figma-Design zur Webseite
Besonders interessant fand ich den direkten Vergleich zwischen meinem Figma-Prototyp und der tatsächlichen Webseite. Im vorherigen Projekt konnte ich mich hauptsächlich darauf konzentrieren, wie die Webseite aussehen und wie die Benutzerführung funktionieren soll.
Bei der Programmierung musste ich mich nun damit auseinandersetzen, ob diese Ideen technisch auch so funktionieren. Dabei zeigte sich, dass gewisse Elemente nochmals angepasst werden mussten. Auch neue Wünsche der Band führten dazu, dass der ursprüngliche Prototyp weiterentwickelt wurde.
Dadurch habe ich gelernt, dass ein Figma-Prototyp zwar eine sehr wichtige Grundlage bildet, eine Webseite während der tatsächlichen Entwicklung aber trotzdem weiterlebt und sich verändert.
Weiterentwicklung des Logos
Eine zusätzliche gestalterische Aufgabe entstand während der Programmierung durch die Überarbeitung des Bandlogos. Ursprünglich war ich davon ausgegangen, dass ich das bestehende Logo aus dem vorherigen Projekt übernehmen würde. Im Austausch mit der Band merkten wir jedoch, dass dieses nicht mehr vollständig zum gewünschten Stil passte.
Deshalb beschäftigte ich mich nochmals mit den früheren Entwürfen und entwickelte in Illustrator neue Varianten. Dabei war es für mich spannend, auf meiner bisherigen Arbeit aufzubauen und gleichzeitig nochmals neue Ideen einzubringen.
Besonders interessant fand ich, dass sich die Band schliesslich für die Variante entschied, welche aus ihrer Sicht besser zu ihrem Stil passte. Dadurch wurde mir nochmals bewusst, wie wichtig es ist, bei einem Gestaltungsprojekt nicht nur die eigenen Vorstellungen zu berücksichtigen, sondern auch auf die Wünsche und die Identität der Kund einzugehen.
Gleichzeitig zeigte mir diese Erfahrung, dass ein Designprozess nicht unbedingt abgeschlossen ist, sobald die ersten Entwürfe fertiggestellt sind. Auch während der technischen Umsetzung können neue Erkenntnisse entstehen, welche eine gestalterische Überarbeitung sinnvoll machen.
Responsive Design
Eine der grössten Herausforderungen blieb für mich die Responsiveness. Obwohl bereits im Figma-Projekt Versionen für Desktop, Tablet und Smartphone vorhanden waren, bedeutete dies nicht automatisch, dass die programmierte Webseite auf allen Bildschirmgrössen funktioniert.
Teilweise führten bereits kleine Änderungen dazu, dass Elemente auf einer anderen Bildschirmgrösse nicht mehr richtig dargestellt wurden. Dadurch musste ich immer wieder verschiedene Ansichten überprüfen und Anpassungen vornehmen.
Da mir in diesem Bereich noch die notwendige Erfahrung fehlt, entschied ich mich bewusst dazu, für die finale Kontrolle mit Andri zusammenzuarbeiten. Dadurch konnte ich zusätzlich von seinem Wissen profitieren und gleichzeitig nachvollziehen, welche Punkte ich bei zukünftigen Projekten bereits während der Programmierung stärker berücksichtigen sollte.
Neben der technischen Kontrolle ergänzte Andri auch verschiedene Funktionen und Animationen. Dazu gehörten beispielsweise ein Burger-Menü, die Überarbeitung der Bildergalerie sowie bewegte Hintergründe und Animationen auf der Startseite.
Besonders interessant war für mich der direkte Vorher-Nachher-Vergleich. Dadurch konnte ich sehen, wie sich eine bereits funktionierende Webseite mit zusätzlichen Anpassungen nochmals deutlich weiterentwickeln kann. Gleichzeitig wurde mir bewusst, dass neben der eigentlichen Programmierung auch die Benutzerfreundlichkeit und die kleinen gestalterischen Details eine wichtige Rolle spielen.
Zeitmanagement
Der zeitliche Aufwand für die Programmierung war deutlich grösser als erwartet. Ich begann bereits im Juli mit der Umsetzung und beschäftigte mich über viele Stunden mit der Webseite.
Besonders schwierig war es, im Voraus einzuschätzen, wie lange einzelne Funktionen benötigen würden. Teilweise konnte ein grösserer Bereich relativ schnell umgesetzt werden, während ein vermeintlich kleines Problem mehrere Stunden beanspruchte.
Auch die zusätzlichen gestalterischen Anpassungen, wie beispielsweise die Neugestaltung des Bandlogos, benötigten Zeit, die ich ursprünglich nicht eingeplant hatte. Gleichzeitig waren diese Änderungen wichtig, damit die Webseite am Ende den Vorstellungen der Band entspricht.
Rückblickend würde ich bei einem vergleichbaren Projekt deshalb deutlich mehr Zeit für Testing, Fehlersuche, Responsive Design und mögliche gestalterische Anpassungen einplanen. Gerade diese Bereiche nehmen gegen Ende eines Webprojekts nochmals viel Zeit in Anspruch.
Zusammenarbeit mit der Band
Der regelmässige Austausch mit Red Echo war auch während der technischen Umsetzung wichtig. Da die Webseite tatsächlich von der Band genutzt werden soll, mussten nicht nur technische und gestalterische Aspekte berücksichtigt werden, sondern auch ihre aktuellen Bedürfnisse.
Besonders bei der Bildergalerie, den Eventdaten und der Integration von Dokumenten entstanden dadurch nochmals verschiedene Anpassungen. Auch die Überarbeitung des Logos war ein wichtiger Bestandteil dieser Zusammenarbeit.
Die Band konnte anschliessend selbst entscheiden, welches Logo ihren Stil am besten widerspiegelt. Für mich war es schön zu sehen, dass meine neuen Entwürfe gut aufgenommen wurden und wir gemeinsam eine passende Lösung finden konnten.
Gleichzeitig half mir das Feedback dabei, die Webseite nicht nur aus meiner eigenen gestalterischen Sicht zu betrachten, sondern als tatsächliches Produkt für eine Kundin beziehungsweise einen Kunden.
Fazit
Insgesamt war dieses Projekt für mich eine grosse Herausforderung, auf die ich gleichzeitig sehr stolz bin.
Besonders wertvoll war für mich der Lernprozess. Ich konnte meine Kenntnisse aus dem Studium praktisch anwenden und musste mich gleichzeitig mit vielen Problemen auseinandersetzen, für die ich zuvor noch keine Lösung kannte. Dabei habe ich gemerkt, dass ich im Bereich Programmierung noch viel lernen kann, aber gleichzeitig bereits in der Lage bin, ein umfangreicheres Webprojekt umzusetzen.
Die Zusammenarbeit mit Andri für die abschliessende technische Kontrolle sehe ich ebenfalls als wichtigen Bestandteil des Projekts. Gerade weil mir bewusst ist, wo meine eigenen Kenntnisse noch an Grenzen kommen, konnte ich durch den Austausch zusätzliche Erfahrungen sammeln und die Webseite technisch weiter verbessern.
Besonders die Ergänzung der Navigation, die Überarbeitung der Bildergalerie und die verschiedenen Animationen zeigten mir, wie viel Potenzial auch nach der eigentlichen Programmierung noch in einer Webseite steckt.
Auch die Neugestaltung des Bandlogos war für mich eine wertvolle Erfahrung. Obwohl der ursprüngliche Fokus auf der Programmierung lag, konnte ich nochmals gestalterisch arbeiten.
Besonders schön ist für mich, dass mit diesem Projekt der gesamte Prozess abgeschlossen wird: von der ersten Recherche und dem Moodboard über das Figma-Design, die Fotografie und die erneute Gestaltung des Bandlogos bis hin zur Programmierung und Veröffentlichung der fertigen Webseite. Damit ist aus einer ersten visuellen Idee eine reale Webseite entstanden, die Red Echo zukünftig für ihre Bandkommunikation nutzen kann.
Gleichzeitig war das Projekt für mich eine Möglichkeit, meine Fähigkeiten im Bereich Webdesign, Webentwicklung und visueller Gestaltung deutlich weiterzuentwickeln. Besonders die Kombination aus kreativer Gestaltung, direkter Zusammenarbeit mit der Band und technischer Umsetzung machte das Projekt für mich zu einer spannenden und lehrreichen Erfahrung.