345 lines
15 KiB
Markdown
345 lines
15 KiB
Markdown
# 🎨 Luna Recipes — Design-Konzept
|
||
|
||
## 1. Farbschema
|
||
|
||
Warm, einladend, modern-feminin ohne kitschig zu wirken. Inspiriert von Backzutaten: Vanille, Karamell, Beeren.
|
||
|
||
| Rolle | Farbe | Hex | Verwendung |
|
||
|---|---|---|---|
|
||
| **Primary** | Dusty Rose | `#C4737E` | Buttons, aktive States, Akzente |
|
||
| **Primary Light** | Soft Blush | `#F2D7DB` | Hover, Badges, Tags |
|
||
| **Secondary** | Warm Caramel | `#D4A574` | Sekundäre Buttons, Icons |
|
||
| **Background** | Cream White | `#FBF8F5` | Seitenhintergrund |
|
||
| **Surface** | Pure White | `#FFFFFF` | Cards, Modals |
|
||
| **Text Primary** | Espresso | `#2D2016` | Überschriften, Body |
|
||
| **Text Secondary** | Warm Grey | `#7A6E65` | Subtexte, Metadaten |
|
||
| **Success** | Sage Green | `#7BAE7F` | Timer fertig, Erfolg |
|
||
| **Error** | Berry Red | `#C94C4C` | Fehler, Löschen |
|
||
| **Border** | Sand | `#E8E0D8` | Trennlinien, Card-Borders |
|
||
|
||
### Dark Mode (optional, Phase 2)
|
||
- Background: `#1A1614`
|
||
- Surface: `#2D2620`
|
||
- Text: `#F5EDE8`
|
||
|
||
## 2. Typografie
|
||
|
||
| Rolle | Font | Gewicht | Größe |
|
||
|---|---|---|---|
|
||
| **Logo/Brand** | *Playfair Display* | 700 | 28px |
|
||
| **H1** | *Playfair Display* | 600 | 24px |
|
||
| **H2** | *Playfair Display* | 600 | 20px |
|
||
| **H3** | *Inter* | 600 | 17px |
|
||
| **Body** | *Inter* | 400 | 15px |
|
||
| **Small/Meta** | *Inter* | 400 | 13px |
|
||
| **Kochmodus** | *Inter* | 500 | 22–28px |
|
||
| **Timer** | *JetBrains Mono* | 500 | 48px |
|
||
|
||
> Playfair Display für Eleganz in Überschriften, Inter als saubere UI-Schrift. Monospace nur für Timer-Anzeige.
|
||
|
||
## 3. Screen-Übersicht
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ App-Struktur │
|
||
├─────────────────────────────────────────────┤
|
||
│ │
|
||
│ 📱 Bottom Navigation: │
|
||
│ [Startseite] [Suche] [+Neu] [Liste] [Me] │
|
||
│ │
|
||
│ Screens: │
|
||
│ ├── Startseite (Feed) │
|
||
│ ├── Kategorie-Ansicht │
|
||
│ ├── Suche + Filter │
|
||
│ ├── Rezept-Detail │
|
||
│ │ ├── Kochmodus (Fullscreen) │
|
||
│ │ └── Notizen-Sheet │
|
||
│ ├── Rezept erstellen/bearbeiten │
|
||
│ ├── Einkaufsliste │
|
||
│ ├── Profil / Einstellungen │
|
||
│ └── Onboarding (Erststart) │
|
||
│ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 4. Component-Liste
|
||
|
||
### Layout
|
||
- `AppShell` — Wrapper mit Bottom-Nav
|
||
- `BottomNav` — 5 Icons, aktiver State mit Farbe + Label
|
||
- `TopBar` — Kontextuell: Titel, Back-Button, Actions
|
||
- `FullscreenOverlay` — Für Kochmodus
|
||
|
||
### Cards
|
||
- `RecipeCard` — Foto (3:4), Titel, Kategorie-Badge, Dauer, Favorit-Herz
|
||
- `RecipeCardSmall` — Horizontal, Thumbnail links, Infos rechts
|
||
- `CategoryCard` — Rundes Bild + Label darunter
|
||
|
||
### Rezept-Detail
|
||
- `HeroImage` — Parallax-Scroll Foto oben
|
||
- `RecipeMeta` — Dauer, Portionen, Schwierigkeit als Icons
|
||
- `IngredientList` — Checkbare Zutatenliste mit Mengenrechner
|
||
- `StepList` — Nummerierte Schritte mit optionalen Bildern
|
||
- `NoteSection` — Eigene Notizen mit Bearbeiten-Button
|
||
- `ActionBar` — Kochmodus starten, zur Liste hinzufügen, Teilen
|
||
|
||
### Kochmodus
|
||
- `CookingStep` — Großer Text, Schrittnummer, Swipe-Geste
|
||
- `CookingTimer` — Kreisförmiger Countdown, Vibration bei Ende
|
||
- `CookingProgress` — Fortschrittsbalken oben
|
||
- `CookingNav` — Vor/Zurück-Buttons unten
|
||
|
||
### Suche & Filter
|
||
- `SearchBar` — Prominent, mit Mikrofon-Icon (Phase 2)
|
||
- `FilterChips` — Horizontale Scroll-Chips (Kategorie, Zeit, Zutat)
|
||
- `FilterSheet` — Bottom-Sheet mit erweiterten Filtern
|
||
|
||
### Einkaufsliste
|
||
- `ShoppingItem` — Checkbox + Zutat + Menge + Rezeptherkunft
|
||
- `ShoppingSection` — Gruppiert nach Rezept oder Abteilung
|
||
- `AddItemInput` — Schnelles Hinzufügen eigener Einträge
|
||
|
||
### Formulare
|
||
- `RecipeForm` — Multi-Step Formular für Rezepterstellung
|
||
- `ImageUpload` — Drag/Drop + Kamera-Auslöser
|
||
- `IngredientInput` — Menge + Einheit + Zutat als Inline-Row
|
||
- `StepInput` — Textfeld + optionales Bild + Timer-Feld
|
||
|
||
### Allgemein
|
||
- `Button` — Primary, Secondary, Ghost, Danger Varianten
|
||
- `Badge` — Kategorie-Tags farblich kodiert
|
||
- `Toast` — Erfolgs-/Fehlermeldungen
|
||
- `EmptyState` — Illustration + Text wenn Liste leer
|
||
- `Skeleton` — Loading-Platzhalter für Cards
|
||
|
||
## 5. Wireframe-Beschreibungen
|
||
|
||
### 5.1 Startseite (Feed)
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ 🍰 Luna Recipes [👤] │ ← TopBar mit Logo + Profil-Avatar
|
||
├──────────────────────────┤
|
||
│ ○Backen ○Torten ○Mittag │ ← Horizontale Kategorie-Chips (scrollbar)
|
||
│ ○Frühstück ○Snacks ... │
|
||
├──────────────────────────┤
|
||
│ ┌────────┐ ┌────────┐ │
|
||
│ │ 📷 │ │ 📷 │ │ ← Pinterest-artiges Masonry Grid
|
||
│ │ │ │ groß │ │ Unterschiedliche Höhen
|
||
│ │ Titel │ │ │ │ Tap → Rezept-Detail
|
||
│ │ 30min ❤│ │ Titel │ │
|
||
│ └────────┘ │ 45min ❤│ │
|
||
│ ┌────────┐ └────────┘ │
|
||
│ │ 📷 │ ┌────────┐ │
|
||
│ │ Titel │ │ 📷 │ │
|
||
│ │ 20min ❤│ │ Titel │ │
|
||
│ └────────┘ └────────┘ │
|
||
├──────────────────────────┤
|
||
│ [🏠] [🔍] [➕] [🛒] [👤] │ ← Bottom Navigation
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
- Standard: Alle Rezepte, neuste zuerst
|
||
- Kategorie-Chips filtern den Feed inline
|
||
- Pull-to-Refresh
|
||
- Endlos-Scroll mit Lazy Loading
|
||
- Favorit-Herz direkt auf der Card antippbar
|
||
|
||
### 5.2 Suche + Filter
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ [← ] 🔍 Suche... [✕] │ ← Autofokus auf Suchfeld
|
||
├──────────────────────────┤
|
||
│ Letzte Suchen: │
|
||
│ Schokoladentorte Pasta │ ← Antippbare Tags
|
||
├──────────────────────────┤
|
||
│ [Kategorie ▼] [Zeit ▼] │ ← Filter-Chips
|
||
│ [Schwierigkeit ▼] │
|
||
├──────────────────────────┤
|
||
│ 3 Ergebnisse │
|
||
│ ┌────────────────────┐ │
|
||
│ │ 🖼 │ Schwarzwälder │ │ ← RecipeCardSmall Layout
|
||
│ │ │ Kirschtorte │ │ Horizontal für Suchergebnisse
|
||
│ │ │ ⏱90min ⭐Mittel │ │
|
||
│ └────────────────────┘ │
|
||
│ ┌────────────────────┐ │
|
||
│ │ 🖼 │ Schoko-Mousse │ │
|
||
│ └────────────────────┘ │
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
- Suche durchsucht: Titel, Zutaten, Tags, Notizen
|
||
- Debounced (300ms) Live-Ergebnisse
|
||
- Filter kombinierbar (AND-Verknüpfung)
|
||
- Zeitfilter: <15min, 15–30, 30–60, >60min
|
||
|
||
### 5.3 Rezept-Detail
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ [←] [❤] [⋯]│ ← Floating über Hero-Bild
|
||
│ │
|
||
│ ┌──────────────┐ │
|
||
│ │ │ │ ← Hero-Image, 16:10
|
||
│ │ 📷 Foto │ │ Parallax beim Scrollen
|
||
│ │ │ │
|
||
│ └──────────────┘ │
|
||
├──────────────────────────┤
|
||
│ Schwarzwälder Kirschtorte│ ← H1 Playfair Display
|
||
│ 🏷 Torten ⏱ 90min │
|
||
│ 👤 8 Portionen ⭐ Mittel │
|
||
├──────────────────────────┤
|
||
│ [🍳 Kochen] [🛒 Liste] │ ← Primary + Secondary Button
|
||
├──────────────────────────┤
|
||
│ ── Zutaten ──────────────│
|
||
│ Portionen: [−] 8 [+] │ ← Mengenrechner
|
||
│ ☐ 200g Mehl │
|
||
│ ☐ 150g Zucker │ ← Antippbar → Einkaufsliste
|
||
│ ☐ 5 Eier │
|
||
│ ☐ 500ml Sahne │
|
||
│ ... │
|
||
├──────────────────────────┤
|
||
│ ── Zubereitung ──────────│
|
||
│ 1. Eier trennen und... │
|
||
│ 2. Mehl mit Kakao... │ ← Kompakte Schritt-Liste
|
||
│ 3. Backofen auf 180°... │
|
||
│ ... │
|
||
├──────────────────────────┤
|
||
│ ── Meine Notizen ────────│
|
||
│ 📝 "Nächstes Mal weniger │ ← Editierbar
|
||
│ Zucker, dafür mehr │
|
||
│ Kirschen!" │
|
||
│ [✏️ Bearbeiten] │
|
||
├──────────────────────────┤
|
||
│ [🏠] [🔍] [➕] [🛒] [👤] │
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
- Drei-Punkte-Menü (⋯): Bearbeiten, Teilen, Löschen
|
||
- Zutaten-Checkbox → einzeln zur Einkaufsliste
|
||
- Portionen-Rechner skaliert alle Mengen live
|
||
- Notizen: Inline-Edit, Markdown-Unterstützung
|
||
|
||
### 5.4 Kochmodus (Fullscreen)
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ Schritt 3 von 12 [✕] │ ← Progress-Info + Schließen
|
||
│ ████████░░░░░░░░░░░░░░░░ │ ← Fortschrittsbalken
|
||
├──────────────────────────┤
|
||
│ │
|
||
│ │
|
||
│ Backofen auf 180°C │ ← GROSSE SCHRIFT (22–28px)
|
||
│ Ober-/Unterhitze │ Zentriert
|
||
│ vorheizen. │ Max 3-4 Zeilen
|
||
│ │
|
||
│ │
|
||
│ ┌──────────┐ │
|
||
│ │ 05:00 │ │ ← Timer (falls Schritt Timer hat)
|
||
│ │ ▶ Start │ │ Kreisförmig
|
||
│ └──────────┘ │
|
||
│ │
|
||
├──────────────────────────┤
|
||
│ [← Zurück] [Weiter →] │ ← Navigation + Swipe-Geste
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
- Bildschirm bleibt an (Wake Lock API)
|
||
- Swipe links/rechts für Navigation
|
||
- Timer: Antippen startet, Vibration + Sound bei 0:00
|
||
- Mehrere Timer gleichzeitig möglich (Badge-Anzeige)
|
||
- Schließen fragt "Wirklich beenden?"
|
||
|
||
### 5.5 Einkaufsliste
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ Einkaufsliste [🗑 ✓] │ ← Erledigte löschen
|
||
├──────────────────────────┤
|
||
│ [+ Eigenen Artikel ...] │ ← Quick-Add Input
|
||
├──────────────────────────┤
|
||
│ 🍰 Schwarzwälder Kirsch. │ ← Gruppiert nach Rezept
|
||
│ ☐ 200g Mehl │
|
||
│ ☑ 150g Zucker │ ← Durchgestrichen
|
||
│ ☐ 5 Eier │
|
||
│ ☐ 500ml Sahne │
|
||
├──────────────────────────┤
|
||
│ 🥗 Caesar Salad │
|
||
│ ☐ 1 Römersalat │
|
||
│ ☐ Parmesan │
|
||
├──────────────────────────┤
|
||
│ 📝 Eigene │
|
||
│ ☐ Küchenrolle │
|
||
├──────────────────────────┤
|
||
│ [🏠] [🔍] [➕] [🛒] [👤] │
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
- Gleiche Zutaten aus verschiedenen Rezepten werden zusammengefasst (Phase 2)
|
||
- Wisch nach links → Artikel entfernen
|
||
- Sortierbar: nach Rezept oder nach Abteilung
|
||
- Offline verfügbar (PWA!)
|
||
|
||
### 5.6 Rezept erstellen/bearbeiten
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ [✕] Neues Rezept [Save] │
|
||
├──────────────────────────┤
|
||
│ Schritt 1 von 4 │
|
||
│ ●───○───○───○ │ ← Stepper
|
||
├──────────────────────────┤
|
||
│ │
|
||
│ [📷 Foto hinzufügen] │ ← Kamera oder Galerie
|
||
│ │
|
||
│ Titel * │
|
||
│ [________________________]│
|
||
│ │
|
||
│ Kategorie * │
|
||
│ [Backen ▼] │
|
||
│ │
|
||
│ Tags │
|
||
│ [Schoko] [Torte] [+ ...]│
|
||
│ │
|
||
│ Portionen Dauer │
|
||
│ [_8_] [_90_] min │
|
||
│ │
|
||
│ Schwierigkeit │
|
||
│ ○ Einfach ● Mittel ○ Pro│
|
||
│ │
|
||
│ [Weiter →] │
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
- 4 Schritte: Basis → Zutaten → Zubereitung → Vorschau
|
||
- Auto-Save als Entwurf
|
||
- Zutaten: dynamische Rows (Menge + Einheit + Name)
|
||
- Zubereitung: Schritte mit optionalem Timer pro Schritt
|
||
|
||
### 5.7 Profil / Einstellungen
|
||
|
||
- Anzahl Rezepte, Favoriten
|
||
- Kategorien verwalten (eigene hinzufügen)
|
||
- Einheiten-Präferenz (metrisch/imperial)
|
||
- Dark Mode Toggle
|
||
- Daten exportieren/importieren
|
||
- App-Version & Info
|
||
|
||
## 6. Design-Prinzipien
|
||
|
||
1. **Fotos im Fokus** — Große, appetitliche Bilder treiben die Navigation
|
||
2. **One-Thumb-Use** — Alle wichtigen Aktionen im Daumenbereich
|
||
3. **Kochmodus = Stressfrei** — Große Schrift, einfache Navigation, keine Ablenkung
|
||
4. **Schnelles Wiederfinden** — Suche, Kategorien, Favoriten auf max 2 Taps
|
||
5. **Offline First** — Einkaufsliste und gespeicherte Rezepte immer verfügbar
|
||
|
||
## 7. Animationen & Micro-Interactions
|
||
|
||
- Card-Tap: Sanftes Scale-Up (0.98 → 1.0)
|
||
- Favorit-Herz: Kurze Bounce-Animation + Farbwechsel
|
||
- Kochmodus-Swipe: Slide-Transition zwischen Schritten
|
||
- Timer-Ende: Pulsieren + Vibration
|
||
- Pull-to-Refresh: Custom Cupcake-Animation (Phase 2)
|
||
- Page-Transitions: Shared Element Transition für Hero-Image (Card → Detail)
|