BERA TOPRAKWEB TASARIMIKoleksiyon, marka geçmişi ve randevu aynı sitede.
Koleksiyonları, markanın geçmişini ve mağaza bilgilerini ayrı sayfalarda sunan, ziyaretçinin randevu almasına da olanak veren kuyumculuk sitesi.
- Üstlendiğimiz işler
- Markaya uygun arayüz tasarımı, içerik yapısının planlanması ve animasyonlar
- Kapsam
- Marka ve koleksiyonlar için 11 sayfalık web sitesi
Ziyaretçilerin aradığı bilgiler farklı.
Koleksiyon inceleyen, hediye arayan veya mağazadan randevu almak isteyen ziyaretçiler farklı bilgilere ihtiyaç duyuyor. Markanın geçmişi ve mağaza bilgileri de bu yapının bir parçası.
Bu içerikleri, birbirine bağlı ayrı sayfalar halinde düzenledik.
İçerikleri on bir sayfaya ayırdık.
Tüm sayfa ve bölüm kapsamı
- 01Ana sayfa
Markayı tanıtıyor ve ilgili sayfalara yönlendiriyor.
- 02Koleksiyon
Koleksiyonun genel görünümünü sunuyor.
- 03Ürün
Ürün ayrıntılarını ortak bir sayfa şablonunda gösteriyor.
- 04Evlilik
Evlilik için hazırlanan ürün seçkisini sunuyor.
- 05Hediye
Hediye seçimine yönelik ürünleri bir araya getiriyor.
- 06Marka
Markanın kimliğini ve karakterini anlatıyor.
- 07Marka geçmişi
Markanın geçmişini zaman çizelgesiyle anlatıyor.
- 08Yazılar
Yayımlanan yazıları listeliyor.
- 09Yazı ayrıntısı
Her yazıyı ortak bir makale şablonuyla sunuyor.
- 10İletişim
İletişim bilgilerini bir arada gösteriyor.
- 11Randevu
Mağazadan randevu almak için form içeriyor.
Yakut ve altın tonlarını ürünlerden aldık.
Laciverte yakın koyu bir ton ve nötr taş rengi üzerine, ürün fotoğraflarından seçtiğimiz yakut ve altın tonlarını ekledik. Altını ayrıntılarda; metinlerde ise yalnızca koyu zemin üzerinde kullandık.
Başlıklarda klasik tırnaklı, gövde metninde sade tırnaksız yazı karakterleri kullandık. Yazı boyutlarını ve boşlukları telefon ekranından geniş masaüstü ekranına kadar uyarlanacak şekilde düzenledik.
Kısa açılışlar, tutarlı geçişler.
- Açılış
- Logonun harfleri bulanıklıktan netliğe geçiyor; parıltılar ve ışık halkası beliriyor. Bu animasyon oturum başına bir kez oynatılıyor.
- Sayfa geçişleri
- Sayfa geçişlerinde kemer biçimli bir perde kullandık. Yeni sayfayı perde kapalıyken hazırlayıp başlıkların üst üste gelmesini ve geçişin kesik görünmesini önlemeyi amaçladık.
- Kaydırmaya bağlı görseller
- Video içinde ileri geri arama yapmak yerine, görüntü karelerini sayfanın kaydırılmasına bağladık. Bu yöntemle kaydırma sırasında titreme ve bulanıklığı önlemeyi amaçladık.
- Koleksiyon şeridi
- Şerit; fare tekerleğiyle, sürükleyerek, ok düğmeleriyle veya klavyeyle gezilebiliyor. Sayfanın kaydırılmasına bağlı çalışmıyor.
- Metin ve görseller
- Başlıklar harf harf, paragraflar satır satır görünüyor. Görseller, maske açılırken ölçek değiştirerek beliriyor.
Açılış yükünü azaltan kararlar.
- Çok sayfalı yapı
- Siteyi Vite üzerinde çok sayfalı uygulama (MPA) olarak kurduk. Üst çubuk, menü ve alt bilgi, küçük bir şablon eklentisiyle ortak kaynaktan alınıyor.
- Videolar
- Otomatik oynatmayı kaldırdık. Videolar ekranda görünür olduğunda yükleniyor, ekrandan çıktığında duruyor. Mobil cihazlar için daha küçük sürümler kullanılıyor.
- Yazı tipleri
- Yazı tipleri projenin kendi sunucusundan yükleniyor. Dil alt kümeleri ayrı dosyalarda tutuluyor ve önceden yükleniyor.
- İlk görünüm
- İlk görünüm için gerekli stiller sayfanın başında yükleniyor. Böylece açılışta beyaz bir ekranın anlık görünmesini önlemeyi hedefledik.
- Azaltılmış hareket
- Cihazın hareket azaltma tercihi açıksa animasyon süreleri sıfırlanıyor ve içerik sabit gösteriliyor.
Yeni sayfalar aynı yapıya eklenebiliyor.
Koleksiyon, evlilik, hediye ve randevu sayfaları ortak bir tasarım ve animasyon düzeni kullanıyor. Yeni sayfalar, var olan parçalar üzerine kurulabiliyor.
Benzer bir proje düşünüyorsanız bize yazın. Ne yapmak istediğinizi kısaca anlatmanız yeterli.
E-posta gönderin