frontend-design

name	frontend_design
description	Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.

🎨 Frontend Design (Premium)

Distinctive, production-grade UI. "AI slop" estetikten kaçın.

---

⚡ Pre-Design Checklist

Adım	Soru
Purpose	Bu interface hangi sorunu çözüyor?
Audience	Kim kullanacak?
Tone	Hangi estetik? (aşağıdan seç)
Unforgettable	Neyi hatırlayacaklar?

---

🎭 Aesthetic Directions

Stil	Özellik
Brutally Minimal	Beyaz boşluk, az element
Maximalist	Yoğun, katmanlı, bold
Retro-Futuristic	Neon, gradient, 80s vibes
Luxury/Refined	Premium, altın/siyah
Editorial	Dergi layoutu, tipografi odaklı
Playful	Pastel, rounded, animations
Industrial	Raw, monospace, utility-first

---

🎯 Guidelines

Typography

❌ KAÇIN	✅ TERCİH ET
Inter, Roboto, Arial	Distinctive display fonts
System fonts	Unique pairings

Color

❌ KAÇIN	✅ TERCİH ET
Purple gradient on white	Dominant + sharp accent
Generic palettes	CSS variables, cohesive theme

Motion

Focus: High-impact moments
- Staggered page load reveals
- Scroll-triggered animations
- Surprising hover states

Composition

✅ Asymmetry · Overlap · Diagonal flow
✅ Grid-breaking · Generous negative space
❌ Predictable layouts · Cookie-cutter patterns

---

📋 Output Requirements

• Production-grade, functional code
• Visually striking & memorable
• Clear aesthetic point-of-view
• Meticulously refined details

---

Frontend Design v1.1 - Enhanced

🔄 Workflow

Kaynak: Refactoring UI & Awwwards Evaluation

Aşama 1: Visual Hierarchy

• Scale: Önemli elementleri daha büyük değil, çok daha büyük yap.
• Contrast: Renk kontrastını kullanarak dikkati yönlendir.
• WhiteSpace: Boşluğu bir element gibi aktif kullan (Nefes aldır).

Aşama 2: Implementation Details

• Animation: Micro-interaction'lar ekle (Buton hover, Page transition).
• Images: Görselleri optimize et (WebP, Lazy Load) ve aspect-ratio koru.
• Typography: Satır yüksekliği (line-height) ve harf aralığını (letter-spacing) ayarla.

Aşama 3: Polish

• Consistency: Padding ve Margin değerleri bir sistemden (Design Tokens) mi geliyor?
• Responsive: Sadece küçülmekle kalmayıp, layout değişiyor mu?

Kontrol Noktaları

Aşama	Doğrulama
1	Siteye ilk giren 3 saniye içinde "Vay be" diyor mu?
2	Renk paleti 3-4 ana renkle sınırlı mı?
3	Mobilde parmakla tıklanabilir alanlar yeterince büyük mü?