Çalışmanın odağı
Bir e-ticaret arayüzü iki farklı okuma biçimini aynı sistemde buluşturur. Ürün grid'i karşılaştırma yapmaya yetecek kadar yoğun olmalı; detay sayfası ise bilgiyi belirgin bir sırayla sunmalı. Bu konsept çalışmayı, iki ekranın farklı görevlerini kaybetmeden sakin bir görsel dili paylaşıp paylaşamayacağını sınamak için hazırladım.
Kapsamı bilinçli olarak dar tuttum: ürün grid'i, detay sayfası ve bunları çevreleyen boş, yüklenme ve hata durumları. Böylece yeni ekranlar eklemek yerine hiyerarşi, boşluklama ve responsive davranış üzerine yoğunlaşabildim.
Yoğunluk, karşılaştırmayı kolaylaştırmalı
Grid yalnızca minimal görünmek için seyrek bırakılmadı. Yoğunluğunu, ziyaretçinin taraması ve karşılaştırması gereken içerik belirliyor. Tekrar eden yapı ritmi kuruyor; boşluklar ise her ürünü ayrı bir kutuya kapatmadan grupları birbirinden ayırıyor.
Detay sayfası aynı kuralları kullanıyor, fakat vurgu sırasını değiştiriyor. Ürünü anlamak için gereken bilgi önce geliyor. Destekleyici ayrıntılar görünür kalırken ilk bakışla yarışmıyor. Tek vurgu rengi, iki sayfa türünde de süs olarak değil öncelik göstergesi olarak çalışıyor.
- Dekoratif değil, anlamlı bir yoğunluğa sahip ürün grid'i.
- İkna gücünü hiyerarşiden alan bir detay sayfası.
- Ana ekranlar kadar özenle tasarlanmış boş, yüklenme ve hata durumları.
Ekran durumları aynı sistemin parçası
Yüklenme, boş ve hata ekranları çoğu zaman ana yerleşim bittikten sonra ele alınır. Bu çalışmada baştan kapsamın içindeydiler. Her durum, dolu grid ile aynı tipografi ölçeğini, boşluk aralıklarını ve vurgu düzenini koruyor. İçerik değişse de arayüz bir anda başka bir görsel dile geçmiyor.
Responsive kararları da aynı ilkeyi izliyor. Daralan ekran, içerik sırasını ve kullanılabilir alanı değiştiriyor; temel hiyerarşiyi değil. Bir genişlik için verilen kararın başka bir genişlikte kopukluk yaratmaması için grid ve detay sayfasını birlikte değerlendirdim.
Çalışma neyi gösteriyor
Bu çalışma, az sayıda yerleşim kuralının ürün yoğun bir arayüzü daha yüksek sesli bir görsel stile ihtiyaç duymadan düzenleyebildiğini gösteriyor. Sonraki işlere taşıdığım pratik sonuç da net: tek tek bileşenleri parlatmadan önce ritmi kurmak ve her ekran durumunu sona bırakılan bir iş değil, ürünün parçası olarak görmek.