229 lines
9.1 KiB
Markdown
229 lines
9.1 KiB
Markdown
# 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
|
||
|
||
- **Aktuell:** https://webspace.media-on.de/hms-prototype/index.html?v=8
|
||
- **Dateien:** index.html, style.css, app.js, logo.svg, img/ref1-9.jpg
|
||
|
||
## 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 |
|