vibeeval/ui-ux-patterns

UI/UX Patterns

Somut, olculebilir UX kurallari ve stil rehberi. Tahmin degil, sayi var.

Priority Kategorileri

| Oncelik | Kategori | Seviye | |---------|----------|--------| | 1 | Accessibility | CRITICAL | | 2 | Navigation & Wayfinding | HIGH | | 3 | Forms & Input | HIGH | | 4 | Typography & Readability | HIGH | | 5 | Color & Contrast | HIGH | | 6 | Layout & Spacing | MEDIUM | | 7 | Motion & Animation | MEDIUM | | 8 | Data Display | MEDIUM | | 9 | Feedback & States | MEDIUM | | 10 | Charts & Visualization | LOW |

Named UX Rules (Sayisal Esiklerle)

Accessibility (CRITICAL)

| Kural | Esik | Aciklama | |-------|------|----------| | touch-target-size | min 44x44pt (iOS), 48x48dp (Android) | Dokunma alani minimum boyutu | | color-contrast-normal | 4.5:1 | Normal text kontrast orani (WCAG AA) | | color-contrast-large | 3:1 | Buyuk text (18px+ bold, 24px+) kontrast | | color-contrast-enhanced | 7:1 | AAA seviye kontrast | | focus-indicator | 2px+ visible ring | Klavye focus gostergesi | | text-resize | 200% zoom, icerik kaybolmamali | Browser zoom destegi | | animation-respect | prefers-reduced-motion | Animasyon tercihi |

Navigation & Wayfinding

| Kural | Esik | Aciklama | |-------|------|----------| | navigation-depth | max 3 seviye | Derinlik siniri | | breadcrumb-threshold | 2+ seviye derinlikte goster | Breadcrumb gorunurlugu | | back-button-always | Her alt sayfada | Geri donme garantisi | | search-visibility | 5+ nav item varsa arama ekle | Arama esigi | | menu-item-limit | 7 +/- 2 (5-9 arasi) | Miller's Law |

Forms & Input

| Kural | Esik | Aciklama | |-------|------|----------| | form-field-limit | max 7 field/step | Tek adimda alan siniri | | label-position | ustte, sola dayali | Label pozisyonu | | error-proximity | hata mesaji input'un 8px altinda | Hata mesaji konumu | | password-strength | min 8 karakter + indicator | Sifre gosterge | | autosave-interval | 30 saniyede bir | Otomatik kayit | | input-height | min 44px | Girdi alani yuksekligi | | placeholder-not-label | Asla placeholder'i label olarak kullanma | Placeholder kurali |

Typography & Readability

| Kural | Esik | Aciklama | |-------|------|----------| | body-font-size | min 16px (mobile), 14px (desktop) | Govde yazi boyutu | | line-height | 1.4-1.6x font size | Satir yuksekligi | | line-length | 45-75 karakter | Ideal satir uzunlugu | | heading-hierarchy | h1 > h2 > h3, atlama yapma | Baslik hiyerarsisi | | paragraph-spacing | 1.5x line-height | Paragraf arasi bosluk | | font-weight-contrast | min 2 kademe fark (400 vs 600) | Agirlik kontrasti |

Color & Contrast

| Kural | Esik | Aciklama | |-------|------|----------| | max-brand-colors | 3 ana + 2 accent | Renk paleti siniri | | status-colors | Yesil=basari, Kirmizi=hata, Sari=uyari, Mavi=bilgi | Durum renkleri | | color-not-alone | Renk + icon/text birlikte | Renk tek bilgi tasiyici olmamali | | dark-mode-contrast | Ayri kontrast kontrolu | Dark mode icin ozel kontrol |

Motion & Animation

| Kural | Esik | Aciklama | |-------|------|----------| | duration-micro | 100-150ms | Hover, toggle, checkbox | | duration-standard | 150-300ms | Modal, dropdown, tab switch | | duration-complex | 300-500ms | Page transition, expand | | stagger-sequence | 30-50ms aralik | Liste animasyon gecikme | | easing-enter | ease-out | Goruntuye giren eleman | | easing-exit | ease-in | Goruntudan cikan eleman | | easing-move | ease-in-out | Pozisyon degisimi | | no-bounce | Ease fonksiyonu kullan | Bounce animasyon kullanma |

Layout & Spacing

| Kural | Esik | Aciklama | |-------|------|----------| | content-max-width | 1200-1440px | Icerik maksimum genislik | | card-padding | min 16px, ideal 24px | Kart ic boslugu | | section-gap | 32-64px | Bolum arasi bosluk | | grid-gutter | 16-24px | Grid arasi bosluk | | mobile-padding | min 16px kenar | Mobil kenar boslugu | | z-index-scale | dropdown:10, modal:50, toast:100 | Z-index katmanlama |

Feedback & States

| Kural | Esik | Aciklama | |-------|------|----------| | loading-indicator | 300ms sonra goster | Loading gecikme esigi | | skeleton-screen | 1s+ yukleme suresi | Skeleton gosterim esigi | | toast-duration | 3-5 saniye (bilgi), kalici (hata) | Bildirim suresi | | empty-state | Her listede bos durum tasarla | Bos durum zorunlulugu | | success-feedback | Her eylem sonrasi onay | Basari geri bildirimi | | error-recovery | Her hatada cozum yolu sun | Hata kurtarma |

UI Stil Katalogu

| Stil | Ozellik | Ne Zaman Kullan | |------|---------|-----------------| | Minimalism | Az eleman, cok bosluk, monokrom | SaaS, portfolyo, landing | | Flat Design | 2D, golgesiz, temiz cizgiler | Dashboard, admin panel | | Material Design | Elevation, grid, bold color | Android, Google ekosistemi | | Glassmorphism | Yari saydam, blur, frost-cam efekti | Hero section, card overlay | | Neumorphism | Soft shadow, ic/dis golge, monokrom | Hesap makinesi, player, niche UI | | Neubrutalism | Kalin border, bold renk, raw tipografi | Yaratici portfolio, startup landing | | Brutalism | Ham, stilize edilmemis, web-punk | Sanat, deneysel projeler | | Bento Grid | Asimetrik grid, kart tabanli layout | Dashboard, ozellik vitrin | | Liquid Glass | Refraction efekti, saydam katmanlar | Premium urun, Apple esintili UI | | Skeuomorphism | Gercek obje taklidi | Oyun, muzik, niche app | | Claymorphism | 3D, yumusak, kilit hamuru efekti | Egitim, cocuk uygulamasi | | Aurora UI | Gradient-agirlikli, koyu arka plan | Fintech, crypto, premium | | Retro/Pixel | 8-bit estetik, piksel font | Oyun, nostalji temalik | | Organic/Blob | Yumusak formlar, dogal renkler | Saglik, wellness, organik urun | | Data-Dense | Kompakt layout, cok veri, kucuk font | Bloomberg terminal, analytics | | Card-Based | Her icerik bir kart, taranabilir | E-commerce, sosyal medya, listing | | Split-Screen | Ekran ikiye bolunmus, kontrast | Landing, karsilastirma, portfolio | | Monochrome | Tek renk tonlari, minimalist | Luks marka, editoryal | | Gradient-Heavy | Canli gecisler, enerji, modernlik | SaaS marketing, startup | | Dark-First | Koyu tema oncelikli, neon aksan | Developer tool, media, oyun |

Industry-Specific Rehber

| Sanayi | Onerilen Stil | YAPMA | |--------|---------------|-------| | SaaS / B2B | Minimalism, Flat, Card-Based | Glassmorphism (kafa karistirir), Neumorphism | | E-commerce | Card-Based, Flat | Dark-First (urun gorunmuyor), Brutalism | | Healthcare | Flat, Organic, Accessible | Neon renkler, karisik layout, kucuk font | | Fintech | Data-Dense, Aurora, Flat | Oyunsu eleman, belirsiz ikonlar | | Education | Card-Based, Claymorphism, Organic | Data-Dense (ogrenciyi bunaltir) | | Media / News | Card-Based, Bento Grid | Glassmorphism (okunurluk duser) | | Developer Tools | Dark-First, Monochrome, Data-Dense | Neumorphism, abart animasyon | | Gaming | Skeuomorphism, Retro, Gradient | Minimalism (sikici), corporate stil | | Luxury / Fashion | Monochrome, Split-Screen, Minimalism | Bento Grid, Claymorphism |

Pre-Delivery UX Checklist

Accessibility (Zorunlu)

• [ ] Tum resimler icin anlamli alt text
• [ ] Kontrast orani: normal text 4.5:1, buyuk text 3:1
• [ ] Keyboard ile tam navigasyon (Tab, Enter, Escape)
• [ ] Focus indicator gorunur (outline kaldirma)
• [ ] Touch target min 44x44pt
• [ ] Screen reader ile test edildi
• [ ] prefers-reduced-motion destegi
• [ ] lang attribute <html> tag'inde

Forms

• [ ] Her input'un label'i var (placeholder != label)
• [ ] Hata mesajlari input'un hemen altinda
• [ ] Inline validation (submit beklemeden)
• [ ] Required field belirtilmis
• [ ] Autofill/autocomplete calisiyor

States

• [ ] Loading state (skeleton veya spinner)
• [ ] Empty state (bos liste/tablo icin)
• [ ] Error state (hata durumu UI'i)
• [ ] Success feedback (islem onay)
• [ ] Disabled state (tiklanamazligi belli)
• [ ] Hover state (clickable elemanlarda)
• [ ] Active/selected state

Responsive

• [ ] 320px genislikte kirilma yok
• [ ] 1920px genislikte bosluk fazla degil
• [ ] Touch cihazda hover-dependent icerik yok
• [ ] Yatay scroll yok (tasma kontrolu)
• [ ] Font boyutlari mobilde okunabilir (min 16px)

Performance

• [ ] LCP < 2.5s
• [ ] CLS < 0.1
• [ ] INP < 200ms
• [ ] Resimler lazy-loaded
• [ ] Font FOUT/FOIT yok (font-display: swap)

Genel

• [ ] Tutarli spacing (4px/8px grid)
• [ ] Tutarli border-radius
• [ ] Dark mode token'lari dogru
• [ ] 404 sayfasi var
• [ ] Favicon ve meta taglar