Konu Başlıkları
Yükleniyor...

Portföy Sitesinde Ekran Yapısı: Kağıt Eskizden Navigasyona

Portföy Sitesi UX'i: Sayfa Mimarisi, Bileşen Seçimi ve Test

Portföy sitelerinde iş genelde görsellerde değil, ekranlar arasındaki geçişte kaybedilir. İşleri güzel duran ama üçüncü tıklamada insanın nerede olduğunu unuttuğu bir site, çirkin ama düz bir listeden daha çok can sıkar. Aşağıdakiler, kağıt eskizden başlayıp ekran yapısını kurarken gerçekten işe yarayan kararlar.

Portföyü tek kitleye göre kur

İşe başvuran biriyle serbest çalışan biri aynı siteyi kullanamaz. İşveren süreci merak eder: problemi nasıl tanımladın, hangi kararı neden verdin, ne çalışmadı. Müşteri sonucu ve teslim süresini merak eder, sürecin ayrıntısı onu yorar.

Bu konudaki yaygın tavsiye "her kitle için ayrı varyasyon hazırlayın" olur, ama aynı tavsiye listesi birkaç madde sonra sayfa sayısını azaltmayı söyler. İkisi aynı anda yürümez. Birini seç, diğerini CV'ye ya da e-postanın gövdesine bırak.

İlk düzeni kağıtta çıkar

Figma'ya erken geçmenin bedeli şu: yarım saat sonra kendini 8 piksellik boşlukları hizalarken bulursun ve ekranlar arası geçişi hiç düşünmemiş olursun. Kağıtta on beş dakikada altı farklı düzen çizilir, beşi çöpe gider, biri kalır. Araç ne kadar kabaysa karar o kadar hızlı verilir.

Hub and spoke, ağ mimarisini neredeyse her zaman yener

Ağ tabanlı mimaride her proje diğerlerine bağlanır. On iki projen varsa kurman gereken ilişki sayısı 12 × 11 / 2 = 66'dır ve bunların hepsini tek tek sen düşünürsün. On üçüncü projeyi eklediğinde on iki yeni bağlantı çıkar. Yük proje sayısıyla değil, kabaca karesiyle büyüyor.

Hub and spoke'ta merkezde bir liste vardır, her proje ondan dallanır. On üçüncü proje o listeye bir satır ekler, başka hiçbir yeri ilgilendirmez. Her iş en fazla iki tıklama uzakta kalır. "İlgili projeler" bloğunu illa istiyorsan elle seçilmiş üç bağlantıyla sınırla ve otomatik ilişki kurmaya kalkma.

Bileşeni içerik sayısı belirler

Arama kutusu, filtre, sıralama, favori, derecelendirme. Bunlar tavsiye listelerinde hep birlikte gelir, oysa her birinin ayrı bir eşiği var. On iki iş için arama kutusu ekran gürültüsüdür, ziyaretçi zaten hepsini tek bakışta görüyor. Altmış iş varsa filtre olmadan o liste kimseye bir şey anlatmaz.

Kural basit: bir bileşen ekrandan bir şey kaldırıyorsa kalsın, sadece bir şey ekliyorsa çıkar.

Detay işlerini en sona bırak

Pop-up'lar, hover animasyonları, sayfa geçişleri, ikon setleri. Ana akış oturmadan eklendiklerinde hepsi iki kere yapılır, çünkü akış değişince bağlı oldukları ekran da değişir. İçi boş kutulardan ibaret ekranlarda baştan sona gezinebiliyor olmadan buraya geçme.

Mobil için ayrı bir prototip çizmek çoğu portföyde gereksiz. Tek kolona indiğinde blokların hangi sırayla dizileceğine karar vermek yeterli, geri kalanı zaten aynı yapı.

Testi konuşmadan yap

Bitirdiğini düşündüğünde linki tanıdığın birine gönder ve hiçbir şey açıklama. Tek cümle söyle: "en son yaptığım işi bul." Sonra sus ve izle. Nerede duraksadığı, senin haftalarca uğraştığın hizalamalardan daha fazlasını anlatır.