Online mağazanızın ürün sayfası için yeni tasarım: ekran görüntülerinden HTML ve CSS'de net bir ürün sayfasına

Örnek sonuç

Standart paket için örnekTamamını göster

New design of a bakery's home page from a screenshot

Before: the screenshot the client sent

After: the new page

Files: a ZIP archive with index.html, the styles and 2 pictures drawn for the page, ready to replace the old page on the client's hosting. The pictures here are screenshots of the pages.

Client: Miller Street Bakery, a family bakery. Task: give the old home page a fresh, modern look, keeping the name, the warm brown colour, the opening hours and the list of what they bake, with big pictures of bread and a clear order button.

Müşteri ve tüm ayrıntılar kurgusaldır.

Bu hizmet hakkında

Bir ürün sayfası küçük bir telefon ekranında satış yapmalıdır: fotoğraf, fiyat, seçenekler ve satın al düğmesi aynı anda görünmeli, tereddütlere cevaplar da bir kaydırma uzaklıkta olmalıdır. Mevcut ürün sayfanızın ekran görüntülerini yükleyin, onu yeniden tasarlayıp hazırlayalım: net bir galeri alanı, ad, fiyat ve seçenekler, kısa bloklar halinde faydalar, okunabilir bir özellikler tablosu, teslimat ve iade bilgileri, sayfanızda zaten bulunan değerlendirmeler ve bir SSS; renklerinizde ve logonuzla. Ürün fotoğrafları asla çizilmez: yeterince netse ekran görüntülerinizden gelir ya da orijinalleriniz için işaretli yerler olarak kalır; yeni görseller yalnızca simgeler, bannerlar ve arka planlar içindir. Fiyatlar, stok ve özellikler tam verdiğiniz gibi kalır. Sayfada sepet veya ödeme yoktur: satın al düğmesi mağazanızın kendi bağlantısına gider.

Neler dahil

• Neler alırsınızYeni sayfanın HTML ve CSS'li bir ZIP arşivi, stilleri ve görselleri, barındırmanıza yüklemeye hazır; sipariş sayfasında bilgisayar ve telefonda önizleme. Premium'da tek tarzda üç sayfa.
• Satın alma alanı görünürdeFotoğraf, fiyat, seçenekler ve düğme aynı anda
• Okunabilir özelliklerTelefona sığan bir tablo
• Yalnızca gerçek ürünlerSizin fotoğraflarınız, asla çizilmiş olanlar değil
• Teslimat ve iadeKoşullarınız, net bir yerde
• Telefona uyumlu, temiz kodSade HTML ve CSS

Nasıl çalışır

1. 1
   Ekran görüntüleriÜrün sayfasının ekran görüntülerini yüklersiniz ve nelerin değişeceğini söylersiniz
2. 2
   Yeniden tasarımSayfayı yeniden tasarlar, görselleri çizer ve hazırlarız
3. 3
   ÖnizlemeYeni sayfayı eskisiyle bilgisayarda ve telefonda karşılaştırırsınız
4. 4
   ArşivArşivi indirir, paketiniz kapsamında değişiklik istersiniz

Sizden neler gerekiyor

PNG, JPEG veya WebP formatında en fazla 5 görsel: yukarıdan aşağıya ürün sayfanızın ekran görüntüleri ve isterseniz logonuz ayrı bir dosya olarak. Alıcının önce neyi görmesi gerektiğini, ürünün hangi seçeneklere ve özelliklere sahip olduğunu, teslimat ve iade koşullarınızı, hangi değerlendirmelerin gösterilebileceğini, satın al düğmesinin nereye gitmesi gerektiğini, şu an nelerden hoşlanmadığınızı ve tarz için ipucu olarak beğendiğiniz bir mağazayı yazın.

Size soracaklarımız:

• Hangi ürün sayfası?
• Alıcı önce neyi görmeli?
• Seçenekler ve özellikler
• Şu an neyi beğenmiyorsunuz?
• Satın al düğmesi nereye gidiyor?

Paketleri karşılaştırın

Sorular ve yanıtlar

Yanıtınızı bulamadınız mı? Bize sorun