Leopoldadmin/hms-licht-ton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1221350ed6102a4407769303a4e99f732160be7e
hms-licht-ton/docs/ui_design.md
T

9.1 KiB
Raw Blame History

HMS Licht & Ton – UI Design Dokumentation

1. Projekt-Überblick

Projekt: Neue Homepage für HMS Licht & Ton GbR, Veranstaltungstechnik aus Leipheim/Ellzee Domain: hms.media-on.de (nicht öffentlich indexiert – noindex, nofollow) Technologie: Nuxt 3 (Vue 3 + Tailwind CSS, SSR/SSG) + FastAPI Backend + Coolify Deployment

2. Design-Philosophie

Das Design folgt einer dunklen, professionellen Ästhetik orientiert an den Agent Zero WebUI Grautönen. Orange (#EC6925) aus dem HMS-Logo wird dezent als Akzentfarbe eingesetzt – ausschließlich für Buttons, Badges, kleine Text-Highlights und den Logo-Rahmen. Keine großen Orange-Flächen.

Tonalität: Professionell, erfahren, zuverlässig, technisch kompetent – nicht werblich oder übertrieben.

3. Design Tokens

3.1 Farbpalette

Agent Zero Dark Theme (Hauptfarben)

Token Hex Verwendung
--bg #131313 Seiten-Hintergrund
--panel #1a1a1a Panels, Cards, Header
--surface #212121 Input-Felder, Surface-Level
--row #272727 List-Items, Zwischenebenen
--card #2d2d2d Card-Hintergrund
--border #444444a8 Borders (mit Alpha)
--secondary #656565 Sekundärfarbe, Icons
--primary #737a81 Primärfarbe (leicht bläuliches Grau)
--text #ffffff Haupttext
--text-muted #d4d4d4 Gedimmter Text

Orange Akzent (Dezent)

Token Wert Verwendung
--color-accent #EC6925 Buttons, Badges, Text-Akzente, Logo-Rahmen
--color-accent-hover #d4581a Button Hover
--color-accent-light rgba(236, 105, 37, 0.08) Badge-Hintergrund, Nav-Active
--color-accent-border rgba(236, 105, 37, 0.25) Card Hover Border
--color-accent-dark #b8461a Dunkle Variante

Status-Farben (Dark Theme adaptiert)

Token Hex Verwendung
--color-success #4ade80 Erfolg-Meldungen
--color-success-bg rgba(74, 222, 128, 0.08) Erfolg-Hintergrund
--color-error #f87171 Fehler-Meldungen, Pflichtfelder
--color-error-bg rgba(248, 113, 113, 0.08) Fehler-Hintergrund
--color-warning #fbbf24 Warnungen
--color-info #60a5fa Info-Meldungen

3.2 Border Radius (Minimal)

Token Wert
--radius-sm 2px
--radius-md 3px
--radius-lg 4px
--radius-xl 4px
--radius-full 9999px (Badges, Pills)

3.3 Typography

  • Font Family: Inter (Google Fonts)
  • Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold), 800 (Extrabold)
  • Größen: xs: 0.75rem bis 6xl: 3.75rem
  • Line Height: 1.6 (Body), 1.1-1.3 (Headings)

3.4 Spacing

Token Wert
--space-xs 0.25rem (4px)
--space-sm 0.5rem (8px)
--space-md 1rem (16px)
--space-lg 1.5rem (24px)
--space-xl 2rem (32px)
--space-2xl 3rem (48px)
--space-3xl 4rem (64px)
--space-4xl 6rem (96px)

3.5 Shadows (Dark Theme)

Token Wert
--shadow-sm 0 1px 2px 0 rgb(0 0 0 / 0.3)
--shadow-md 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)
--shadow-lg 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)
--shadow-xl 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3)

3.6 Transitions

Token Dauer
--transition-fast 150ms ease
--transition-base 250ms ease
--transition-slow 400ms ease

4. Layout-System

4.1 Header

  • Sticky, Höhe: 4rem (Desktop), 3.5rem (Mobile)
  • Logo links, Desktop-Nav mittig/rechts, Mobile Hamburger rechts
  • Background: var(--panel), Border-Bottom: var(--border)

4.2 Main Content

  • Max-Width: 1280px (max-w-7xl)
  • Padding: 1rem (Mobile), 1.5rem (sm), 2rem (lg)

4.3 Footer

  • 4-Spalten Grid (1-Spalte auf Mobile)
  • Background: var(--bg), Border-Top: var(--border)

4.4 Responsive Breakpoints

  • sm: 640px (Tablet Portrait)
  • md: 768px (Tablet Landscape, Desktop Nav visible)
  • lg: 1024px (Desktop, 3-4 Column Grids)
  • Mobile-First: Alle Layouts starten mit 1-Spalte, expandieren bei Breakpoints

5. Seiten-Struktur (Sitemap)

Home (#/)
  ├─ Referenzen (#/referenzen)
  ├─ Mietkatalog (#/mietkatalog)
  │    └─ Equipment Detail (#/mietkatalog/:id)
  ├─ Warenkorb (#/warenkorb)
  │    └─ Mietanfrage (#/mietanfrage)
  ├─ Kontakt (#/kontakt)
  ├─ Admin (#/admin)
  ├─ Impressum (#/impressum)
  ├─ Datenschutz (#/datenschutz)
  └─ AGB Vermietung (#/agb-vermietung)

Route-Beschreibungen:

  • #/warenkorb – Artikel anzeigen, Mengen steuern, entfernen, CTA → /mietanfrage
  • #/mietanfrage – Veranstaltungsdaten + Kontaktdaten + Nachricht, Submit an Rentman
  • #/impressum – Statische rechtliche Angaben (§5 TMG)
  • #/datenschutz – Statische Datenschutzerklärung (DSGVO)
  • #/agb-vermietung – Statische AGB Vermietung

6. Komponenten-Design

6.1 Cards

  • Background: var(--panel)
  • Border: 1px solid var(--border)
  • Border-Radius: 4px (--radius-lg)
  • Hover: Border wird heller, Shadow wird stärker

6.2 Buttons

  • Primary: Orange bg, white text, 3px radius
  • Secondary: Surface bg, muted text, border, 3px radius
  • Ghost: Transparent, muted text, hover surface bg

6.3 Inputs

  • Background: var(--surface)
  • Border: 1px solid var(--border-strong) (#555555)
  • Focus: Orange border + subtle orange box-shadow
  • Error: Red border + red box-shadow

6.4 Badges

  • Border-Radius: 9999px (pill shape)
  • Primary: Orange bg (8% alpha), orange text, orange border (20% alpha)

6.5 Speaker Grid

  • CSS Grid: repeat(auto-fill, minmax(160px, 1fr))
  • Mobile: 2 columns
  • Icons: 48x48px SVG, gray default, orange on hover

7. UX States

Alle Views implementieren Loading, Empty, Error und Success States:

  • Loading: Skeleton-Shimmer Animationen
  • Empty: Icon + Titel + Message + CTA Button
  • Error: Alert-Icon + Titel + Message + Retry Button
  • Success: Checkmark + Bestätigungstext + Weiter-Button

Zusätzliche States pro Seite:

  • MietanfragePage: form, submitting, success, error, validation-error
  • AdminPage: login, idle, syncing, sync-complete, sync-error
  • Legal Pages (Impressum/Datenschutz/AGB): loading, content

8. Accessibility (WCAG 2.1 AA)

  • Skip Link: Zum Hauptinhalt springen am Seitenanfang
  • Semantic HTML: header, main, footer, nav, section, article
  • ARIA: aria-label, aria-current, aria-expanded, aria-controls, aria-invalid, aria-describedby, role=alert, role=status
  • Focus Visible: 2px Orange Outline mit 2px Offset
  • Form Labels: Jedes Input hat label for=..., Pflichtfelder markiert mit *
  • Heading Hierarchy: h1 > h2 > h3, keine Levels übersprungen
  • Keyboard Navigation: Alle interaktiven Elemente per Tab erreichbar, Enter auf Cards
  • Color Contrast: Text #ffffff auf #131313 = 17.9:1 (AAA), Muted #d4d4d4 auf #131313 = 12.6:1 (AAA)

9. KI-/Meta-Features

  • robots: noindex, nofollow, noarchive, nosnippet (KEINE Indexierung gewünscht)
  • JSON-LD: LocalBusiness Schema mit Adresse, Öffnungszeiten, Services (Schema.org) – KI-tauglich
  • OpenGraph: type, title, description, locale, site_name, url
  • Twitter Card: summary_large_image
  • Semantic HTML5: Korrekte Struktur für KI-Crawler
  • KEINE sitemap.xml – nicht gewünscht (noindex)
  • KEINE Indexierung – Domain hms.media-on.de nicht öffentlich indexiert

10. Bilder

  • Hero: Unsplash Konzert-Bild (background-image, 35% opacity, dark gradient overlay)
  • Über uns: Unsplash Veranstaltungstechnik-Setup Bild
  • Referenzen: 9 echte HMS-Fotos (von hms-licht-ton.de, lokal auf Webspace gespeichert)
  • Equipment: Platzhalter-Icons, Felder für echte Bilder vorbereitet (item.image)
  • Speaker Grid: SVG-Icons (6 Lautsprecher-Typen)

11. Prototyp-URLs

12. Design-Entscheidungen

Entscheidung Begründung
Dark Theme (Agent Zero Grautöne) User-Präferenz, professionelle Wirkung
Orange nur als Akzent User-Feedback: Übergänge zu Orange sollten subtil sein
Minimale Border-Radius (2-4px) User-Feedback: abgerundete Ecken nur ganz minimal
Vue 3 SPA für Prototyp Gleiche Framework wie Produktion (Nuxt 3)
Echte HMS-Fotos für Referenzen Authentizität, keine Stock-Fotos
SVG-Icons für Speaker Grid Kompakt, skalierbar, theme-bar
Inter Font Modern, clean, gute Lesbarkeit
noindex meta Domain hms.media-on.de nicht öffentlich indexiert
Mietanfrage separat vom Warenkorb Warenkorb = Items verwalten, Mietanfrage = Formular mit Event-/Kontaktdaten
Legal Pages als eigene Routes Impressum, Datenschutz, AGB Vermietung als statische Seiten mit eigenem Routing
Admin Dashboard mit Sync-States Post-Login: Sync-Trigger, Status-Anzeige, Sync-Log Viewer
JSON-LD trotz noindex KI-Crawler sollen strukturierte Daten erkennen können, ohne Indexierung
Reference in New Issue View Git Blame Copy Permalink