bao/ayathedesigner-analyse

Fork 0

Files

T

AzuTear 15bba0acbe Initial commit: ayathedesigner Design-Analyse

2026-06-14 13:00:32 +02:00

4.4 KiB

Raw Permalink Blame History

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

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

4.4 KiB Raw Permalink Blame History Unescape Escape