---
name: frontend_design
router_kit: FullStackKit
description: Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.
metadata:
  skillport:
    category: frontend
    tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, frameworks, frontend, frontend design, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development]      - frontend-design
---

# 🎨 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](https://www.refactoringui.com/) & [Awwwards Evaluation](https://www.awwwards.com/jury-member/evaluation-system)

### 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ü? |