BERA TOPRAKWEB TASARIMIKoleksiyonun karakterini yansıtan bir web sitesi.
Koleksiyonları, ürün ayrıntılarını ve markanın tasarım anlayışını görsel ağırlıklı bir sayfada anlatan moda sitesi.
- Üstlendiğimiz işler
- Görsel tasarım, arayüz tasarımı ve animasyonlar
- Kapsam
- Sekiz bölümlü, görsel odaklı tek sayfalık web sitesi
Koleksiyonun yanında markayı da tanıtmak.
Sayfayı koleksiyonları, ürünleri ve markanın tasarım anlayışını birlikte anlatacak şekilde kurguladık. Görsel düzenin, markanın mağazası ve koleksiyon çekimleriyle aynı dili taşımasını amaçladık.
Sade bir palet, geniş boşluklar.
Sıcak kemik tonlarını tek bir altın tonuyla ve koyu mürekkep rengiyle tamamladık. Siyahı yalnızca koyu panellerde kullandık.
Tek bir yazı ailesi kullandık. Başlıkları ince ve büyük; etiketleri küçük boyutlu, büyük harfli ve geniş aralıklı düzenledik. Bölümler arasındaki ayrımı yazı ağırlığı, boyut ve boşluklarla kurduk.
Sekiz bölümde koleksiyonu tanımak.
Tüm sayfa ve bölüm kapsamı
- 01Açılış
Tam ekran video üzerinde metin sol altta yer alıyor.
- 02Markanın yaklaşımı
Markanın yaklaşımını anlatan paragraf, kelime kelime açılan bir animasyonla gösteriliyor.
- 03Koleksiyon
Üç sütunlu düzende, üzerine gelinen sütun genişliyor.
- 04Sezon seçkisi
Sezon ürünleri oval biçimli üç boyutlu bir vitrinde sunuluyor.
- 05Öne çıkan ürün
Dikey ürün kartına, ince çizgilerle ayrılmış özellik satırları eşlik ediyor.
- 06Koleksiyon çekimleri
Görseller kesintisiz bir yatay şeritte ilerliyor.
- 07Atölye
Alanın yarısı görsele, yarısı metne ayrılıyor. Alıntı ve imza, atölye anlatımını tamamlıyor.
- 08Bülten
Alt çizgili e-posta alanı ve büyük marka yazısıyla sayfa tamamlanıyor.
Sayfa boyunca aynı animasyon düzeni.
- Açılış animasyonu
- Marka işaretinin çizgileri beliriyor, içi altın rengiyle doluyor ve işaret kendi ekseninde dönüyor. Marka adı maskenin içinden yükselirken açılış perdesi kalkıyor.
- Üst üste gelen bölümler
- Yeni bölüm, kemerli köşeleriyle alttan gelerek öncekinin üzerine yerleşiyor. Arkadaki bölüm geriye çekiliyor.
- Üç boyutlu ürün vitrini
- Kartlar merkeze uzaklıklarına göre dönüp geriye çekiliyor. Silindirik bir düzene yerleştirilmiş gibi görünen ürünler sürükleyerek gezilebiliyor.
- Markanın yaklaşımını anlatan metin
- Metin görünür olduğunda kelimeler bir kez hareket ediyor. Animasyon, sayfanın kaydırılmasına bağlı ilerlemiyor.
- Koleksiyon çekimleri
- Fotoğraflar kesintisiz ilerleyen yatay bir şeritte gösteriliyor.
Uzun sayfada ortak bir düzen.
Bölümlerde ortak bir görünme animasyonu ve panel düzeni kullandık. Sayfa kaydırmasına bağlı hareketleri sınırlı tuttuk. Cihazın hareket azaltma tercihi açıksa animasyonlar kapanıyor ve içerik sabit gösteriliyor.
Benzer bir proje düşünüyorsanız bize yazın. Ne yapmak istediğinizi kısaca anlatmanız yeterli.
E-posta gönderin