Startseite der Renetik Music Apps-Website mit der aktuellen Android-Produktfamilie.

Renetik Music Apps Website

Eine Produkt-, Dokumentations- und Support-Plattform, die ich mit VuePress, Vue, TypeScript und Vite entworfen und gebaut habe.

Kunde
Renetik — unabhängiges Produkt
Rolle
Produktdesigner, Webdesigner, Content-Designer und Frontend-Engineer
Zeitraum
März 2021 – Heute
VuePress 2Vue 3TypeScriptViteNode.js

Ich habe die Music Apps-Website als öffentliche Produktschicht für die gesamte Anwendungsfamilie entworfen und gebaut. Anstatt ein vorgegebenes Design umzusetzen, erschuf ich deren visuelle Sprache, Informationsarchitektur, Navigation, responsive Seitenstruktur, Produktpräsentation, den Dokumentationsansatz und die Inhalte selbst.

Die Website ist eine eigenständige VuePress 2-Anwendung, gebaut mit Vue 3, TypeScript, Vite, Node.js, dem Hope-Theme, benutzerdefinierten Vue-Layouts und -Komponenten sowie einer maßgeschneiderten SCSS-Schicht. Markdown und strukturiertes Frontmatter halten Produktseiten, Funktionsleitfäden, Tutorials, Screenshots, Bewertungen und Store-Aktionen wartbar, ohne dass jede Seite fest codiert werden muss.

Optimierte WebP-Medien, Vollbildgalerien, Videounterstützung, Suche, Breadcrumbs, Support- und Datenschutzseiten machen die Website sowohl zu einem Produktportfolio als auch zu einem praktischen Benutzerhandbuch. Der Build verwaltet zudem Analysen, kanonische URLs, Social-Metadaten, Sitemaps, Weiterleitungen und eine produktspezifische 404-Erfahrung.

Ich habe die generierte Website unterhalb von /app/ in den kombinierten renetik.com-Release integriert. Das Portfolio orchestriert und verifiziert das finale Artefakt, während die Repositories der Music Apps-Webseite und des Portfolios unabhängige Historien behalten, wodurch die Grenze klar gezogen ist, ohne den Website-Quellcode zu duplizieren.

Highlights

Produktidentität, UX, Responsive Webdesign, Informationsarchitektur und Inhalte von mir erstellt.
VuePress 2, Vue 3, TypeScript, Vite, Node.js, benutzerdefinierte Vue-Komponenten und SCSS.
Strukturiertes Markdown und Frontmatter treiben wiederverwendbare Produkt-, Feature-, Tutorial- und Support-Seiten an.
Optimierte WebP-Gallerien, Videos, Suche, Navigation, Dokumentation und Google Play-Konversionspfade.
Kanonische SEO, Social Previews, Analysen, Sitemaps, Weiterleitungen, Datenschutzseiten und benutzerdefiniertes 404-Verhalten.
Automatisierte Release-Prüfungen validieren 49 generierte HTML-Seiten und den kombinierten /app/-Bereitstellungsvertrag.