Design QA ve Review: Implementasyonu Tasarımla Karşılaştırma
Seviye: Orta Kategori: UX Design Son güncelleme: Ocak 2025
Giriş
Tasarımı teslim ettin, developer kodladı. İş bitti mi?
Hayır. Arada kayıp yaşanabilir: Yanlış spacing, eksik state, farklı renk tonu, bozuk responsive davranış. Bunları yakalamak için Design QA gerekiyor.
Design QA, "tasarladığım şey mi çıktı?" sorusunun cevabı. Pixel polisliği değil, kalite garantisi. Kullanıcıya ulaşan ürünün tasarım vizyonuna sadık olması için son kontrol.
Bu yazıda Design QA sürecini, nelere bakılacağını ve etkili bug raporlamayı öğreneceksin.
Design QA Nedir?
[CALLOUT BOX] Design QA (Quality Assurance): Kodlanmış ürünün orijinal tasarıma ne kadar sadık olduğunu sistematik olarak kontrol etme süreci. Görsel, interaktif ve responsive açıdan implementasyonu tasarımla karşılaştırma. [/CALLOUT BOX]
QA kapsamı:
- Görsel doğruluk (spacing, color, typography)
- Interaksiyon kalitesi (hover, focus, animasyon)
- Responsive davranış (breakpoint'ler)
- State'lerin varlığı (error, loading, empty)
- Erişilebilirlik kontrolleri
- Cross-browser/device uyumu
Neden Design QA?
1. Kalite garantisi
Tasarım detaylarının korunması.
2. Kullanıcı deneyimi
Küçük hatalar bile UX'i bozabilir.
3. Marka tutarlılığı
Tutarsız implementasyon = tutarsız marka algısı.
4. Teknik borç önleme
Erken yakalamak, sonra düzeltmekten kolay.
5. Tasarımcı-developer ilişkisi
Geri bildirim döngüsü, karşılıklı öğrenme.
Pixel-Perfect Tartışması
Gerçekçi Yaklaşım
Kesin pixel-perfect çoğu zaman:
- Pratik değil (farklı render engine'ler)
- Zaman kaybı (1px için saatler)
- Gereksiz sürtüşme
Kabul Edilebilir Toleranslar
| Özellik | Kabul Edilebilir | Kabul Edilemez |
|---|---|---|
| Spacing | ±2px | ±8px+ |
| Font size | Doğru olmalı | Farklı boyut |
| Color | Aynı token | Farklı renk |
| Border radius | ±1px | ±4px+ |
| Animasyon | Benzer hissiyat | Tamamen farklı |
Önemli Olan
- Görsel tutarlılık
- Spacing sistemi uyumu
- Design token doğruluğu
- Interaksiyon kalitesi
- Responsive davranış
QA Kontrol Alanları
1. Typography
✓ Yap:
✗ Yapma:
2. Spacing
✓ Yap:
✗ Yapma:
3. Renkler
✓ Yap:
✗ Yapma:
4. Component'ler
✓ Yap:
✗ Yapma:
5. State'ler
✓ Yap:
✗ Yapma:
6. Interaksiyon
✓ Yap:
✗ Yapma:
7. Responsive
✓ Yap:
✗ Yapma:
8. Erişilebilirlik
✓ Yap:
✗ Yapma:
QA Süreci
Hazırlık
-
Tasarım dosyasını hazır tut Karşılaştırma için referans
-
Test ortamını belirle Staging URL, test hesapları
-
Cihaz/browser listesi Hangi kombinasyonlar test edilecek?
-
Checklist hazırla Kontrol edilecek alanlar
Uygulama
[ADIM LİSTESİ]
-
Genel bakış (5 dk) İlk izlenim, büyük sorunlar var mı?
-
Ekran ekran karşılaştırma (değişken) Figma'yı yan yana açarak kontrol
-
State kontrolleri (10-15 dk) Her interaktif element için state'ler
-
Responsive test (10-15 dk) Farklı ekran boyutlarında kontrol
-
Interaction test (10 dk) Animasyonlar, geçişler, feedback
-
Cross-browser (değişken) Chrome, Safari, Firefox minimum
-
Bug listesi oluştur Tüm bulguları belgele [/ADIM LİSTESİ]
Raporlama
Bulguları düzenli şekilde belgele ve paylaş.
Bug Raporlama
İyi Bug Raporu İçeriği
- Başlık: Kısa, açıklayıcı
- Konum: Hangi sayfa, hangi element
- Beklenen: Tasarımda nasıl olmalı
- Gerçek: Şu an nasıl görünüyor
- Screenshot: Görsel kanıt (annotated)
- Cihaz/browser: Test ortamı bilgisi
- Öncelik: Severity level
Öncelik Seviyeleri
| Seviye | Açıklama | Örnek |
|---|---|---|
| **Critical** | Kullanılamaz, engelleyici | Buton çalışmıyor, sayfa açılmıyor |
| **Major** | Ciddi görsel/fonksiyonel sorun | Yanlış renk, eksik state |
| **Minor** | Küçük görsel fark | 4px spacing farkı, hafif ton farkı |
| **Enhancement** | İyileştirme önerisi | Animasyon eklenebilir |
Bug Raporu Şablonu
BUG BAŞLIĞI: [Kısa açıklama]
Konum: [Sayfa > Section > Element]
Cihaz/Browser: [örn. Chrome 120, macOS]
Öncelik: [Critical / Major / Minor]
Beklenen:
[Tasarımda nasıl olmalı - screenshot veya açıklama]
Gerçek:
[Şu an nasıl görünüyor - screenshot]
Not:
[Ek bilgi varsa]
Screenshot Best Practices
Karşılaştırmalı göster: Sol: Beklenen (Figma) Sağ: Gerçek (implementasyon)
Annotate et:
- Sorunlu alanı işaretle
- Ok veya daire ile vurgula
- Değer farklarını yaz
Araçlar:
- macOS: Cmd+Shift+4
- Windows: Snipping Tool
- Chrome: DevTools screenshot
- Markup: Skitch, Monosnap, CleanShot
Karşılaştırma Teknikleri
Yan Yana Karşılaştırma
Figma ve browser yan yana.
Yöntem:
- Figma'da ekranı aç
- Browser'da aynı sayfa
- İkisini yan yana koy
- Detay detay karşılaştır
Overlay Karşılaştırma
Tasarımı implementasyon üzerine koyma.
Araçlar:
- PixelSnap
- PerfectPixel (Chrome extension)
- xScope
Dikkat: Tam eşleşme bekleme, kritik farklara odaklan.
DevTools Kullanımı
Browser DevTools ile değerleri kontrol et.
Kontrol edilecekler:
- Computed styles (gerçek değerler)
- Box model (padding, margin)
- Typography values
- Color values
QA Araçları
| Araç | Kullanım |
|---|---|
| **PerfectPixel** | Overlay karşılaştırma (Chrome) |
| **PixelSnap** | Ölçüm (macOS) |
| **ColorZilla** | Renk değeri alma (Chrome) |
| **WAVE** | Erişilebilirlik kontrolü |
| **Responsively** | Multi-device preview |
| **BrowserStack** | Cross-browser testing |
| **Loom** | Video ile bug raporlama |
Developer İş Birliği
Yapıcı Yaklaşım
İletişim Tonu
- Suçlama değil, çözüm odaklı
- Spesifik ol, genelleme yapma
- Önceliklendirmeyi paylaş
- Kritik olmayanları bekletebileceğini söyle
Tradeoff Anlayışı
Bazen teknik kısıtlar var:
- Browser desteği sorunu
- Performans endişesi
- Zaman baskısı
Anlayışlı ol, esnek ol. Her şey düzelmezse dünya yıkılmaz.
QA Review Toplantısı
Büyük feature'larda yüz yüze review:
- Ekran paylaşarak beraber gez
- Bug listesini birlikte incele
- Önceliklendirmeyi tartış
- Timeline belirle
QA Zamanlama
Ne Zaman?
İdeal: Development bittikten hemen sonra, staging'de
Kaçınılması gereken: Production'a çıktıktan sonra
Sprint İçinde QA
- Developer feature'ı bitirir
- Test ortamına deploy
- Designer QA yapar (aynı gün/ertesi gün)
- Bug'lar açılır
- Developer düzeltir
- Re-QA (gerekirse)
- Production'a çıkar
Continuous QA
Her feature ayrı QA'den geçer. Sprint sonunda toplu QA yerine, sürekli kontrol.
Yaygın Sorunlar
1. Spacing tutarsızlıkları
Neden: Hardcoded değerler, token kullanılmamış Çözüm: Token sistemine geçiş, component library
2. Eksik state'ler
Neden: Handoff'ta belirtilmemiş veya atlanmış Çözüm: Daha kapsamlı handoff, state checklist
3. Animasyon farklılıkları
Neden: Spec belirsiz veya teknik kısıt Çözüm: Animasyon spec'lerini detaylandır
4. Responsive bozukluklar
Neden: Tüm breakpoint'ler tasarlanmamış Çözüm: Responsive tasarımı tamamla
5. Cross-browser farklılıklar
Neden: Browser rendering farklılıkları Çözüm: Browser support listesi, fallback'ler
Şimdi Sen Dene
25 dakika
Görev: Bir web sayfasında design QA yap.
Senaryo: Favori bir web sitesini (veya kendi projen varsa onu) QA et.
Adımlar:
-
Sayfa seç ve screenshot al (3 dk) Bir landing page veya dashboard
-
Typography kontrolü (5 dk)
- Font size'lar tutarlı mı?
- Hierarchy net mi?
- Renk kontrastı yeterli mi?
-
Spacing kontrolü (5 dk)
- DevTools ile padding/margin kontrol et
- Tutarlı mı yoksa rastgele mi?
-
State kontrolü (5 dk)
- Butonlara hover et
- Input'lara focus ver
- State'ler var mı?
-
Responsive test (5 dk)
- DevTools'ta mobile boyuta getir
- Kırılan bir şey var mı?
-
3 bug/improvement yaz (2 dk) Bug şablonunu kullanarak 3 bulgu belgele
Format: | # | Başlık | Konum | Öncelik | Açıklama | |---|--------|-------|---------|----------| | 1 | ? | ? | ? | ? | | 2 | ? | ? | ? | ? | | 3 | ? | ? | ? | ? |
Özet
- Design QA = implementasyonu tasarımla karşılaştırma
- Pixel-perfect değil, görsel tutarlılık ve kalite odaklı
- Kontrol alanları: typography, spacing, color, state, interaction, responsive
- Bug raporu: konum, beklenen, gerçek, screenshot, öncelik
- Öncelik: Critical > Major > Minor > Enhancement
- Yan yana veya overlay karşılaştırma teknikleri
- DevTools ile değer kontrolü
- Yapıcı ve çözüm odaklı iletişim
- Continuous QA, sprint sonunda değil sürekli
- Tradeoff'ları anla, esnek ol
İlgili İçerikler
Önceki: Design Handoff
Sonraki: Onboarding UX Tasarımı (yakında)
İlgili konular:
İlgili Roadmap: UX Designer Roadmap → Workflow & Process
Kaynaklar
Derinleşmek istersen:
- Design QA Best Practices - Figma (İngilizce)
- Visual QA - Smashing Magazine (İngilizce)
- PerfectPixel Extension (Araç)