Files
ayathedesigner-analyse/04-designprinzipien.md
T
2026-06-14 13:00:32 +02:00

4.7 KiB
Raw Blame History

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 (34x 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: 850px)
  • 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 45 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.