Die fortschreitende Digitalisierung der Produktkommunikation führt zu einem stetig wachsenden Bedarf an interaktiven, modularen Lösungen für die Online-Präsentation von Produkten. Nutzer:innen erwarten heute ansprechende, interaktive Erlebnisse, wie z.B. durch 3D-Viewer, Hotspot-Grafiken oder konfigurierbare Slider. In der Praxis wird die Umsetzung solcher Funktionen jedoch häufig durch getrennte Arbeitsabläufe zwischen Design und Entwicklung erschwert. Während Designer:innen visuelle Konzepte in Tools wie Figma oder Sketch erstellen, erfolgt die technische Implementierung in getrennten Umgebungen. Diese Trennung führt zu Inkonsistenzen, doppeltem Aufwand und einem Verlust gestalterischer Intentionen.
Das Praxisprojekt Varia adressiert diese Problematik durch die Entwicklung eines webbasierten Authoring-Tools, das die Erstellung interaktiver, Corporate-Identity konformer Produktmodule ermöglicht. Der entwickelte Prototyp vereint visuelle Konfiguration, Live-Preview, CI-Anpassung und einen Export in HTML-, React- und Web-Component-Formate. Designer:innen können Module intuitiv gestalten, während Entwickler:innen den generierten Code direkt weiterverwenden können. So entsteht eine gemeinsame Arbeitsumgebung, die gestalterische Freiheit und technische Wiederverwendbarkeit miteinander verbindet.
Das Projekt zeigt, wie sich UX-Prinzipien, Designsysteme und modulare Webarchitekturen in einem nutzerzentrierten Tool vereinen lassen. Durch den Einsatz von Technologien wie React, TailwindCSS und Web Components wird eine Grundlage für wiederverwendbare, CI-konforme Module geschaffen, die sich flexibel in bestehende Systeme integrieren lassen. Damit leistet das Projekt einen Beitrag zur Optimierung teamübergreifender Workflows in der Webentwicklung und bildet zugleich die Basis für eine zukünftige Erweiterung um Backend-Funktionalitäten im Rahmen der Bachelorarbeit.