Initial commit: ayathedesigner Design-Analyse

2026-06-14 13:00:32 +02:00
commit 15bba0acbe
5 changed files with 568 additions and 0 deletions
@@ -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