AzuTear
130 lines
4.7 KiB
Markdown
130 lines
4.7 KiB
Markdown
# 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 (3–4x 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: 8–50px)
|
||
- 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 4–5 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.
|