design-patterns

---

name: design_patterns router_kit: FullStackKit description: Visual hierarchy, z-index, shadows, animations ve white space kuralları. metadata: skillport: category: design tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, design patterns, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - design-components

🎭 Design Patterns

Visual hierarchy, layering ve animation kuralları.

---

⚠️ Bu Skill vs arch-patterns

Bu Skill	arch-patterns
UI/UX tasarım	Sistem mimarisi
Z-index, shadows	Microservices, CQRS
Animation, spacing	Database seçimi

Kural: UI tasarımı → bu skill, Sistem tasarımı → arch-patterns

---

📊 1. Visual Hierarchy

Z-Index Scale

-1    - Behind content
0     - Base layer
10    - Dropdown menus
20    - Sticky headers
30    - Modal backdrop
40    - Modal content
50    - Tooltips
100   - Toast notifications

Shadows (Elevation)

shadow-xs:  0 1px 2px rgba(0,0,0,0.05)
shadow-sm:  0 1px 3px rgba(0,0,0,0.1)
shadow-md:  0 4px 6px rgba(0,0,0,0.1)
shadow-lg:  0 10px 15px rgba(0,0,0,0.1)
shadow-xl:  0 20px 25px rgba(0,0,0,0.15)

---

⚡ 2. Animation & Transitions

Duration Scale

75ms   - Instant (very subtle)
150ms  - Fast (hover states)
200ms  - Normal (default)
300ms  - Moderate (dropdown, modal)
500ms  - Slow (page transitions)

Easing Functions

Easing	Kullanım
ease-out	En yaygın (hover, click)
ease-in-out	Modal, dropdown
ease-in	Çıkış animasyonları

---

📐 3. White Space Rules

Content Density

Tip	Spacing
Tight	8-12px (data tables)
Normal	16-24px (default)
Relaxed	32-48px (marketing)
Spacious	64px+ (premium)

Reading Width

• Optimal: 60-75 karakter (600-750px)
• Maximum: 90 karakter
• Minimum: 45 karakter

---

🔍 4. Focus States

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

---

🔗 İlgili Skill'ler

• design-tokens - Spacing, typography
• design-responsive - Breakpoints, fluid

---

Design Patterns v1.1 - Enhanced

🔄 Workflow

Kaynak: Refactoring UI (Visual Hierarchy)

Aşama 1: Foundation (Hierarchy)

• Spacing: Elemanları 8px grid sistemine göre yerleştir.
• Typography: Başlık/Gövde oranını (Scale) belirle.
• Contrast: En önemli öğeyi (Primary Button) en yüksek kontrasta koy.

Aşama 2: Interaction (Feedback)

• States: Hover, Focus, Active, Disabled durumlarını tasarla.
• Motion: 200ms default transition ile mikro-animasyon ekle.
• Elevation: Katmanları shadow ve z-index ile ayır.

Aşama 3: Validation

• A11y: Renk kontrast oranları AA standardında mı?
• Responsiveness: Mobilde touch target'lar >44px mi?
• Consistency: Tüm butonlar aynı radius/padding değerine sahip mi?

Kontrol Noktaları

Aşama	Doğrulama
1	Sayfada nereye bakılacağı (Focal Point) net mi?
2	Focus ring klavye ile gezinirken görünüyor mu?
3	Animasyonlar performansı (FPS) düşürüyor mu?