Aşağıdaki ekran / özellik için wireframe brief yaz:
ÖZELLİK:
- Ekran adı: [EKRAN]
- Amaç: [NE İÇIN]
- Kullanıcı tipi: [HANGİ PERSONA]
- Cihaz: [MASAÜSTÜ / MOBİL / İKİSİ]
PROJE:
- Ad: [PROJE]
- Tasarım sistemi: [VAR / YOK]
- Rakip / örnek: [BENZER ÜRÜNLER]
WIREFRAME BRIEF YAPISI:
1. KIMLIK
- Wireframe ID (WF-001)
- Başlık
- Versiyon
- Tarih
- Hazırlayan
- Hedef kitle
2. AMAÇ VE BAĞLAM
- Bu ekran ne işe yarar
- Kullanıcının neyi başarması bekleniyor
- İş değeri ne
- User story / use case referansı
3. KULLANıCı PERSPEKTIFI
3.1 PERSONA
- Kim (yaş, meslek, teknik seviye)
- Hedefler bu ekranda
- Frustasyonlar (eski sistemle)
- Cihaz (en çok kullanılan)
- Erişim yolu (ana menü, arama, direct link)
3.2 KULLANIM SENARYOSU
- Kullanıcı bu ekrana gelmeden önce nerede
- Hangi motivasyonla geliyor
- Ne yapmak istiyor (3-5 senaryo)
- Sonrasında nereye gider
4. EKRAN AKIŞı
4.1 USER FLOW
- Önceki ekran: [EKRAN X]
- Bu ekran: [EKRAN Y]
- Sonraki ekranlar: [EKRAN Z1, Z2, Z3]
4.2 NAVIGASYON
- Menü konumu
- Breadcrumb
- Back button davranışı
- Deep linking
5. LAYOUT (Kabaca)
5.1 ALAN DAĞILIMI
- Header (logo, menü, arama, hesap)
- Sidebar (varsa)
- Ana içerik
- Footer
5.2 GRID
- 12 kolon (desktop) / 4 kolon (mobil)
- Breakpoint'ler: 576, 768, 992, 1200
- Spacing: 8px grid system
6. BILEŞENLER
HER BİLEŞEN İÇİN:
6.1 BAŞLIK BLOĞU
- Ekran başlığı: "Sipariş Detayları"
- Alt başlık (varsa)
- Aksiyon butonları (yazdır, paylaş)
6.2 FORM ALANI
- Alan adı, tipi, zorunluluk, placeholder
- Örnek:
- Ad (metin, zorunlu, placeholder: "Adınız")
- E-posta (e-posta, zorunlu, validasyon)
- Telefon (tel, opsiyonel, +90 maskeli)
- Mesaj (textarea, 500 karakter max)
6.3 LİSTE / TABLO
- Sütunlar
- Sıralama (varsayılan, alternatifler)
- Filtreleme seçenekleri
- Sayfalama (20 / sayfa)
- Aksiyonlar (satır başı: düzenle, sil)
6.4 KARTLAR
- Başlık
- Alt başlık
- Açıklama
- Görsel
- Aksiyonlar
- İlgili bilgiler
6.5 BUTONLAR
- Birincil (ana aksiyon): "Kaydet"
- İkincil: "İptal"
- Tehlikeli: "Sil" (kırmızı)
- Disable durum
- Loading durum
6.6 MESAJLAR VE GERİ BİLDİRİM
- Başarı mesajı
- Hata mesajı
- Uyarı
- Bilgi
- Loading state
- Empty state
7. İÇERİK
7.1 BAŞLIKLAR
- Tam metin yaz
- SEO için
- Ton: formal / informal
7.2 METİNLER
- Placeholder metinleri
- Buton etiketleri
- Error mesajları
- Confirm dialog'lar
7.3 GÖRSELLER
- Icon'lar (hangi kütüphane: Material, Fontawesome)
- Resim boyutları
- Avatar
- İllustrasyonlar (empty state)
7.4 LOCALIZATION
- Dil desteği (TR, EN)
- Tarih / para formatı
- Sağdan sola diller (Arapça)
8. ETKİLEŞİM
8.1 USER ACTIONS
- Click / tap
- Hover
- Focus
- Drag & drop
- Swipe (mobil)
- Keyboard shortcut
8.2 SİSTEM TEPKİLERİ
- Her aksiyona response
- Loading gösterimi
- Animasyon / transition
- Sound (varsa)
- Haptic (mobil)
8.3 VALIDASYON
- Real-time (input değişince)
- On blur (alan terk edilince)
- On submit
- Error gösterimi (satır altı, popup, toast)
9. STATE'LER
9.1 NORMAL STATE
- Default görünüm
- İlk yüklendiğinde
9.2 EMPTY STATE
- Veri yok
- İllustrasyon + mesaj + CTA
- Örnek: "Henüz siparişiniz yok - Alışverişe başla"
9.3 LOADING STATE
- Skeleton screen
- Spinner
- Progress bar
- Süre tahmini
9.4 ERROR STATE
- Teknik hata
- Network hatası
- Permission denied
- Not found
- Mesaj + aksiyon (tekrar dene, geri dön)
9.5 SUCCESS STATE
- Aksiyon tamamlandı
- Confirmation
- Next step'i öner
10. RESPONSIVE DAVRANıŞ
10.1 DESKTOP (> 992px)
- Tam layout
- Sidebar açık
- Tablo tüm sütunlar
10.2 TABLET (768-991)
- Sidebar collapse / toggle
- Tablo önemli sütunlar
- Card layout'lar
10.3 MOBILE (< 768)
- Single column
- Hamburger menü
- Tablo → card view
- Large touch targets (44px+)
- Fixed bottom navigation (opsiyonel)
11. ERİŞİLEBİLİRLİK (WCAG 2.1)
- Kontrast oranı (4.5:1 metin)
- Keyboard navigation
- Screen reader uyumlu
- Alt text (görseller)
- ARIA labels
- Focus indicator
- Semantic HTML
12. PERFORMANS
- Lazy loading
- Infinite scroll / pagination
- Image optimization
- Code splitting
- Cache strategy
13. GÜVENLİK
- Input sanitization
- XSS koruması
- CSRF token
- Rate limiting
- Hassas data şifreleme
14. ANALYTICS
- Tracking event'leri
- Funnel adımları
- Conversion point'leri
- A/B test varyantları
15. İLGİLİ DOKÜMANLAR
- User story ID'leri
- API endpoint'ler
- Tasarım sistemi komponent referansları
- Mockup / prototipler (Figma link)
- Marka kitabı
16. KABUL KRİTERLERİ (Designer için)
- Hangi bileşenler tasarım sisteminde olmalı
- Pixel perfect Figma dosyası
- Hover / focus / active state'ler
- Mobil, tablet, desktop varyantlar
- Empty / loading / error state'ler
- Animasyon notları
- Developer'a teslim şeklinde
17. REVIEW SÜRECI
- İlk taslak: Designer
- Review 1: BA + PO (iş ihtiyacı karşılıyor mu)
- Review 2: Dev team (teknik uygulanabilir mi)
- Review 3: UX research (kullanılabilir mi)
- Final: Kullanıcı testi
- İterasyon 2-3 tur
18. HAND-OFF
- Figma link (inspect mode)
- Exported assets (@1x, @2x, @3x)
- Design tokens (color, spacing, typography)
- Component library
- Interaction specs (micro-animasyon)
- Developer notes
EKRAN ÖRNEK BRIEF: "Ödeme Ekranı"
AMAÇ: Kullanıcı sepetteki ürünlerin ödemesini yapacak.
BILEŞENLER:
- Header (logo, adım göstergesi 1-2-3)
- Sol kolon: Sipariş özeti (ürün listesi, toplam)
- Sağ kolon: Ödeme formu (kart, banka, taksit)
- Güven işaretleri (SSL, PCI-DSS, iade garantisi)
- "Siparişi tamamla" butonu (sticky bottom mobile)
İÇERİK:
- Başlık: "Ödeme Bilgileri"
- Form etiketleri: Kart üzerindeki isim, kart no, son kullanma, CVC
- Güven metinleri: "3D Secure ile güvenli", "256-bit şifreleme"
- CTA: "Siparişi Tamamla (₺349,90)"
ETKİLEŞIM:
- Kart numarası otomatik boşluklu
- Kart tipi algıla (Visa, Mastercard icon)
- CVC input type="password"
- Taksit seçenekleri dropdown
- Form geçerliyse CTA aktif
RESPONSIVE:
- Mobil: Single column, sepet üstte açılır/kapanır
- Tablet: 2 kolon ama sepet daha dar
- Desktop: 2 kolon 60/40 oran
GÜVENLİK:
- CVC kaydetme yok
- Kart no masked gösterim (son 4 hane)
- 3D Secure redirect
ERROR HANDLING:
- Kart reddedildi → 'Başka bir kart dene'
- İnternet kesildi → 'Tekrar dene'
- Session timeout → 'Giriş yap'
Türkçe. Material Design 3 veya Apple HIG best practice'lerine uygun.