# 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