Ozel Tema Tasarim Hizmeti

ikas ve T-Soft mağazaları için marka kimliğinize göre kurulan, mobil önceliğe ve dönüşüme göre planlanan tema tasarımı.

Toplantı Planlayın
Neler sunuyoruz

Özel Tema Tasarımı hakkında

Özel Tema Tasarımı, mağazanızın görünümünü hazır şablonun sınırlarından çıkarır. Kreyto olarak ikas ve T-Soft üzerinde satış yapan markalar için tema kurgusunu baştan ele alıyoruz. İşe koleksiyon sayfasından ödeme adımına kadar uzanan yolculuğu izleyerek başlıyoruz. Kullanıcı hangi ekranda duraksıyor, filtre paneli dar ekranda parmakla kullanılabiliyor mu, bunları GA4 olay verisi ve Microsoft Clarity oturum kayıtlarıyla görüyoruz. Tasarım kararlarını da bu gözlemin üzerine kuruyoruz.

Türkiye'de e-ticaret trafiğinin büyük bölümü mobil cihazlardan geliyor ve bu durum tema mimarisini doğrudan belirliyor. Arayüzü önce 390 piksel genişlikte kuruyoruz, masaüstü düzeni bunun üzerine ekleniyor. Yazı tipi dosyalarını woff2 olarak sıkıştırıyoruz. Ürün görsellerini WebP ve AVIF varyantlarıyla sunuyor, kritik CSS'i sayfa başında satır içi veriyoruz. Hedefimiz LCP değerini 2,5 saniyenin altında tutmak ve CLS'i 0,1 sınırının altında bırakmak.

Marka kimliği tarafında renk paletini ve tipografi ölçeğini Figma'da token olarak tanımlıyoruz, boşluk kuralları da aynı dosyada yaşıyor. Böylece pazarlama ekibiniz yeni bir kampanya bloğu eklediğinde tema kendi içinde tutarlı kalıyor. Erişilebilirlik kontrollerini WCAG 2.2 AA ölçütlerine göre yapıyoruz, kontrast oranı 4,5:1 eşiğinin altına düşen metin yayına çıkmıyor.

Tema tek seferlik bir teslimat değil. Sezon kampanyaları, yeni ürün tipleri, ödeme yöntemi eklemeleri ve platform sürüm güncellemeleri temayı sürekli etkiliyor. Bu yüzden yayın sonrasındaki ölçüm ve bakım döngüsünü de biz yürütüyoruz. Rakamlar ne söylüyorsa bir sonraki düzenlemeyi ona göre planlıyoruz.

Neler sunuyoruz

Tasarım

Marka Kimliğine Uygun Tema Kurgusu

Tema çalışması marka kılavuzunuzu okumakla başlıyor. Kılavuz yoksa ambalajınızdan, sosyal medya görsellerinizden, katalog sayfalarınızdan ve mağaza fotoğraflarınızdan bir tutarlılık haritası çıkarıyoruz. Renk kodlarını hex değerine kadar sabitliyor, yazı tipi ailesini ekran okunabilirliğine göre seçiyoruz. Başlık ölçeği, gövde metni satır yüksekliği, buton yüksekliği ve ikon kalınlığı Figma'da bileşen olarak tanımlanıyor. Ürün kartı, kampanya şeridi, mega menü ve ödeme özeti aynı token setinden besleniyor. Bu yapı kurulduğunda ekibiniz yeni bir sezon bloğu eklerken her seferinde tasarımcıya dönmek zorunda kalmıyor. Dosya teslim edilirken her bileşenin mobil ve masaüstü karşılığı ayrı hazırlanıyor, geliştirici tahmin yürütmüyor. Marka sesiniz arayüz metinlerine de taşınıyor, buton ve boş durum yazıları aynı dilde konuşuyor.

  • Marka kılavuzundan tasarım token setine geçiş
  • Ürün kartı ve kategori bileşenlerinin Figma kütüphanesi
  • Mobil ile masaüstü için ayrı ekran çıktıları
  • Kampanya blokları için hazır düzen şablonları

Analiz

Dönüşüm Odaklı Arayüz Akışı

Tema tasarımının işi görünüm değil, satın alma yolunu kısaltmak. Kategori sayfasında filtre panelini görünür tutuyor, ürün detay sayfasında varyant seçicisini fiyatın hemen altına alıyoruz. Beden tablosu, kargo süresi, iade koşulu ve stok bilgisi gibi tereddüt yaratan başlıkları sepete ekle butonunun çevresine yerleştiriyoruz. Sepet sayfasında kupon alanını gizlemiyor, ödeme adımında doldurulacak form alanı sayısını düşürüyoruz. Hangi değişikliğin işe yaradığını GA4 üzerinde view_item, add_to_cart, begin_checkout ve purchase olaylarını izleyerek ölçüyoruz. Kararsız kaldığımız noktalarda A/B testi kuruyoruz. Örneğin ürün kartında ikinci görsele geçiş etkisinin sepete ekleme oranına katkısını iki hafta boyunca karşılaştırıyoruz. Sonucu tahminle değil, istatistiksel anlamlılık eşiğine bakarak kapatıyoruz. Kazanan varyantı temaya kalıcı olarak işliyor, kaybedeni kayıt altına alıp arşive kaldırıyoruz.

  • Kategori ve ürün detay sayfası akış haritası
  • Sepete ekleme oranı için bileşen düzenlemesi
  • GA4 e-ticaret olaylarının tema içine gömülmesi
  • A/B testi kurulumu ve sonuç raporu

Mobil

Mobil Öncelikli Arayüz Yapısı

Arayüzü 390 piksel genişlikte kurup yukarı doğru açıyoruz. Dokunma hedeflerini 44 piksel altına düşürmüyor, alt menüyü başparmak erişim alanına yerleştiriyoruz. Ürün galerisinde yatay kaydırma jestini destekliyor, filtre panelini tam ekran katman olarak açıyoruz çünkü dar ekranda yan panel kullanışlı olmuyor. Sepete ekle çubuğu sayfa aşağı kaydırıldığında ekranın altında görünür kalıyor. Mobil menüde kategori derinliği üç seviyeyi geçiyorsa arama kutusunu öne alıyoruz. Tablet kırılımını atlamıyoruz, 768 piksel civarında ürün ızgarası iki sütuna iniyor. Test tarafında gerçek cihaz kullanıyoruz, tarayıcı simülasyonuyla yetinmiyoruz. Android tarafında orta segment bir telefon, iOS tarafında iki nesil eski bir model standart test setimizde duruyor. Karşılaştığımız gecikmeleri ekran kaydıyla belgeleyip düzeltme listesine ekliyoruz.

  • 390 piksel tabanlı bileşen kurulumu
  • Başparmak erişimine göre menü ve buton yerleşimi
  • Gerçek cihazlarla Android ve iOS testi
  • Tablet kırılımı için ayrı ızgara düzeni

Teknik

Sayfa Hızı Optimizasyonu

Hız çalışmasını laboratuvar skoruna değil, saha verisine göre yürütüyoruz. Search Console'daki Core Web Vitals raporunda LCP, INP, CLS ve TTFB değerlerinin URL grubu bazında dağılımına bakıyoruz. Ana görseli öncelikli yükleme sırasına alıyor, alt kısımdaki görselleri lazy loading ile erteliyoruz. Yazı tipi dosyalarını woff2 formatına indiriyor, font-display swap tanımıyla metnin beklemesini engelliyoruz. Tema içindeki JavaScript paketini bölüyoruz, ürün detay sayfasında çalışmayan kodu o sayfaya göndermiyoruz. Üçüncü taraf etiketlerini Google Tag Manager üzerinde tetikleyici kurallarına bağlıyoruz, hepsi sayfa açılışında birden çalışmıyor. Ölçümü WebPageTest üzerinde 4G bağlantı profiliyle tekrarlıyoruz. Değişiklik öncesi ve sonrası rakamları aynı raporda yan yana veriyoruz. Kazanımın kalıcı olması için ölçümü yayından dört hafta sonra bir kez daha yineliyoruz.

  • Search Console Core Web Vitals saha verisi incelemesi
  • Görsel formatı ve yükleme sırası düzenlemesi
  • JavaScript paket bölme ve kullanılmayan kod temizliği
  • Etiketlerin Google Tag Manager tarafına taşınması

Erişilebilirlik

WCAG 2.2 AA Uyumu

Erişilebilirlik kontrolünü tasarım aşamasında başlatıyoruz. Metin ile arka plan arasındaki kontrast oranını 4,5:1 eşiğine göre denetliyoruz, açık zemin üzerine beyaz buton yazısı yayına çıkmıyor. Klavye ile gezinmede odak halkası görünür duruyor, sekme sırası sayfa akışını takip ediyor. Form alanlarında etiket ile alan bağlantısını label ve for tanımıyla kuruyoruz, yer tutucu metne güvenmiyoruz. Görsellere alternatif metin yazıyoruz, dekoratif olanları ekran okuyucudan gizliyoruz. Denetimi axe DevTools ile otomatik, NVDA ekran okuyucusuyla elle yapıyoruz. Çıkan bulguları önem sırasına dizip düzeltme sonrası tekrar tarıyoruz. Bu çalışma arama motoru tarafında da işe yarıyor, çünkü doğru başlık hiyerarşisi ve semantik etiketler tarayıcıya net bir sayfa yapısı veriyor.

  • Kontrast oranı ve odak durumu denetimi
  • Klavye ile tam gezinme testi
  • axe DevTools taraması ve NVDA kontrolü
  • Bulgu listesi ve düzeltme sonrası tekrar tarama

Operasyon

Tema Geliştirme ve Bakım

Kodlama tarafında ikas tema yapısına ve T-Soft şablon dosyalarına göre çalışıyoruz. Geliştirmeyi canlı mağazada değil, ayrı bir test ortamında yürütüyoruz. Yayına almadan önce sipariş akışını uçtan uca deniyoruz, ödeme adımında kart formu ile kapıda ödeme seçeneğini ayrı ayrı kontrol ediyoruz. Yayın sonrasında tema sabit kalmıyor. Platform sürüm notlarını takip ediyor, etkilenen bileşenleri güncelliyoruz. Sezon kampanyalarında yeni blok ihtiyacını mevcut bileşen kütüphanesinden karşılıyoruz, sıfırdan tasarım masrafı çıkmıyor. Aylık bakım paketinde hata düzeltmesi, küçük geliştirme talepleri, hız kontrolü ve performans özeti yer alıyor. Yapılan değişiklikleri sürüm notu olarak yazıp size iletiyoruz, hangi dosyada ne değiştiğini geriye dönük takip edebiliyorsunuz. Ödeme adımını etkileyen hatalara aynı gün dönüyoruz.

  • Test ortamında geliştirme, kontrollü yayın geçişi
  • Sipariş akışının uçtan uca denenmesi
  • Platform güncellemelerine göre tema bakımı
  • Aylık sürüm notu ve destek kanalı

Nasıl ilerliyoruz

  1. ADIM 01

    Keşif ve veri incelemesi

    Mevcut temanızı, GA4 huni raporlarını, Search Console sorgu listesini ve Clarity oturum kayıtlarını inceliyoruz. Aynı kategoride satış yapan mağazaların ürün detay düzenini not alıyoruz. Bulguları sayfa bazında önceliklendirip hangi ekranın önce ele alınacağına birlikte karar veriyoruz.

  2. ADIM 02

    Tasarım sistemi ve ekranlar

    Figma'da token setini kurup ana ekranları tasarlıyoruz. Anasayfa, kategori, ürün detay, sepet ve ödeme ekranları mobil ile masaüstü karşılıklarıyla hazırlanıyor. İki revizyon turu süreç içinde tanımlı, onay sonrası tasarım kilitleniyor.

  3. ADIM 03

    Geliştirme ve test turu

    Onaylanan tasarımı test ortamında kodluyoruz. Her bileşeni cihaz setimizde deniyor, hız ölçümünü ve erişilebilirlik taramasını bu aşamada çalıştırıyoruz. Sipariş akışı baştan sona test edildikten sonra yayın tarihini takviminize göre planlıyoruz.

  4. ADIM 04

    Yayın ve ölçüm

    Temayı sipariş yoğunluğunun düştüğü bir saatte yayına alıyoruz. İlk hafta hata bildirimlerini günlük takip ediyoruz. Otuzuncu günün sonunda dönüşüm oranını, sepete ekleme oranını, sepet terk oranını ve LCP değerini önceki dönemle karşılaştırıyoruz.

Ne teslim ediyoruz

  • Figma tasarım dosyası ve bileşen kütüphanesi
  • Anasayfadan ödeme adımına kadar tüm şablonların mobil ile masaüstü çıktıları
  • ikas veya T-Soft üzerinde yayına hazır tema kodu
  • Yayın öncesi ve sonrası Core Web Vitals ölçüm raporu
  • WCAG 2.2 AA erişilebilirlik denetim listesi ve düzeltme kaydı
  • GA4 e-ticaret olay kurulum dokümanı
  • Tema yönetim kılavuzu ve ekip için ekran kayıtlı eğitim
  • Otuz günlük yayın sonrası hata düzeltme desteği

Neyi takip ediyoruz

LCP 2,5 saniye altı
Mobil ürün detay sayfasında en büyük içerik öğesinin yüklenme süresini saha verisiyle bu eşiğin altında tutuyoruz.
Kontrast oranı 4,5:1
Tema içindeki her metin ve arka plan eşleşmesi bu erişilebilirlik eşiğini geçtikten sonra yayına alınıyor.
Ortalama 4 hafta teslim
Keşif görüşmesinden yayına kadar geçen süre, tek dilli ve standart ürün yapısına sahip mağazalarda dört haftadır.
30 gün yayın sonrası takip
Yayından sonraki otuz gün boyunca hata bildirimlerini ve dönüşüm verisini izleyip düzeltmeleri ek ücret almadan uyguluyoruz.

Sıkça Sorulanlar

Aradığınız soru burada değil mi? Bize yazın.

İletişime geçin →

Hazır tema genel bir mağaza için yazılır, sizin ürün yapınızı bilmez. Özel Tema Tasarımı'nda varyant sayınıza, kategori derinliğinize, kampanya kurgunuza ve kargo kurallarınıza göre bileşen üretiyoruz. Kod tarafında kullanılmayan modüller bulunmadığı için sayfa ağırlığı düşük kalıyor. Bir değişiklik talebiniz olduğunda tema sağlayıcısının güncelleme takvimini beklemiyorsunuz, dosya sizde olduğu için düzenleme aynı hafta yayına giriyor.

Evet. Geliştirmeyi ayrı bir test ortamında yürütüyoruz, canlı mağazanız satışa devam ediyor. Yayın geçişini sipariş yoğunluğunun düştüğü bir saat diliminde planlıyoruz. Eski tema yedeği elimizde duruyor, beklenmedik bir durumda geri dönüş birkaç dakika sürüyor. Ürün kayıtlarınız, müşteri bilgileriniz, sipariş geçmişiniz ve kupon tanımlarınız bu süreçte yerinde kalıyor.

Standart bir mağazada süreç dört hafta civarında tamamlanıyor. Sizden beklediğimiz ilk katkı marka görselleri ile ürün fotoğrafı arşivi. İkinci nokta tasarım onayı, ekranları teslim ettikten sonra geri bildirimlerinizi üç iş günü içinde almak takvimi koruyor. Yayın öncesi test turuna operasyondan bir kişinin katılması yeterli oluyor.

Etkiliyor. Görsel boyutları, yazı tipi yükleme yöntemi, üçüncü taraf etiketleri ve tema içindeki JavaScript miktarı doğrudan LCP ile INP değerlerine yansıyor. Hazır temalarda hiç kullanmadığınız slider ve animasyon kodları da tarayıcıya iniyor. Özel temada bu yükü kaldırıyoruz. Farkı Search Console saha verisiyle yayın öncesi ve sonrası karşılaştırarak paylaşıyoruz.

Ağırlıklı olarak ikas ve T-Soft üzerinde çalışıyoruz, ekibimizin bu iki platformdaki bileşen yapısını iyi bilmesi teslim süresini kısaltıyor. WooCommerce ve Shopify projelerini de alıyoruz, bu durumda keşif aşaması yaklaşık bir hafta uzuyor. Kendi altyapımızı satmıyoruz. Mağazanız hangi platformda kuruluysa temayı orada geliştiriyoruz, taşınma zorunluluğu çıkarmıyoruz.

Zorunlu değil. Tema size teslim ediliyor, kaynak dosyalar sizde kalıyor. Yine de platformlar yılda birkaç kez sürüm güncellemesi yayınlıyor ve bu güncellemeler bazı bileşenleri etkileyebiliyor. Aylık bakım paketi alan markalarda kontrolü biz yapıyoruz. Paket almayan markalar tekil talep bazında da destek isteyebiliyor, saatlik çalışma olarak faturalandırıyoruz.

+90

Bize ulaşın

İletişim

Formu doldurun ya da doğrudan arayın, işletmenizi birlikte değerlendirelim.