Kalıplar
Arayüz kalıpları: landing page, onboarding, ödeme sayfası, form. Her kalıp ne zaman kullanılır, nasıl kurulur, yap ve yapma örnekleriyle.
KalıplarAbonelik iptali tasarımı: dürüst iptal akışıAbonelik iptali nasıl tasarlanır? Görünür iptal bağlantısı, az adım, tek atlanabilir teklif ve tarihli onay. Engelli ve dürüst akışı yan yana deneyin.KalıplarBaşparmak bölgesi (thumb zone): mobilde butonları nereye koymalı?Başparmak bölgesi nedir, telefonu nasıl tutuyoruz? Hoober'ın gözlemleri, thumb zone haritasının sınırları ve mobil buton yerleşimi için canlı demo.KalıplarBoş durum (empty state) tasarımıEmpty state nedir, boş ekran nasıl tasarlanır? İlk kullanım, temizlenmiş liste, sonuç yok ve hata için ne yazılır, hangi tek eylem konur. Canlı örnek.KalıplarCTA butonu nedir? İyi bir eylem çağrısı nasıl tasarlanırCTA butonu nedir, metni nasıl yazılır? Buton metni örnekleri, birincil ve ikincil buton ayrımı, dokunma alanı ve kontrast, üstüne canlı bir demo.KalıplarDashboard tasarımı nasıl yapılır?Dashboard tasarımı nasıl yapılır? Öncelik sırası, grafik seçimi, boş ve hata halleri, renge dayanmayan grafik. Kalabalık ve sade paneli kendiniz deneyin.KalıplarDokunma alanı: mobilde minimum buton boyutu ne olmalı?Dokunma alanı ve minimum buton boyutu: iOS 44 pt, Android 48 dp, WCAG 24 px. Görünen boyut, aralık, köşeler, canlı parmak testi ve CSS kodu.KalıplarFiltre ve sıralama tasarımıFiltre tasarımı nasıl yapılır? Çoklu seçim, uygulanan filtre çipleri, sonuç sayısı, mobil filtre paneli ve varsayılan sıralama, canlı örnekle.KalıplarFiyatlandırma sayfası (pricing page) tasarımıSaaS fiyat sayfası nasıl tasarlanır? Plan tablosu, önerilen plan, dürüst yıllık anahtarı, KDV ve SSS. Yem etkisini canlı bir fiyat tablosunda deneyin.KalıplarForm tasarımı: kurallar ve örneklerForm tasarım kuralları: etiket, yer tutucu, hata mesajı ve canlı doğrulama. Kötü ve iyi form yan yana, erişilebilirlik notu ve kontrol listesi.KalıplarGiriş ve kayıt ekranı tasarımıLogin ekranı ve üye ol sayfası nasıl tasarlanır? Misafir seçeneği, şifre kuralları, şifreyi göster, hata mesajı, autocomplete ve WCAG 3.3.8.KalıplarHata mesajı yazma: kurallar ve örneklerHata mesajı nasıl yazılır? Görünür, alanın yanında, ne olduğunu ve nasıl düzeltileceğini söyleyen mesajlar. Türkçe örnekler ve yeniden yazma alıştırması.Kalıplarİzin ve bildirim ekranları: izni ne zaman, nasıl istemeli?Push bildirim izni ne zaman, nasıl istenir? Bağlam içinde isteme, ön açıklama ekranı, ret sonrası akış ve ayarlar yolu için iOS ve Android kuralları.KalıplarLanding page nedir, nasıl tasarlanır?Landing page nedir, nasıl tasarlanır? Açılış sayfasının bölümleri, yap ve yapma notları, mobil fark, erişilebilirlik ve kontrol listesi.KalıplarMobil formda doğru klavye: type, inputmode ve autocompleteMobil form tasarımında doğru klavye: type, inputmode, autocomplete ve enterkeyhint. Telefon, TC kimlik, IBAN ve posta kodu için canlı örnek.KalıplarModal ve popup tasarımı: ne zaman, nasıl?Modal ne zaman kullanılır, ne zaman kullanılmaz? Açılış zamanı, Esc ve Kapat butonu, odak tuzağı, mobilde tam ekran. Kötü ve iyi modalı klavyeyle deneyin.KalıplarNavigasyon tasarımı: site menüsü kalıplarıNavigasyon tasarımı nasıl yapılır? Üst menü, mega menü, hamburger menü, alt sekme çubuğu ve breadcrumb; araştırma verisi ve erişilebilir menü kuralları.KalıplarOnboarding tasarımı nasıl yapılır?Onboarding tasarımı nasıl yapılır? Tanıtım turu, ipucu ve boş durumu canlı örnekte karşılaştırın. Mobil fark, erişilebilirlik ve kontrol listesi.KalıplarSatır içi doğrulama (inline validation): ne zaman, nasıl?Form doğrulama ne zaman yapılır: yazarken, alandan çıkınca ya da gönderince? Erken hata, başarı işareti, hata özeti ve aria-invalid ile canlı deneme.KalıplarSepet terk oranı ve sepeti terk etme nedenleriSepet terk oranı nedir, nasıl hesaplanır? Baymard verisiyle sepeti terk etme nedenleri, her nedenin UX düzeltmesi ve sepet kontrol aracı.KalıplarSite içi arama ve otomatik tamamlamaSite içi arama ve otomatik tamamlama nasıl tasarlanır: kutunun yeri, öneri sayısı, Türkçe karakter toleransı, sonuç yok ekranı. Canlı örnekle.KalıplarYapay zeka ürünlerinde arayüz kalıplarıChatbot ve yapay zeka ürünleri için arayüz kalıpları: güven göstergesi, kaynak, düzeltme, insana devir, gizlilik. PAIR ve HAX ilkeleriyle canlı örnek.KalıplarÇerez banner tasarımı: KVKK'ya uygun çerez onay ekranıÇerez banner'ı nasıl tasarlanır? KVKK çerez rehberine göre eşit Kabul et ve Reddet, boş gelen kutular, zorunlu çerezler ve üç banner'lı canlı deneme.KalıplarÖdeme sayfası (checkout) tasarımı: kurallar ve örnekCheckout UX kuralları: misafir ödeme, adım göstergesi, erken toplam maliyet, hata ve güven. Baymard verisiyle sepet terki ve iki akış yan yana.KalıplarÜrün detay sayfası (PDP) tasarımı: kurallar ve örnekE-ticaret ürün sayfası tasarımı: görseller, beden butonları, kargo dahil toplam, teslimat tarihi, sepete ekle onayı ve mobilde yapışkan buton.