ikas tema tasarımı
Hazır temanızı markanıza göre özelleştirir ya da özel tema için mağazanın görünümünü ve alışveriş akışını baştan tasarlarız. Renkten ürün kartına, kategori düzeninden mobil akışa kadar müşterinin gördüğü her alanı ürün yapınıza göre kurarız.
Hazır tema 1-2 haftaİlk görüşme ücretsiz
ikas tema tasarımı nedir?
ikas tema tasarımı, mağazanızın renklerinden ürün kartlarına, kategori yapısından mobil alışveriş akışına kadar müşterinin gördüğü ve kullandığı arayüzün markanıza göre planlanmasıdır. Çalışmayı mevcut bir hazır tema üzerinde tema editörü ve gerekli kod düzenlemeleriyle uygulayabilir veya sıfırdan geliştirilecek özel tema için tüm tasarım kararlarını oluşturabiliriz. Hazır tema uyarlaması genellikle 1-2 hafta sürer; tasarım hazır temanın yapısını aşıyorsa geliştirme özel tema projesi olarak planlanır.
Tasarımın üç anı.
- Bordo#5C0A10
- Krem#F1EDE7
- Turuncu#F27A1A
- Mürekkep#1A1A1A
- Kapadokya taşı#C7A589
- Espresso#2B2823
Renk ve yazı tipi
Markanın tonunu renk ve tipografi kararlarıyla mağazaya taşırız.
Tarzım Süper · ana sayfa ve marka paleti
- Bordo#5C0A10
- Krem#F1EDE7
- Turuncu#F27A1A
- Mürekkep#1A1A1A
- Kapadokya taşı#C7A589
- Espresso#2B2823
Ürün kartı
Ürünü karşılaştırmayı kolaylaştıran kart yapısını kategoriye göre tasarlarız.
Tarzım Süper · Elbiseler kategorisi
Mobil akış
Küçük ekranda karar noktalarını doğru sırayla yeniden kurarız.
Tarzım Süper · telefonda alışveriş turu
ikas tema tasarımında mağazanın tamamını birlikte ele alırız.
Ana sayfa
İlk karşılaşmayı markaya göre tasarlarız.
Ana sayfada banner, kategori, kampanya, ürün grubu, içerik ve güven alanlarının hangi sırayla gösterileceğini belirleriz.
Kategori
Ürünleri karşılaştırmayı kolaylaştıran kategori yapısını kurarız.
Kategori sayfasında filtrelerin, sıralamanın, ürün kartlarının, renk seçeneklerinin ve ürün bilgilerinin hangi yoğunlukta gösterileceğini belirleriz.
Ürün sayfası
Satın alma kararındaki bilgileri doğru sırada gösteririz.
Ürün görselleri, varyant seçimi, fiyat, açıklama, kargo bilgisi, güven alanları ve ek içeriklerin yerleşimini birlikte tasarlarız.
Sepet ve ödeme öncesi
Sepete geçişi daha açık ve anlaşılır hâle getiririz.
Sepette ürün özeti, kampanya bilgileri, kargo mesajları ve müşterinin satın alma öncesinde ihtiyaç duyduğu açıklamaları gereksiz kalabalık oluşturmadan düzenleriz.
Mobil
Tasarımı masaüstünden küçültmek yerine mobil için yeniden kurarız.
Mobilde menü, ürün kartı, filtre, varyant seçimi, sepete ekleme alanı ve kampanya bloklarının sırasını ayrıca ele alırız.
Tema editörü
Hazır temada neyi kendiniz değiştirebilirsiniz, nerede tasarım gerekir?
Hazır bir ikas temasında mağaza sahibi tema editöründe çalışır: bölümleri ekleyip sıralar, banner, metin ve görselleri değiştirir, temanın sunduğu renk ve yazı tipi ayarlarını kullanır. Yeni tema altyapısı ikas Studio'da mağaza sahiplerine yalnız İçerik modu açıktır; Tasarım, Blueprint ve Kod modları tema geliştiricilere aittir. Editörde hangi ayarın bulunduğu seçilen temaya göre değişir; adımları ikas tema düzenleme yazımızda anlattık.
Tasarım desteği, editördeki ayarlar yettiği halde mağaza markanızdan çok temanın demosuna benziyorsa ya da ürün kartı, kategori düzeni ve mobil akış ürününüzü anlatmıyorsa gerekir. Biz önce temanın sunduğu alanlarla ne yapılabileceğini çıkarır, editörün karşılamadığı küçük ihtiyaçları kodla tamamlarız; sayfa yapısı tamamen değişecekse tasarımı özel tema için kurarız.
Bölümler
- Duyuru çubuğu
- Slider
- Kategori vitrini
- Ürün listesi
- Banner
- Blog yazıları
Görünüm
Renkler
Yazı tipi
Aa▾Gerçek mağazalarda tema tasarımı kararlarını nasıl verdiğimize yakından bakın.
Tam Öğün
Ozy temasını ürün yapısına göre yeniden düzenledik.
Tam Öğün'de Ozy hazır temasının yapısını koruyup atıştırmalık ürünlerin daha açık sunulacağı bir sayfa düzenine dönüştürdük. Ana sayfadaki içerik sırasını, ürün sunumunu ve marka görünümünü tema editörü üzerinden özelleştirerek hazır temayı mağazanın kendi tasarım diline yaklaştırdık.
Ozy hazır teması üzerinde
- Orman yeşili
- Açık yeşil zemin
- Turuncu
- Koyu yeşil metin
- Logo sarısı
- Logo mavisi
Tema seçimi
Hazır temayı özelleştirir veya tasarımı sıfırdan kurarız.
Hazır ikas temaları, ihtiyaç duyduğunuz sayfa yapıları mevcutsa ve marka görünümünü renk, tipografi, görseller, bölümler ve sınırlı kod dokunuşlarıyla oluşturabiliyorsak yeterli olur. Ürün sunumu, kategori düzeni veya mobil akış hazır temanın yapısından belirgin biçimde ayrılıyorsa özel tema tasarımı gerekir. Bu durumda önce mağazanın tasarım sistemini kurar, ardından geliştirme sürecini ayrı bir kapsam olan ikas özel yazılım temaya taşırız.
Tam Öğün · Ozy hazır teması üzerinde özelleştirilmiş ana sayfa
2 yol
hazır temayı özelleştirir veya özel tasarım oluştururuz
1-2 hafta
hazır tema uyarlamasının genellikle sürdüğü zaman
1 tasarım dili
tüm sayfalar aynı görsel ve işlevsel sistemde birleşir
ikas tema tasarımını dört adımda ilerletiriz.
Mağazayı ve ürün yapısını inceleriz.
Önce ürün çeşitlerini, kategori yapısını, mevcut içerikleri, kampanyaları ve müşterinin satın alma sırasında ihtiyaç duyduğu bilgileri inceleriz. Kullanılan ikas tema yapısını ve tema editörü seçeneklerini de değerlendiririz. Böylece tasarım kararlarını yalnız görsel tercihlere değil, mağazanın gerçek kullanımına göre oluştururuz.
Tasarım dilini ve sayfa düzenini oluştururuz.
Renk, tipografi, boşluk, görsel kullanımı, ürün kartı ve sayfa bölümleri için ortak bir sistem belirleriz. Ardından ana sayfa, kategori, ürün sayfası, sepet ve mobil görünümün birbirine nasıl bağlanacağını tasarlarız. Her ekranı ayrı tasarlamak yerine mağazanın tamamında aynı dili sürdürecek bir yapı kurarız.
Tasarımı tema üzerinde uygularız.
Hazır tema özelleştirmede bölümleri ikas tema editörü üzerinden düzenler, editörün karşılamadığı küçük ihtiyaçlarda gerekli kod dokunuşlarını uygularız. Tasarım hazır tema sınırlarının dışına çıkıyorsa uygulama aşamasını özel yazılım temaya aktarırız. Böylece tasarım ile geliştirme kapsamını birbirine karıştırmadan ilerleriz.
Mobil ve masaüstü görünümü test edip teslim ederiz.
Uygulama tamamlandığında farklı ekran boyutlarında ürün kartlarını, menüleri, filtreleri, görselleri, varyant alanlarını ve temel alışveriş akışını kontrol ederiz. Görsel ölçüleri ile kullanılan dosyaların uyumunu da inceleriz. Son düzenlemeleri yaptıktan sonra mağazayı kullanıma hazır biçimde teslim eder ve yönetim tarafını aktarırız.
Mağazanız için doğru kapsamı birlikte netleştirelim.
İlk görüşme online ve ücretsiz. Formu doldurabilir ya da WhatsApp'tan yazabilirsiniz.
Tema tasarımında görünüm kadar kullanım kararlarını da birlikte veririz.
- Ceviz#3D2A17Keten#F7F1E8Meşe#C3A075Mürekkep#1A1A1AKoyu Meşe#8A6844Traverten#CFBBA4
Massada · mağazanın renk sistemi (sitenin renk kodlarından)
Markanın mevcut renklerini ve yazı karakteri yaklaşımını mağazadaki başlık, metin, buton, arka plan ve vurgu alanlarına dağıtırız. Her bölümde yeni bir stil üretmek yerine tekrar eden bir sistem kurarız. Böylece ana sayfadan ürün detayına kadar daha tutarlı bir görünüm oluşur.
Tam Öğün · ürün kartının yakın planı
Ürün kartında hangi bilginin ilk bakışta görünmesi gerektiğini mağazanın kategorisine göre belirleriz. Renk, beden, indirim bilgisi, ikinci görsel veya kısa ürün bilgisinin gerekip gerekmediğine birlikte karar veririz. Kartı yalnız görsel bir kutu olarak değil, kategori sayfasındaki temel karar noktası olarak tasarlarız.
Tarzım Süper · aynı açılış görselinin geniş ve kare sürümü
Her ikas teması aynı slider, banner ve içerik oranlarını kullanmadığı için görselleri seçilen temanın bölümlerine göre planlarız. Masaüstü ve mobil kırpmaları ayrıca kontrol eder, önemli ürün veya metin alanlarının görünüm dışında kalmasını önleriz. Bölüm bölüm ölçüler ikas tema görsel boyutları rehberimizde.
Massada · Fırsat Ürünleri başlığı ve kargo geri sayımı
İndirim, ücretsiz kargo, yeni sezon veya kategori kampanyalarının nerede gösterileceğini mağazanın içerik yoğunluğuna göre belirleriz. Her mesajı büyük banner hâline getirmek yerine önem sırasına göre farklı sunum biçimleri kullanırız. Kampanya alanlarını ürün keşfini kesmeden müşterinin ihtiyaç duyduğu noktalara taşırız.
Tam Öğün · ürün sayfasındaki güven alanı
Kargo, iade, ödeme yöntemleri ve teslimat gibi bilgileri yalnız altbilgide bırakmak yerine ilgili karar noktalarında gösteririz. Ürün sayfası ve sepet çevresindeki güven alanlarının içeriğini mağazanın gerçek koşullarına göre düzenleriz. Böylece müşteri satın alma öncesinde aradığı temel bilgileri sayfa içinde daha kolay bulur.
Massada · Videolarla Keşfedin şeridinde oynayan video kartı
Büyük görseller, videolar ve yoğun içerik kullanımı tasarımın parçası olsa da her alanın aynı ağırlıkta yüklenmesi gerekmez. Görsel seçimlerini kullanım amacına göre yapar, gereksiz medya yoğunluğunu azaltırız. Tasarım kararlarını verirken mağazanın görünümü ile sayfanın günlük kullanım performansını birlikte değerlendiririz.
Massada · mağazanın renk sistemi (sitenin renk kodlarından)
Hazır tema özelleştirme mi, özel tema tasarımı mı?
İki yol da ikas tema tasarımıdır; fark, tasarımın hangi yapı üzerinde uygulandığındadır. Kararı yalnız görünüşe göre değil, mağazanın ihtiyaç duyduğu sayfa yapısına ve kimin yöneteceğine göre veririz.
| Konu | Hazır tema özelleştirme | Özel tema tasarımı |
|---|---|---|
| Süre | Mevcut yapı üzerinden daha kısa ilerler | Tasarım ve geliştirme ayrı aşamalarda ilerler |
| Maliyet mantığı | Mevcut tema altyapısından yararlanarak kapsamı sınırlar | Özel arayüz ve geliştirme kapsamına göre belirlenir |
| Esneklik | Tema editörü ve mevcut bileşenlerle sınırlı kalır | Sayfa yapıları ihtiyaca göre sıfırdan tasarlanır |
| Tema güncellemeleri | Hazır temanın güncel yapısı üzerinden devam eder | Özel kod yapısına göre ayrıca yönetilir |
| Kim yönetir | İçeriklerin çoğunu tema editöründen siz yönetirsiniz | Yönetilebilir alanlar geliştirme sırasında ayrıca planlanır |
| Ne zaman uygun | Standart sayfa yapıları ihtiyacınızı karşılıyorsa | Ürün sunumu farklı bir kurgu gerektiriyorsa |
| Sonraki adım | Tema düzenlemeleriyle mağazayı kullanmaya devam edersiniz | Tasarım özel yazılım tema aşamasına aktarılır |
Teslimde neler alırsınız?
Arayüz sistemi
Markanıza göre düzenlenmiş renk, tipografi ve arayüz sistemi
Ana sayfa
Ana sayfa bölümlerinin kullanım amacına göre kurgulanmış düzeni
Kategori ve ürün kartı
Kategori ve ürün kartları için belirlenmiş tasarım yapısı
Ürün sayfası
Ürün sayfasındaki temel satın alma alanlarının düzenlenmiş hâli
Mobil
Mobil ekranlar için ayrıca kontrol edilmiş sayfa akışları
Görsel ölçüleri
Kullanılan bölümler için uygulanabilir görsel ölçü listesi
Editör aktarımı
Güncelleyebileceğiniz tema editörü alanlarının kullanım aktarımı
Mevcut tema mağazanızı taşımıyorsa tasarımı yeniden ele alırız.
Mağazanız markanızdan bağımsız görünüyorsa yeniden tasarlarız.
Logo ve renk değişmiş olsa bile mağaza hâlâ seçilen hazır temanın demo görünümünü taşıyorsa tasarım sistemini yeniden ele alırız. Bölüm sırası, tipografi, ürün sunumu ve görsel kullanımını markanızın gerçek içeriklerine göre düzenleriz.
Ürünlerinizi anlatmak için mevcut alanlar yetmiyorsa yeniden kurgularız.
Ürünleriniz beden, renk, kullanım biçimi, teknik detay veya video gibi ek anlatım gerektiriyorsa standart ürün kartı ve ürün sayfası yetersiz kalabilir. Gerekli bilgilerin hangi aşamada gösterileceğini belirler, hazır temada uygulanabiliyorsa özelleştirir, farklı bir yapı gerekiyorsa özel tasarıma dönüştürürüz.
Mobilde sayfa gereğinden uzun veya yoğun görünüyorsa sadeleştiririz.
Masaüstünde dengeli görünen büyük bannerlar, çok sütunlu alanlar ve uzun içerikler mobilde alışveriş akışını yavaşlatabilir. Telefon görünümündeki bölüm sırasını, kart ölçülerini, menüleri ve aksiyon alanlarını ayrıca değerlendirir, mobil kullanım için daha kontrollü bir yapı tasarlarız.
Canlı mağazalar
Tasarladığımız ikas mağazalarına yakından bakın.
Örnek hesap: tasarım düzenlemesi ciroya nasıl yansır?
Temsili bir mağaza üzerinden hesapladık. Rakamlar örnektir, gerçek bir müşterinin verisi değildir; sonuç sektöre, rekabete ve başlangıç durumuna göre değişir. Kendi mağazanızın aylık ziyaret, dönüşüm oranı ve ortalama sepet tutarıyla aynı hesabı yapabilirsiniz.
| Kalem | Önce (örnek) | Sonra (örnek) |
|---|---|---|
| Aylık ziyaret | 10.000 | 10.000 |
| Dönüşüm oranı | %1,0 | %1,3 |
| Aylık sipariş | 100 | 130 (+%30) |
| Ortalama sepet | 700 TL | 760 TL |
| Aylık ciro | 70.000 TL | 98.800 TL (+%41) |
ikas tema tasarımı hakkında sık sorulan sorular
Kaynaklar
- Hazır ikas temalarında renk, tipografi, banner, bölüm sırası ve diğer görünüm ayarlarının nasıl yönetildiğini görmek için ikas'ın resmi tema düzenleme rehberi incelenebilir. Tema içinde kullanılan slider, banner ve diğer görsellerin önerilen ölçüleri için tema görsel boyutları dokümantasyonu referans alınabilir.
- Tema tasarımı sırasında ürün ve kategori sayfalarındaki başlık ve açıklama gibi temel arama görünümü alanlarını kontrol etmek için ikas SEO alanları dokümantasyonu kullanılabilir. Hazır tema düzenlemesinin ötesine geçen özel geliştirme ihtiyaçlarında ise ikas'ın geliştirici tarafındaki ikas Studio dokümantasyonu teknik yapıyı anlamak için başvurulabilecek resmi kaynaktır. Yeni tema altyapısında mağaza sahibinin hangi modu kullandığı da aynı dokümanın genel bakış bölümünde anlatılır.
ikas mağazanızın tasarımını birlikte yeniden kuralım.
Hazır temanızı markanıza göre özelleştirmek veya özel tema için yeni bir tasarım dili oluşturmak istiyorsanız mevcut mağazanızı ve ihtiyaçlarınızı inceleyelim. Ürün yapınızı, kullandığınız ikas temayı ve değiştirmek istediğiniz alanları değerlendirerek uygulanacak yolu birlikte belirleriz.