From 15bba0acbeaaa7f5567dd6e7fe4b57b81245ac76 Mon Sep 17 00:00:00 2001 From: AzuTear Date: Sun, 14 Jun 2026 13:00:32 +0200 Subject: [PATCH] Initial commit: ayathedesigner Design-Analyse --- 01-ueberblick.md | 63 +++++++++++++++ 02-farbpalette.md | 93 ++++++++++++++++++++++ 03-typografie-und-layout.md | 149 ++++++++++++++++++++++++++++++++++++ 04-designprinzipien.md | 129 +++++++++++++++++++++++++++++++ 05-claude-design-regeln.md | 134 ++++++++++++++++++++++++++++++++ 5 files changed, 568 insertions(+) create mode 100644 01-ueberblick.md create mode 100644 02-farbpalette.md create mode 100644 03-typografie-und-layout.md create mode 100644 04-designprinzipien.md create mode 100644 05-claude-design-regeln.md diff --git a/01-ueberblick.md b/01-ueberblick.md new file mode 100644 index 0000000..3807e74 --- /dev/null +++ b/01-ueberblick.md @@ -0,0 +1,63 @@ +# ayathedesigner – Überblick & Designidentität + +**Quelle:** TikTok @ayathedesigner | Instagram @ayathedesignerr +**Disziplin:** UI/UX Design, Web Design (Freelance) +**Branding-Logo:** „aa." – minimalistisch, Kleinbuchstaben, roter Punkt + +--- + +## Wer ist Aya? + +Aya ist eine Freelance UI/UX Designerin, die sich auf Website- und App-Design spezialisiert hat. Sie ist auf TikTok mit ~8.700 Followern und 72.000 Likes aktiv und zeigt zwei Inhaltstypen: + +1. **Ihre eigene Arbeit** – echte Freelance-Projekte für Kunden (Websites, Web-Apps) +2. **Design-Inspiration** – kuratierte App- und Website-Designs als Slideshow-Posts + +Ihr persönliches Branding ist durchgängig minimalistisch: Das „aa." Logo (weiß auf schwarz, Punkt in Rot/Orange als einziger Akzent) spiegelt ihre Designphilosophie direkt wider. + +--- + +## Designspektrum + +Aya deckt zwei klar unterschiedliche Ästhetiken ab: + +### 1. Dark / Premium Aesthetic (App & Fintech) +Dominiert ihre Inspirations-Posts und Präsentationen. Typisch für moderne SaaS- und Fintech-Apps: +- Schwarze, tiefpurpurne oder dunkelgraue Hintergründe +- Neon-Akzente (Grün, Blau, Violett) +- Leuchtende Farbverläufe (Orange-Blau, Blau-Violett) +- Hoher Kontrast, maximale visuelle Wirkung + +### 2. Clean / Minimal Aesthetic (Web & Portfolio) +Dominiert ihre eigenen Freelance-Websites: +- Weiße oder cremefarbene Hintergründe +- Viel Weißraum +- Warme erdige Töne (Gold, Beige, Olivgrün) +- Editoriales Schwarz-Weiß für anspruchsvolle Marken + +--- + +## Analysierte Projekte + +| Projekt | Typ | Ästhetik | +|---|---|---| +| Digitwist | Website Hero | Dunkel, blau-schwarz, vertikal gestreift | +| Convix Software | Website Hero | Hell, Himmelblau, Schmetterlinge | +| BrandLyft | Website Hero | Creme, handgezeichnete Annotierungen | +| Swapify | Website + App | Lila-blau Gradient | +| Cloud Lab | Blog-Website | Weiß, minimal, Grid | +| Kate.m Portfolio | Designer-Portfolio | Hell, Collage-Karten | +| Rapeto | Growth Marketing | Gold/Beige, schwebende Karten | +| Ockham | Agentur-Website | Schwarz, Editorial | +| Proton Pass | App (Inspiration) | Dunkel, monochrom | +| Task-App | App (Inspiration) | Dunkel-Blau, blauer Akzent | +| Wallet App (purple) | App (Inspiration) | Lila-Schwarz | +| Beyond Finance | App (Inspiration) | Dunkel-Violett, Neon-Gradient | +| Finance App (green) | App (Inspiration) | Schwarz + Neongrün (#CCFF00) | +| Finance App (spanish) | App (Inspiration) | Schwarz + Goldgelb | + +--- + +## Kernaussage ihrer Designphilosophie + +Aya versteht Design als **Kombination aus Stimmung und Funktion**. Sie wählt die Ästhetik immer passend zur Markenidentität des Kunden – Premium/Tech bekommt Dark Mode, warmes Wachstum bekommt Gold-Beige, editorielle Marken bekommen Schwarz-Weiß. Dabei setzt sie **immer auf starke visuelle Hierarchie**, klare CTAs und emotionale Wirkung durch Farbwahl und Typografie. diff --git a/02-farbpalette.md b/02-farbpalette.md new file mode 100644 index 0000000..f47357f --- /dev/null +++ b/02-farbpalette.md @@ -0,0 +1,93 @@ +# ayathedesigner – Farbpalette & Farbanwendung + +--- + +## Primäre Farbwelten + +Aya arbeitet mit vier distinkten Farbwelten, die sie je nach Kundenprofil einsetzt: + +--- + +### Welt 1: Dark Premium (Fintech / SaaS / App) + +Die häufigste Ästhetik in ihren Posts. Basis ist immer ein sehr dunkler Hintergrund. + +| Rolle | Farbe | Beschreibung | +|---|---|---| +| Hintergrund | `#0A0A0F` – `#12102A` | Fast-Schwarz bis Tief-Dunkelblau | +| Primär-Akzent | `#6B4EFF` – `#8B5CF6` | Violett / Electric Purple | +| Sekundär-Akzent | `#3B82F6` | Blau | +| Gradient-Akzent | Orange → Pink → Blau | Holographic / Neon-Gradient | +| Text hell | `#FFFFFF` | Reines Weiß für Headlines | +| Text gedimmt | `#9CA3AF` | Grau für Body-Text | +| CTA | `#7C3AED` oder weiß auf dunkel | Button-Farbe | + +**Beispiele beobachtet:** +- Beyond Finance App: Dunkel-Violett (#1A0533) + Neon-Gradient (orange-pink-blau, holographisch) +- Proton Pass App: Reines Schwarz (#000000) + Weiß, keine Akzentfarbe außer Grau +- Task-Management-App: Dunkel-Blau (#0D1B3E) + helles Blau als Akzent + +--- + +### Welt 2: Neon Contrast (Bold Finance) + +Extrem hoher Kontrast durch eine einzige, fast schreiende Akzentfarbe auf fast-schwarzem Grund. + +| Rolle | Farbe | Beschreibung | +|---|---|---| +| Hintergrund | `#0F0F0F` – `#111111` | Tief-Schwarz | +| Neon-Akzent | `#CCFF00` – `#D4FF00` | Neongrün / Acid Green | +| Text | `#FFFFFF` | Weiß | +| CTA-Button | `#CCFF00` mit schwarzem Text | Hoher Kontrast | + +**Beispiel beobachtet:** +- Finance App "Find way to manage your finance": Schwarz + Acid Green für Balken, Karte, Button, Statistik-Highlights + +--- + +### Welt 3: Warm / Organic (Marketing / Portfolio / Editorial) + +Für Kunden, die Wärme und Vertrauen kommunizieren wollen. + +| Rolle | Farbe | Beschreibung | +|---|---|---| +| Hintergrund | `#FAFAF8` – `#FFF8F0` | Off-White / Creme | +| Warm-Akzent 1 | `#D4A853` – `#F0C060` | Gold / Amber | +| Warm-Akzent 2 | `#E87040` – `#F05020` | Orange-Rot (CTAs) | +| Pflanzen/Natur | `#4A7C59` | Grün für organische Elemente | +| Text dunkel | `#111111` – `#1A1A1A` | Fast-Schwarz für Headlines | +| Text medium | `#6B7280` | Grau für Body | + +**Beispiele beobachtet:** +- Rapeto (Growth Marketing): Gold-Beige Hintergrund, schwebende Karten +- Convix Software: Himmelsblau + Schmetterlinge + weiße UI-Elemente +- BrandLyft: Creme (#FFF5F0) + Orange-Rot CTA + handgezeichnete Annotierungen + +--- + +### Welt 4: Editorial Monochrom (Agentur / High-End) + +Reduziert auf Schwarz & Weiß, maximale Typografie-Dominanz. + +| Rolle | Farbe | +|---|---| +| Hintergrund | `#FFFFFF` oder `#0A0A0A` | +| Text / Elemente | `#000000` oder `#FFFFFF` | +| Akzent | Maximal 1 Farbe, sehr sparsam | + +**Beispiel beobachtet:** +- Ockham Agentur-Website: Schwarz-Weiß, editorial, PROJECTS grid + +--- + +## Farbprinzipien + +1. **Monochrome + 1 Akzent**: Fast alle Designs laufen auf einem neutralen Grund (schwarz, weiß, creme) mit exakt EINEM Akzentton. Nie mehr als zwei aktive Farben. + +2. **Akzent = Funktion**: Die Akzentfarbe sitzt immer auf dem CTA-Button, dem wichtigsten Datenwert oder dem Headline-Highlight. Farbe als Wegweiser. + +3. **Gradient = Premium**: Sobald ein Farbverlauf erscheint, ist er holographisch (mehrere Spektralfarben) – das positioniert die Marke sofort im Premium-Segment. + +4. **Hintergrundfarbe = Markencharakter**: Weiß = vertrauenswürdig/sauber, Schwarz = premium/tech, Gold = Wachstum/warm, Dunkel-Violett = mysteriös/fintech. + +5. **Keine Pastellfarben**: Aya meidet pastellige, verwässerte Töne. Ihre Farben sind entweder sehr gesättigt/neon oder komplett entsättigt (grau, weiß, schwarz). diff --git a/03-typografie-und-layout.md b/03-typografie-und-layout.md new file mode 100644 index 0000000..515c90f --- /dev/null +++ b/03-typografie-und-layout.md @@ -0,0 +1,149 @@ +# ayathedesigner – Typografie & Layout-Muster + +--- + +## Typografie + +### Headline-Stil + +Aya verwendet fast ausschließlich **große, mutige Display-Typografie** für Headlines. Die Schrift macht oft 40–70% der Hero-Section aus. + +**Beobachtete Charakteristika:** +- Gewicht: Bold bis ExtraBold (700–900) +- Größe: Extrem groß, oft über den Bildschirm hinausgehend (z.B. "Swapify" als Background-Text) +- Mischung: Mitunter kombiniert sie Regular Italic mit Bold in einem Satz für Kontrast + → Beispiel: *"Shaping **Agencies** of tomorrow"* (Italic + Bold gemischt) +- Schriften wirken wie: Inter, Plus Jakarta Sans, Space Grotesk, Neue Montreal oder ähnliche moderne Grotesken + +**Headline-Formate die sie bevorzugt:** +``` +Kurze, schlagkräftige Aussagen: +"Build Faster" +"Make Your Finances Move" +"Engage Audiences with Stunning Videos" +"Your Passwords, Safely Secured" +``` + +Immer aktiv formuliert, immer eine Verheißung. Nie beschreibend. + +--- + +### Body Text + +- Klein und unauffällig – dient als Kontrast zur großen Headline +- Maximal 2–3 Zeilen +- Hellgrau auf dunklem Grund, Dunkelgrau auf hellem Grund +- Line-Height großzügig, gute Lesbarkeit + +--- + +### Typografische Sonderelemente + +**Handgeschriebene Annotierungen (nur bei Warm/Marketing-Designs):** +- "Elevate your brand" mit geschwungenem Pfeil +- "It's free" mit Pfeil zum CTA +- Wirken wie Post-its oder Notizen eines Designers +- Humanisieren das Design, brechen die Perfektion auf + +**Background-Typografie:** +- Sehr großer, leicht transparenter Text als Textur-Element im Hintergrund +- Beispiel: "Swapify" nimmt die gesamte untere Bildhälfte ein +- Erzeugt Tiefe ohne zusätzliche grafische Elemente + +**Badge/Pill-Labels:** +- "Convix Software" als kleines Label über der Headline +- "Join over 100,000 happy creators" als Pill +- Kleine, abgerundete Kapseln mit 1px Border oder gedimmtem Hintergrund + +--- + +## Layout-Muster + +### Muster 1: Hero + Floating Cards + +Das häufigste Layout in ihren Freelance-Websites. + +``` +[NAV BAR mit Logo links, Links zentriert, CTA Button rechts] + +[Großer, visuell starker Hero-Bereich] + - Headline (sehr groß, zentriert oder linksbündig) + - Subtext (2–3 Zeilen) + - CTA Button (primär) + Secondary Link + +[Schwebende UI-Karten / Mockups als visuelle Elemente] + → Ragen in die Hero-Section hinein + → Zeigen das Produkt "in action" + +[Social Proof Bar: Logo-Kette der Kunden] + +[Features / Vorteile Section] +``` + +**Beispiele:** Rapeto, Convix, BrandLyft, Digitwist + +--- + +### Muster 2: Multi-Screen App-Präsentation + +Für App-Designs: immer 2–3 Screens nebeneinander, leicht angewinkelt oder gestaffelt. + +``` +[Screen 1: Splash/Onboarding] [Screen 2: Haupt-Dashboard] [Screen 3: Detail-View] +``` + +Die Screens sind: +- Im realistischen iPhone-Mockup (Dynamic Island sichtbar) +- Leicht in der Perspektive gedreht oder gestaffelt +- Auf gradient oder einfarbigem Hintergrund "schwebend" + +**Reihenfolge der Screens** zeigt immer die User Journey: +Einstieg → Hauptfunktion → Tiefere Funktion + +--- + +### Muster 3: Editorial Grid (Portfolio/Agentur) + +``` +[Übergroßer Seiten-Titel: "PROJECTS"] +[Grid aus Bild + Projekttitel + Jahr] +[Horizontale Trennlinien] +["LET'S TALK" als Footer-CTA] +``` + +Sehr magazine-artig, inspiriert von Print-Design. Keine Dekorationen, nur Inhalt. + +--- + +### Muster 4: Dashboard-Layout (App intern) + +Für Finanz- und Produktivitäts-Apps immer: + +``` +[Begrüßung + User-Name] [Benachrichtigungs-Icon] +[Statistik-Highlight / Kontostand] +[Quick-Action-Reihe: Icons + Labels] +[Listenabschnitt: "Transaktionen" / "Tasks"] + [Karte: Item + Beschreibung + Preis] + [Karte: Item + Beschreibung + Preis] +[Bottom Navigation Bar: 5 Icons] +``` + +--- + +## Spacing & Abstände + +- **Großzügige Padding**: Viel Luft um alle Elemente. Kein gequetschtes Layout. +- **Weißraum als Designelement**: Besonders in Portfolio-Sites, wo leerer Raum Eleganz signalisiert +- **Card-Abstände**: Einheitliche Gaps zwischen Cards (ca. 16–24px Equivalent) +- **Section-Trennung**: Klare vertikale Trennung zwischen Sektionen, oft durch Farbwechsel statt Linien + +--- + +## Navigation-Design + +Aya-typische Navbars: +- **Hell**: Logo links | Links zentriert (4–5 Items) | CTA Button rechts (ausgefüllt, abgerundet) +- **Dunkel**: Logo links (oft mit Icon) | Links | Ghost-Button + Filled Button +- Navbar ist immer **sehr flach und clean** – keine Schatten, keine dicken Borders +- CTA-Button in der Navbar hat immer die Akzentfarbe des jeweiligen Designs diff --git a/04-designprinzipien.md b/04-designprinzipien.md new file mode 100644 index 0000000..42be99b --- /dev/null +++ b/04-designprinzipien.md @@ -0,0 +1,129 @@ +# ayathedesigner – Designprinzipien & Denkmuster + +--- + +## 1. Stimmung vor Funktion – aber Funktion durch Stimmung + +Aya wählt niemals beliebig eine Ästhetik. Jede Farbwelt hat eine emotionale Aussage: + +| Stimmung | Ästhetik | Für wen | +|---|---|---| +| Premium / Tech-Trust | Dark + Violett + Neon | Fintech, Crypto, SaaS | +| Wachstum / Energie | Gold-Beige + schwebende Karten | Marketing, Growth, Agency | +| Freiheit / Kreativität | Hell + Schmetterlinge / Natur | Software-Marken die menschlich wirken wollen | +| Autorität / Expertise | Editorial Schwarz-Weiß | Agenturen, Portfolio-Designer | +| Frisch / Bold | Schwarz + Neongrün | Challenger-Brands, moderne Finanz-Apps | + +**Prinzip:** Das Design kommuniziert die Brand-Persönlichkeit bevor der Nutzer einen einzigen Text liest. + +--- + +## 2. Hierarchie durch Größenkontrast + +Aya erzeugt visuelle Führung durch extreme Größenunterschiede: + +- **Headline**: Sehr groß (dominiert den Viewport) +- **Subtext**: Sehr klein (3–4x kleiner als Headline) +- **Button**: Mittelgroß, aber durch Farbe prominent +- **Labels / Badges**: Winzig, aber funktional + +Es gibt nie "mittlere" Elemente. Alles ist entweder sehr groß oder sehr klein. Das zwingt das Auge auf einen klaren Pfad. + +--- + +## 3. Das CTA-Gesetz + +In jedem Design gibt es exakt einen **primären CTA** und maximal einen **sekundären CTA**. Immer: + +``` +[Primär: Ausgefüllter Button] [Sekundär: Text-Link oder Ghost-Button] +``` + +Der primäre CTA ist immer: +- In der Akzentfarbe oder kontrastreich +- Mit abgerundeten Ecken (border-radius: 8–50px) +- Manchmal mit einem Pfeil-Icon (→ oder ↗) + +**Beispiele:** +- "Book A Free Call →" (Digitwist) +- "Get Started →" (Convix) +- "Install Now ↗" (Swapify) +- "Get started" + Google/Apple Signin (Beyond Finance) + +--- + +## 4. Floating Elements als Tiefenebene + +Fast alle ihre Designs haben eine "schwebende Ebene" – Elemente die vor dem Hintergrund schweben und einen 3D-Effekt erzeugen: + +- **Website-Designs**: UI-Screenshots oder Device-Mockups schweben über dem Hintergrund +- **App-Designs**: Die Phones stehen leicht angewinkelt, werfen subtile Schatten +- **Cards**: Finanzkarten (Visa/Mastercard) schweben in 3/4-Perspektive +- **Statistik-Widgets**: Kleine Data-Cards fliegen aus der Hauptoberfläche heraus + +Dieses Element schafft räumliche Tiefe und macht statische 2D-Designs lebendig. + +--- + +## 5. Social Proof ist Pflicht + +Jede Marketing-Website von ihr hat Social Proof: +- Logo-Bar: "Trusted by 17,000+ founders" + Logos +- Stat-Widgets: "+29.33%" als floating Card +- Testimonial-Karte mit Foto und echtem Namen +- "Join 100,000+ happy creators" als Pill-Badge + +Das ist kein Nice-to-have – es ist in jedem Projekt vorhanden. + +--- + +## 6. Konsistente Iconografie + +In App-Designs: +- **Bottom Navigation**: immer 4–5 Icon-Buttons, das aktive leicht hervorgehoben +- **Quick-Action-Icons**: Quadratisch, abgerundet, mit Label darunter (Transfer, Send, Pay, More) +- **Status-Indikatoren**: Progress-Bars, kleine Badges mit Zahl +- Icons wirken alle aus einem einheitlichen Set (Outline-Style auf dunklem Grund, Filled auf hellem) + +--- + +## 7. Daten als Design-Element + +Besonders in Finanz-Apps macht Aya Zahlen zur Hauptattraktion: + +- Große Konto-Summen dominieren die Karte: "$ 12,692.00" als größtes Element +- Prozentzahlen als Highlight: "+7.45%", "-3,382 (33%)" +- Liniendiagramme mit einem Highlight-Punkt (Tooltip) +- Balkendiagramme mit der Akzentfarbe gefüllt + +Daten sind keine Information, sie sind das Design. + +--- + +## 8. Produktivitäts-Denken in der UX-Struktur + +In den Designs die sie bevorzugt und empfiehlt, zieht sich ein roter Faden: + +- **Personalisierte Begrüßung**: "Good morning, [Name]!" oder "Hi, [Name]" +- **Today's Focus**: Was steht heute an? (Tasks, Goals, Aktivität) +- **Quick Actions**: Die häufigsten Aktionen immer in der ersten Bildschirmhälfte +- **Progress Visualization**: Fortschritt ist immer sichtbar (Balken, Kreise, %) + +Das zeigt ein tiefes Verständnis für App-Flows und tatsächliche Nutzungsszenarien. + +--- + +## 9. Kontext-bewusstes Design-Storytelling + +Aya zeigt ihre Designs nie isoliert. Auf TikTok immer mit: +- Einem persönlichen Foto von sich (Spiegel-Selfie, Lifestyle) als Cover +- "Dm me for collaborations" als CTA-Text auf dem Thumbnail +- Hashtags: #websitedesigner #uiuxdesigner #websitedevelopment #designer + +Sie vermarktet sich selbst als Design-Persönlichkeit, nicht nur als Dienstleisterin. Ihre Strategie: Ich bin die Brand, das Design ist das Produkt. + +--- + +## 10. Adaptivität: Ein Designer, viele Sprachen + +Aya zeigt Designs in verschiedenen Sprachen (Englisch, Spanisch), was auf internationale Kunden hindeutet. Das zeigt Weltoffenheit und Anpassungsfähigkeit – sie denkt in Nutzerbedürfnissen, nicht in einer einzigen Marktsprache. diff --git a/05-claude-design-regeln.md b/05-claude-design-regeln.md new file mode 100644 index 0000000..9c1d7db --- /dev/null +++ b/05-claude-design-regeln.md @@ -0,0 +1,134 @@ +# Claude Design-Regeln (basierend auf ayathedesigner-Analyse) + +Wenn Bao ein neues Design anfordert, wende ich diese Regeln an. + +--- + +## REGEL 1: Frage zuerst nach dem Markencharakter + +Bevor ich eine Farbe oder ein Layout wähle, bestimme ich (oder frage): + +- **Premium / Tech / Fintech?** → Dark Mode, Violett/Blau-Töne, Neon-Akzent +- **Marketing / Growth / Startup?** → Warm, Gold/Beige, schwebende Karten, Social Proof prominent +- **Portfolio / Agentur / Editorial?** → Schwarz-Weiß oder Off-White, Typografie dominiert +- **Bold / Challenger-Brand?** → Schwarz + eine einzige Neon-Farbe (Grün, Orange, Blau) + +**Niemals**: Pastellig, überladen, viele gleichwertige Farben. + +--- + +## REGEL 2: Monochrome + 1 Akzent + +Jedes Design bekommt: +- Einen **neutralen Grundton** (Schwarz, Weiß, Creme, Dunkelblau) +- Genau **einen Akzentton** (die Signalfarbe für CTAs, Highlights, aktive States) +- Optional: Ein **Gradient** als Premium-Signal (holographisch, nie flach) + +Kein Design braucht mehr als 3 Farben. Wenn es mehr sind, reduzieren. + +--- + +## REGEL 3: Headline-First Hierarchie + +Jede Seite / jeder Screen startet mit einer großen, mutigen Headline. Format: + +``` +[Kurze Verheißung, max. 5 Wörter, Bold] +[1-2 Zeilen erklärender Subtext, deutlich kleiner] +[CTA Button] [Sekundärer Link] +``` + +Die Headline muss eine **Verheißung** sein, keine Beschreibung: +- ❌ "Unser Password Manager" +- ✅ "Your Passwords, Safely Secured" +- ❌ "Finanzmanagement App" +- ✅ "Make Your Finances Move" + +--- + +## REGEL 4: Floating Elements für Tiefe + +Jedes Design bekommt mindestens eine "schwebende Ebene": +- Device-Mockups (iPhone, Browser) die über dem Hintergrund positioniert sind +- UI-Cards die aus der Oberfläche herausragen +- Statistik-Widgets die wie Post-its am Interface hängen + +Dies erzeugt Räumlichkeit und macht das Design lebendig statt flach. + +--- + +## REGEL 5: CTA immer Primär + Sekundär + +``` +[Ausgefüllter Button in Akzentfarbe] [Ghost-Button oder Text-Link] +``` + +- Primärer CTA: immer abgerundet, immer mit Pfeil-Icon (→ oder ↗) +- Sekundärer CTA: "See our work", "Learn more", oder Ghost-Outline +- Niemals mehr als 2 CTAs auf einer Sektion + +--- + +## REGEL 6: App-Designs immer als Multi-Screen Flow + +Wenn ich eine App zeige, immer 2–3 Screens in Reihenfolge: +1. **Onboarding / Splash** (Markenidentität, erster Eindruck) +2. **Haupt-Dashboard** (Kernfunktion, wichtigste Daten) +3. **Detail-View** (tiefere Funktion, z.B. Transaktion, Profil, Einstellungen) + +Screens im iPhone-Mockup mit Dynamic Island, leicht gestaffelt auf einem Gradient-Hintergrund. + +--- + +## REGEL 7: Daten sind Design-Elemente + +Wenn ein Design Zahlen enthält: +- Die Hauptzahl wird **groß und prominent** dargestellt +- Trend-Indikatoren (↑ +7.45%) immer farbkodiert (Grün = positiv, Rot = negativ) +- Liniendiagramme mit einem einzigen Highlight-Tooltip-Punkt +- Fortschrittsbalken in der Akzentfarbe + +--- + +## REGEL 8: Extrem groß oder winzig – nie mittelmäßig + +Verzichte auf "mittlere" Schriftgrößen: +- **Sehr groß** (48px+): Headlines, Zahlenwerte +- **Mittelgroß** (16–20px): Buttons, Labels, Nav-Items +- **Klein** (12–14px): Body-Text, Caption, Helper-Text + +Wenn ich zwischen zwei Größen schwanke: die größere nehmen. + +--- + +## REGEL 9: Social Proof in jede Marketing-Seite + +Jede Landingpage bekommt direkt nach der Hero-Section: +- Einen numerischen Beweis: "Trusted by X users", "X% reduction in..." +- Eine Logo-Bar mit Kundenlogos +- Optional: Ein Testimonial mit Foto, Name, Titel + +--- + +## REGEL 10: Keine beliebigen Dekorationen + +Alle Designelemente müssen einen Grund haben: +- Schmetterlinge (Convix) = Transformation als Markenmetapher +- Neon-Gradient (Beyond Finance) = Energie, Dynamik, Premium +- Handschrift-Annotierungen (BrandLyft) = Menschlichkeit, Kreativität +- Großer Hintergrundtext (Swapify) = Markenname als Textur + +**Niemals** dekorieren um zu dekorieren. + +--- + +## Schnell-Referenz: Wenn Bao sagt... + +| Bao sagt | Ich denke sofort | +|---|---| +| "Mach eine App für Finanzen" | Dark Mode, Violett-Gradient, Multi-Screen Flow, Zahlen groß | +| "Mach eine Landing Page" | Welcher Charakter? → Farbe wählen → Hero mit Floating Mockup | +| "Mach etwas Modernes" | Schwarz + 1 Neon-Farbe, große Headline, minimaler Rest | +| "Mach etwas Warmem" | Creme/Beige, handgeschriebene Annotierungen, organische Formen | +| "Mach ein Portfolio" | Schwarz-Weiß oder Weiß, Editorial-Grid, Typografie dominant | +| "Mach eine SaaS-Website" | Dark oder Hell je nach Zielgruppe, Dashboard-Mockup als Hero |