Design - ricardotimmr/praxisprojekt-2025-varia GitHub Wiki

Design – Modulares Webtool zur Produktdarstellung

Version 1.0 – Erste Grundstruktur

  • Fokus: Struktur der Konfigurator-Page
  • Bestandteile:
    • Obere Live-Preview-Fläche (initial leer)
    • Button „+ Neues Modul erstellen“
    • Auswahlfeld für Modultyp (z. B. Feature-Slider, 360°-Viewer)
    • Konfigurationsbereich je nach Modultyp
    • Export- und Preset-Speicheroption

ChatGPT Image 14  Mai 2025, 14_27_41

Version 1.1 – Tabs für Modulkonfiguration

  • Verbesserung: strukturierter Konfigurationsbereich
  • Neue Elemente:
    • Tabs für Inhalte, Farben, Layout, Animation
    • Klarere Trennung der Konfigurationsoptionen
    • Visuelles Layout für spätere Live-Preview bei Änderungen
    • Zusätzliche UX-Elemente wie Tooltips oder Onboarding-Text (optional geplant)

varia-mainscreen

Landing Page – Design 1.0

  • Fokus: Erste visuelle Struktur und Einstieg ins Tool
  • Elemente:
    • Hero-Sektion mit Tool-Name und Claim
    • Kurze Erklärung der Kernfunktionen
    • Call-to-Action (z. B. „Jetzt starten“)
    • Vorschau-Grafik oder Illustration des Tools

Werkstatt Page – Modul-Entwürfe 1.0

  • Fokus: Erste Design-Umsetzungen der zentralen Module

360°-Viewer Modul


Hotspot-Grafik Modul


Feature-Slider Modul


Status

→ Beide Versionen der Konfigurator-Page wurden als Low-Fidelity Wireframes umgesetzt
→ Erste Entwürfe für Landing Page und Werkstatt-Module (360°, Hotspot-Grafik, Feature-Slider) erstellt