AzuTear
150 lines
4.4 KiB
Markdown
150 lines
4.4 KiB
Markdown
# 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
|