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

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

📐 3. White Space Rules

Content Density

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ı