Janine Ja – Markenauftritt und Erstellung der Website

Für einen Freund, der als Dragqueen performt, realisierte ich einen vollständigen digitalen Markenauftritt inklusive Website. Ziel des Projekts war es, eine Portfolio-Website zu schaffen, welche die Sichtbarkeit der Künstlerin erhöht, ihre Persönlichkeit und Auftritte präsentiert und Besuchern einen klaren Überblick über kommende Events bietet.

Die Website dient dabei als zentrale Anlaufstelle für Veranstalter, Fans und Kooperationspartner und vereint Selbstdarstellung, Event-Kommunikation und Kontaktmöglichkeiten auf einer Plattform.

Die Website ist erreichbar unter janineja.ch.

Markenauftritt & Design

Der gesamte Markenauftritt wurde von mir konzipiert und gestaltet. Ziel war ein starker, wiedererkennbarer Look, der sowohl die Bühnenfigur als auch den professionellen Anspruch widerspiegelt. Umgesetzt wurden:

            •          Logo-Design

            •          Farb- und Bildkonzept

            •          Hintergrundgrafiken und visuelle Elemente

Für die Gestaltung arbeitete ich primär mit Adobe Photoshop und Pixelmator. Künstliche Intelligenz kam lediglich unterstützend und sehr gezielt zum Einsatz, nicht als zentrales Gestaltungsmittel. Der Fokus lag klar auf einem individuellen, handgemachten Design mit hohem Wiedererkennungswert. Der Fokus lag klar auf einem individuellen, handgemachten Design mit hohem Wiedererkennungswert. Besonders wichtig war es dem Künstler, seine philippinischen Wurzeln sichtbar in den Markenauftritt zu integrieren. Dieses kulturelle Element wurde gestalterisch mit dem Ninja-Thema verknüpft, das sich aus dem Künstlernamen „Ja Ninja“ ableitet.

Technische Umsetzung & Setup

Für die Umsetzung der Website entschied ich mich für WordPress, da es sich für eine Event- und Portfolio-Seite gut eignet. Als Basis wurde ein eigenständig aufgebautes Child Theme verwendet, das auf dem Kadence Theme basiert und stark erweiterte. Die Anpassungen erfolgten mit:

            •          HTML

            •          CSS

            •          JavaScript

            •          PHP

Zusätzlich richtete ich die E-Mail-Kommunikation mit eigener Domain ein.

Individuelle Modifikationen & Features

Ich habe das Template und wie auch mehrere Plug-Ins komplett modifiziert wodurch mehrere massgeschneiderte Funktionen umgesetzt werden. Einige erwähnenswerte sind:

1.         The Events Calendar Plugin:

– Event Pop-Up: Mit viel Arbeit im Backend des Event-Calendar-Plugins habe ich es geschafft, dass sich die Details der einzelnen Events in einem Pop-up-Fenster öffnen, anstatt auf eine neue Seite zu führen, wie es das Plugin nativ handhabt. Der Hintergrundgedanke ist, dass man die Homepage nie verlassen muss. Zusätzlich wurde das Layout stark modifiziert, um dem Pop-up gerecht zu werden.

– Visuelle Trennung der Monate: Der Eventkalender zeigt nativ sehr unübersichtlich, wann welche Events stattfinden, da keine visuelle Trennung nach Monaten vorhanden ist. Um das zu verbessern, waren umfangreiche Anpassungen im Backend notwendig.

– Starke visuelle Änderungen der Kacheln & Übersicht:
Original zeigt das Plugin ohne starke visuelle Trennung an (kein Hintergrund etc.) die verschiedenen Event-Kacheln an. Hier war vor allem eine kosmetische Behandlung im Front-End mit CSS nötig.

2.          Navigation

– Fixierte Navigation mit Scroll Spy Fuction: Statt die Navigation nur im Header anzuzeigen, sollte sie mitscrollen und den aktuell betrachteten Seitenbereich hervorheben. Ziel war eine bessere und übersichtlichere User Experience. Das Problem dabei: WordPress erlaubt im Standard-Menü nur Verlinkungen zu anderen Seiten. Um eine One-Page-Navigation mit Scrollspy-Funktion umzusetzen, waren daher umfangreiche Anpassungen im Front- und Backend nötig.

– Auto-Hide-Funktion Um trotz der mitscrollenden Navigation eine aufgeräumte Benutzerführung zu gewährleisten, sollte sich die Navigation nach einer Sekunde ausblenden, sobald der User aufhört zu scrollen. Sie erscheint wieder, wenn weiter gescrollt wird oder sich der Mauszeiger im Navigationsbereich befindet. Dafür wurde eine eigene PHP-Datei entwickelt und im Backend integriert.

– Auch das Mobile Nav sowie auch Layout, Design der Naviation wurden stark angepasst.

  
– Anpassen des allgemeinen Layouts um es mehr Responsive zu machen

2.          Layout

– Scroll- und weitere Animationen implementieren sowie auch Paralaxeffekt kreieren & optimieren

– Bilder mit Flexboxen zentrieren

– Stark angepasstes Design bei Contactform, Header, Footer

etc.

Fazit

Mit der Website entstand eine professionelle Portfolio- und Eventplattform, die gezielt auf Sichtbarkeit, Auffindbarkeit und Nutzerführung ausgelegt ist. Trotz der technischen Hürden von WordPress konnte eine individuelle, stark angepasste Lösung realisiert werden, die den künstlerischen Auftritt unterstützt und gleichzeitig funktional überzeugt.

(abb)