1---2name: frontend-design-73description: 🎨 Frontend Design (Premium)4---56# 🎨 Frontend Design (Premium)78> Distinctive, production-grade UI. "AI slop" estetikten kaçın.910---1112## ⚡ Pre-Design Checklist1314| Adım | Soru |15|------|------|16| **Purpose** | Bu interface hangi sorunu çözüyor? |17| **Audience** | Kim kullanacak? |18| **Tone** | Hangi estetik? (aşağıdan seç) |19| **Unforgettable** | Neyi hatırlayacaklar? |2021---2223## 🎭 Aesthetic Directions2425| Stil | Özellik |26|------|---------|27| Brutally Minimal | Beyaz boşluk, az element |28| Maximalist | Yoğun, katmanlı, bold |29| Retro-Futuristic | Neon, gradient, 80s vibes |30| Luxury/Refined | Premium, altın/siyah |31| Editorial | Dergi layoutu, tipografi odaklı |32| Playful | Pastel, rounded, animations |33| Industrial | Raw, monospace, utility-first |3435---3637## 🎯 Guidelines3839### Typography40| ❌ KAÇIN | ✅ TERCİH ET |41|----------|-------------|42| Inter, Roboto, Arial | Distinctive display fonts |43| System fonts | Unique pairings |4445### Color46| ❌ KAÇIN | ✅ TERCİH ET |47|----------|-------------|48| Purple gradient on white | Dominant + sharp accent |49| Generic palettes | CSS variables, cohesive theme |5051### Motion52```53Focus: High-impact moments54- Staggered page load reveals55- Scroll-triggered animations56- Surprising hover states57```5859### Composition60```61✅ Asymmetry · Overlap · Diagonal flow62✅ Grid-breaking · Generous negative space63❌ Predictable layouts · Cookie-cutter patterns64```6566---6768## 📋 Output Requirements6970- [ ] Production-grade, functional code71- [ ] Visually striking & memorable72- [ ] Clear aesthetic point-of-view73- [ ] Meticulously refined details7475---7677*Frontend Design v1.1 - Enhanced*7879## 🔄 Workflow8081> **Kaynak:** [Refactoring UI](https://www.refactoringui.com/) & [Awwwards Evaluation](https://www.awwwards.com/jury-member/evaluation-system)8283### Aşama 1: Visual Hierarchy84- [ ] **Scale**: Önemli elementleri daha büyük değil, *çok* daha büyük yap.85- [ ] **Contrast**: Renk kontrastını kullanarak dikkati yönlendir.86- [ ] **WhiteSpace**: Boşluğu bir element gibi aktif kullan (Nefes aldır).8788### Aşama 2: Implementation Details89- [ ] **Animation**: Micro-interaction'lar ekle (Buton hover, Page transition).90- [ ] **Images**: Görselleri optimize et (WebP, Lazy Load) ve aspect-ratio koru.91- [ ] **Typography**: Satır yüksekliği (`line-height`) ve harf aralığını (`letter-spacing`) ayarla.9293### Aşama 3: Polish94- [ ] **Consistency**: Padding ve Margin değerleri bir sistemden (Design Tokens) mi geliyor?95- [ ] **Responsive**: Sadece küçülmekle kalmayıp, layout değişiyor mu?9697### Kontrol Noktaları98| Aşama | Doğrulama |99|-------|-----------|100| 1 | Siteye ilk giren 3 saniye içinde "Vay be" diyor mu? |101| 2 | Renk paleti 3-4 ana renkle sınırlı mı? |102| 3 | Mobilde parmakla tıklanabilir alanlar yeterince büyük mü? |
gabrielmoreira