Online ürün tasarım stüdyosu: müşterinin tişörtü tarayıcıda tasarladığı e-ticaret

Kişiye özel ürün satan bir e-ticaret sitesinde ürün sayfası yetmez; müşteri ürünü satın almadan önce kendisi oluşturmak ister. Bunun için tarayıcıda çalışan bir tasarım stüdyosu gerekir ve bu stüdyo, sitenin geri kalanından çok daha zor bir yazılımdır. Bu yazı, ABD pazarına özel baskılı tekstil satan TshirtLoop platformunu geliştirirken öne çıkan kararları ve benzer bir proje planlayanların baştan cevaplaması gereken soruları topluyor.

Önce akış: tasarım, adet, onay

TshirtLoop, ABD'deki okul, kulüp ve takımlara özel baskılı tişört, sweatshirt ve şapka satan uçtan uca bir e-ticaret platformu. Projenin ağırlık merkezi ürün sayfası değil, tarayıcıda çalışan tasarım stüdyosu. Stüdyoyu üç adımlı bir akış üzerine kurduk: tasarım, adet, onay.

Akışı adımlara bölmenin sebebi, kullanıcının aynı anda vermesi gereken karar sayısını azaltmak. Tasarım adımında yalnızca ürünün görünüşüyle uğraşılıyor; beden dağılımı ve adet ikinci adımda, fiyatın son hali ve kontrol üçüncü adımda geliyor. Tasarım ekranına beden tablosu ve fiyat dökümü sıkıştırılan editörler kalabalıklaşır ve kullanıcı ilk adımda kaybolur.

• Ürünün ön ve arka yüzü için ayrı baskı alanları; kullanıcı iki yüzde bağımsız çalışıyor.
• Hazır grafik kütüphanesi, kendi dosyasını yükleme ve metin ekleme.
• Geri alma, yineleme, yakınlaştırma ve tasarımı kaydetme.
• Ürün bazında renk varyantları ve beden aralığı.

Geri alma ve tasarım kaydetme ilk bakışta lüks gibi görünür ama editörün temel özellikleridir. Okul veya takım adına sipariş veren kişi tasarımı genelde başkalarına onaylatır; kaydedip sonra dönemediği bir editörde bu süreç işlemez.

Tuval piksel değil, inç ile çalışmalı

Online tasarım stüdyosunun teknik olarak en zor kısmı, ekranda görünenin üretimde birebir karşılığının olmasıdır. Kullanıcının ekranındaki 300 piksel, telefonda ve geniş monitörde farklı bir fiziksel boyuta denk gelir; baskı makinesi ise piksel tanımaz, gerçek ölçü bekler.

Bu yüzden TshirtLoop'ta tuvalin koordinat sistemi gerçek baskı ölçüsü üzerine kurulu: her eleman inç cinsinden boyutlandırılıyor, ekrandaki görüntü bu ölçünün yalnızca bir yansıması. Her ürünün kendine özel bir baskı alanı sınırı var ve bu sınır editörde canlı olarak gösteriliyor. Yerleştirilen tasarım bu alanın dışına taşamıyor.

Aşağıdaki basitleştirilmiş örnek fikri gösteriyor: model inç cinsinden tutulur, ekrana çizerken ölçek uygulanır ve taşma kontrolü ekran pikseli üzerinden değil, inç cinsinden modelde yapılır.

// Model gerçek ölçüde tutulur; ekran yalnızca ölçeklenmiş bir görünümdür.
type Eleman = { x: number; y: number; genislik: number; yukseklik: number } // inç
type BaskiAlani = { genislik: number; yukseklik: number } // ürüne özel, inç

// Ekrana çizim: inç -> piksel, mevcut tuval genişliğine göre
const olcek = (tuvalPx: number, alan: BaskiAlani) => tuvalPx / alan.genislik

// Taşma kontrolü modelde yapılır, cihazdan bağımsızdır
function sinirla(e: Eleman, alan: BaskiAlani): Eleman {
  const genislik = Math.min(e.genislik, alan.genislik)
  const yukseklik = Math.min(e.yukseklik, alan.yukseklik)
  return {
    genislik,
    yukseklik,
    x: Math.max(0, Math.min(e.x, alan.genislik - genislik)),
    y: Math.max(0, Math.min(e.y, alan.yukseklik - yukseklik))
  }
}

Aynı mantık yüklenen görseller için de geçerlidir. Kullanıcı düşük çözünürlüklü bir logoyu büyük bir alana yaydığında ekranda kabul edilebilir görünür, baskıda bulanık çıkar. Görselin piksel boyutu ile basılacağı inç boyutunu karşılaştırıp kullanıcıyı yükleme anında uyarmak, sonradan iade tartışmasından çok daha ucuzdur.

Metin editörü: yedi yazı sistemi

Tekstil baskısında metin, grafikten daha sık kullanılır: takım adı, numara, okul ismi. TshirtLoop'un metin editörü yedi yazı sistemini destekliyor: Latin, Yunan, Arap, İbrani, Çin, Japon ve Kore alfabeleri.

Yunan alfabesi için ayrı bir harf paleti var. Bunun sebebi teknik değil, pazarla ilgili: ABD üniversitelerindeki Greek life, yani fraternite ve sorority topluluklarının tekstil talebi platformun ana kullanım senaryolarından biri. Bu kullanıcıların çoğu Yunan klavyesi kullanmıyor; harfleri bir paletten seçebilmek, onlar için editörün kullanılabilir olup olmamasını belirliyor.

Genel olarak bilinmesi gereken bir nokta: Arap ve İbrani yazısı sağdan sola akar, Çin, Japon ve Kore yazı tipleri ise Latin yazı tiplerinden çok daha büyük dosyalardır. Çok yazı sistemli bir editörde yazı tiplerinin ancak ihtiyaç duyulduğunda yüklenmesi ve sağdan sola metnin hizalamasının ayrıca test edilmesi gerekir.

Baskı yöntemi fiyatı ve üretim dosyasını değiştirir

TshirtLoop'ta kullanıcı baskı yöntemi olarak DTF baskı ile nakış arasında seçim yapıyor ve seçim fiyata yansıyor. Katalog Bella+Canvas, Gildan, Comfort Colors, Champion gibi markaların ürünlerini tişört, sweatshirt ve polar, dokuma gömlek, polo ve triko, alt giyim ve şapka kategorileri altında topluyor; her ürünün kendi renk varyantları, beden aralığı ve adede bağlı fiyatlandırması var.

Yöntem seçimi yalnızca fiyatı değil, üretime giden dosyayı da değiştirir. Bu genel bir sektör gerçeği: DTF baskı için şeffaf arka planlı, yeterli çözünürlükte bir görsel yeterlidir; nakışta ise tasarımın dikiş makinesinin okuyacağı formata dönüştürülmesi (dijitalleştirme) gerekir ve ince detaylar, küçük yazılar her zaman nakışa uygun değildir. Editör bu farkı bilmeli ve kullanıcıyı yöntem seçerken ona göre yönlendirmeli.

• Adede bağlı fiyat, adet adımında anlık güncellenmeli; kullanıcı onay ekranına gelmeden toplamı görmeli.
• Yöntem değiştiğinde fiyat değişikliği görünür olmalı, sessizce uygulanmamalı.
• Üretime giden kayıt; ürün, renk, beden dağılımı, yöntem ve her yüzün fiziksel ölçülü tasarımını birlikte taşımalı.

ABD pazarı: ölçü, vergi, kargo

Yurt dışı pazara satış, siteyi çevirmekten fazlasıdır. TshirtLoop'ta tuvalin inç ile çalışması bu açıdan da doğal bir tercih: ABD'de ölçüler inç ile ifade edilir. Platformda ayrıca promosyon kodu ve geri sayım içeren bir kampanya altyapısı bulunuyor.

Genel olarak ABD'ye satış yapan bir mağazanın baştan hesaba katması gerekenler şunlar: satış vergisi eyalete göre değişir ve eyaletten eyalete farklı kurallar içerir; adres formu eyalet ve ZIP kodu alanlarıyla ABD formatına uygun olmalı; kişiye özel ürünlerde iade politikası standart üründen farklıdır ve ödeme öncesi açıkça gösterilmelidir. Ödeme ve kargo sağlayıcısı seçimi pazara ve üretimin nerede yapıldığına göre değişir; bu kararı editör geliştirilmeden önce netleştirmek, sipariş kaydının yapısını doğru kurmayı sağlar.

Editör ağır, mağaza hafif kalmalı

Tasarım stüdyosu sitenin en ağır parçasıdır: tuval motoru, grafik kütüphanesi, çok sayıda yazı tipi. Bu yükün katalog ve ürün sayfalarına taşınmaması gerekir. Ziyaretçilerin çoğu önce katalogda gezinir; editörün kodu yalnızca kullanıcı tasarıma başladığında yüklenmelidir.

TshirtLoop'ta arayüz TypeScript ile yazılmış React, uygulama tarafında Node.js, veri katmanında PostgreSQL kullanılıyor ve altyapı Docker ile konteynerleştirilmiş. Hangi teknolojiyle kurulursa kurulsun ilke aynı: editörün ağırlığı yalnızca editörü kullanan ziyaretçiye yüklenmeli, katalogda gezinen ziyaretçi bunun bedelini ödememeli.

Başlamadan önce karar listesi

1. Tasarımın kayıt formatı fiziksel ölçü mü (inç veya santimetre), yoksa piksel mi?
2. Her ürün için baskı alanı sınırları tanımlı mı ve editör taşmayı engelliyor mu?
3. Hangi baskı yöntemleri sunulacak ve her yöntemin üretim dosyası gereksinimi ne?
4. Düşük çözünürlüklü görsel yüklendiğinde kullanıcı yükleme anında uyarılıyor mu?
5. Hedef kitlenin ihtiyaç duyduğu yazı sistemleri hangileri ve yazı tipleri ihtiyaç anında mı yükleniyor?
6. Adede ve yönteme bağlı fiyat, onay adımından önce kullanıcıya gösteriliyor mu?
7. Hedef pazarın vergi, adres formatı ve iade kuralları sipariş akışına yansıtıldı mı?
8. Editörün kodu katalog sayfalarından ayrı yükleniyor mu?

Bu listenin ilk iki maddesi projenin geri kalanını belirler. Ekran pikseli üzerine kurulan bir editörü sonradan fiziksel ölçüye geçirmek, editörü yeniden yazmak demektir. Doğru başlangıç noktası tuval değil, üretim tarafının neye ihtiyaç duyduğudur.

• #e-ticaret
• #tasarım editörü
• #kişiye özel ürün
• #yurt dışı satış