Idee
Das Projekt «KleinkunstKabühne» wurde im Jahr 2018 von sechs Studierenden des Studiengangs Multimedia Production in die Welt gerufen. Nach einem erfolgreichen ersten Jahr startete die KleinkunstKabühne im Frühling 2019 bereits in die zweite Runde. Passend zum neuen Jahr wünschte sich das Projektteam (Alina Haag, Milena Steiner, Juliette Niedermaier, Luana Spinnler, Elif Soysal und Nico Stähli) eine neue und eigene Website für ihr Projekt. Ich entschied mich dazu, die Herausforderung, eine Website von Grund auf selber zu programmieren, anzunehmen und begann mit der Erstellung meines Konzepts.
Konzept
Mein Arbeitsprozess für die Erstellung der neuen Website begann mit der Ideenfindung. Auf verschiedenen Websites von Agenturen, Webdesignern sowie Webentwicklern machte ich mich auf die Suche nach Inspiration. Das Farbkonzept, das Logo und die Schrift wurden vom Projektteam bereits im Voraus im eigenen Corporate Design definiert. Dieses Stylesheet wurde mir zur Verfügung gestellt.
Mein Ziel war, eine Erscheinung zu kreieren, die die KleinkunstKabühne hervorhebt und zeigt, wie einzigartig sie ist. Natürlich gab es verschiedene Möglichkeiten, die Einzigartigkeit der kleinsten Bühne Berns darzustellen – meine Ideenliste blieb daher nicht gerade klein.
Ich habe bereits zu Beginn versucht, meine Ideen in Form von Skizzen auf Papier zu bringen und bildlich darzustellen. Das half mir, die Ideen schliesslich auch weiterzuentwickeln. Ich muss auch sagen, dass sich die Website während der gesamtem Projektarbeit immer weiterentwickelt hat. Es kamen auch mit der Zeit noch neue Ideen dazu, die ich laufend in mein Konzept mit eingebunden habe.
Dass ich das Farbkonzept prominent ins Design einbinden werde, war mir von Anfang an klar. Denn vor allem Farben dienen der Wiedererkennung einer Marke. Dazu kam, dass ich das Konzept des begrenzten Raums dieser Kabühne auf der Website widerspiegeln wollte. Durch die Kombination dieser beiden Aspekte entstand die Gestaltungsidee eines Rasters, dass sich durch die Website hindurch zieht. Ein Raster, welches abwechslungsweise in den Gelb- und Violett-Tönen eingefärbt wird und so immer wieder einen klar begrenzten Raum darstellt.
Mir war ausserdem wichtig, dass die Website etwas Verspieltes und Kreatives mit sich bringt, weil auch in der KleinkunstKabühne alles möglich ist. Erst später kam ich auf die Idee, das Logo auf der Startseite gross zu präsentieren und in Form eines Parallax beim Scrollen verschwinden zu lassen. Die Flipcards, die sich hinter den Teamfotos verbergen, stellen in meinen Augen eine Tür dar, die sich öffnet und wieder schliesst. Ähnlich wie die Tür der Kabühne.
Umsetzung
Mit vielen verschiedenen Ideen im Kopf und einigen Skizzen auf Papier begann ich schliesslich mit der Programmierung der Website. Als Entwicklungsumgebung bzw. Code Editor verwendete ich «Adobe Brackets», da wir dieses Tool bereits in Interaktive Medien I kennengelernt und verwendet haben. Ich legte mir zu Beginn eine geeignete Ordnerstruktur an und speicherte die notwendigen Bilder und CSS Dateien darin ab. Die meisten CSS Attribute habe ich selbstständig geschrieben und definiert. Einige Codes stammen jedoch auch aus Bootstrap oder W3.CSS. Zudem bereitete ich eine Excel Tabelle vor, in der ich die eingesetzten Classes, IDs und die weiteren Elemente beschrieb und deklarierte. Dies soll dem Verständnis dienen und Anpassungen zu einem späteren Zeitpunkt möglich machen.
Als die Vorbereitung abgeschlossen war, legte ich die einzelnen HTML- und CSS-Files an und stellte eine korrekte Verlinkung sicher. Die Navigation beinhaltet folgende vier Seiten: Programm (ist gleichzeitig die Startseite), Team, Galerie und Sponsoren. Pro Seite erstellte ich also ein HTML-File. Danach baute ich das Grundgerüst der Seiten auf bzw. teilte sie in Header, Body und Footer ein. Sobald das Grundgerüst stand, konnte es mit der Programmierung losgehen.
Die Programmierung war jedoch nicht das Einzige, das viel Zeit in Anspruch nahm. Einen Grossteil der Zeit verbrachte ich nämlich damit, mir Tutorials zu einzelnen Codes anzuschauen bzw. über deren Umsetzung im Internet zu lesen. Mit den Programmiersprachen jQuery und JavaScript hatte ich beispielsweise vor dem Projekt praktisch keine Erfahrung. Da musste ich mich von Grund auf reinlesen und informieren, was mir schliesslich auch sehr viel gebracht hat.
Nachdem der erste Entwurf aller vier Seiten stand und die Media Breakpoints korrekt eingesetzt waren, habe ich die Website den Auftraggebern zur Verfügung gestellt und um Feedback gebeten. Die Rückmeldungen waren insgesamt sehr gut und es waren nur noch kleine Anpassungen zu machen, bis die Website schliesslich fertig war.
Erkenntnisse / Learnings
In meinen Augen hat es sich sehr gelohnt, zu Beginn des Projekts genügend Zeit für die Ideenfindung und Skizzierung eingerechnet zu haben. Dadurch erhielt ich einen ersten Eindruck, wie die Website aussehen sollte und konnte mich orientieren. Wie bereits kurz erwähnt, konnte ich im Verlaufe dieses Digezz Projekts auch sehr viel Neues lernen. Die Anwendung von HTML und CSS wurde gefestigt und die Programmiersprachen jQuery und JavaScript lernte ich neu kennen. Das hat mir persönlich bereits sehr viel gebracht und wird mir im Modul Interaktive Medien weiterhelfen.
Ich musste aber auch immer wieder merken, wie viel Geduld das Programmieren verlangt und dass man teilweise mehrere Wochen damit verbringen muss, ein Problem zu finden und zu beheben. Das fiel mir anfangs etwas schwer, aber auch daraus konnte ich lernen.
Durch die vielen Tutorials, die ich mir im Internet angeschaut habe, habe ich auch sehr viel Neues ausprobiert. Vieles hat sich für diese Website schliesslich nicht als geeignet herausgestellt, aber trotzdem habe ich mich damit auseinandergesetzt und etwas dabei gelernt.
Mir ist zudem aufgefallen, dass eine gute und gründliche Dokumentation der Website und deren Inhalte die zukünftige Nutzung massiv vereinfacht. Daher war ich froh darüber, dass ich bereits von Anfang an alles dokumentierte.
Fazit
Ich bin mit dem Projekt und dem Endprodukt insgesamt sehr zufrieden. Die Fehler und Probleme, die während der Programmierung aufgetaucht sind, konnten bis zum Schluss alle erfolgreich behoben werden. Einzelne Abschnitte während des Projekts haben zwar viel Zeit in Anspruch genommen, ich konnte dadurch aber sehr viel lernen und mich weiterentwickeln.
