UX Portföyünde Estetik ve İşlevsellik: Ne Gösterilir, Ne Gösterilmez
UX portföyünde zarafet, güzel ekran görüntüsü biriktirmek değil. Karşı taraf renk seçimini değil, o rengi neden seçtiğini okur. Cilalı ama gerekçesiz bir portföyü, sade ama kararları yazılmış bir vaka çalışmasından daha az güvenilir bulurum: ilki yalnızca zevkini gösterir, ikincisi nasıl düşündüğünü.
Önce kararı yaz, sonra ekranı koy
Her proje için üç şeyi sırayla yaz: çözdüğün problem, denediğin ve elediğin yol, elde kalan çözüm. Ortadaki madde en çok atlanan ve en çok bilgi taşıyan olanı. Bir tasarımcının üç düzeni deneyip ikisini neden bıraktığını anlatması, son ekranın ne kadar parlak render edildiğinden daha fazla şey söyler.
Ekran görüntüsünü kararın altına koy, üstüne değil. Sıra ters olduğunda okuyucu galeri modunda kayıp gidiyor, metni hiç okumuyor.
Estetiğin büyük kısmı tipografi ve boşluk
Renk paleti sandığın kadar belirleyici değil. Portföyün baktığında "temiz" görünmesini sağlayan şey genelde iki ölçüye indirgenebilir: gövde metninde satır uzunluğunu 60-75 karakter aralığında tutmak ve satır aralığını punto boyutunun 1.4-1.6 katına çıkarmak. İkisi de dakikalar içinde düzeltilir, etkisi anında görülür.
Kontrast tarafında tahmin yürütme, ölçülebilir bir eşik var: normal metin için 4.5:1, 18 punto ve üzeri büyük metin için 3:1. WCAG 2.1 kontrast ölçütü bunu net tanımlıyor ve tarayıcının geliştirici araçları renk seçicide oranı doğrudan gösteriyor. Açık gri üzerine daha açık gri yazan bir portföy, ilk beş saniyede erişilebilirliği hiç düşünmediğini söylemiş oluyor.
SVG faydalı, ama her yerde değil
"Vektörel kullan, her ekranda keskin durur" tavsiyesi tek başına eksik. SVG'yi nasıl gömdüğün, ne kazanacağını belirliyor.
<img src="ikon.svg">ile yüklersen dosya ayrı cache'lenir, sayfa HTML'i şişmez. Buna karşılık dışarıdaki CSS içeri işlemez:currentColorile ikonun rengini tema değişkenine bağlayamazsın.- Inline gömersen renk ve animasyon kontrolü sende olur, ama işaretleme her sayfada tekrar iner ve ayrı önbelleğe alınamaz.
- Karmaşık illüstrasyonlarda SVG, aynı görüntünün optimize edilmiş rasterinden büyük çıkabilir. Her düğüm ve eğri dosyada metin olarak durur; binlerce path varsa vektör olmanın avantajı maliyetin altında kalır.
Pratik ayrım basit: ikon ve logo için SVG sprite ya da inline, fotoğrafımsı ve çok detaylı görseller için WebP.
Kaç proje, ne kadar derinlik
Üç iyi anlatılmış vaka, sekiz yarım vakadan daha iyi iş görüyor. Portföyü inceleyen kişi her projeye eşit zaman ayırmıyor; ilkine dikkatle bakıp gerisini hızlı geçiyor. Bu yüzden en güçlü işi en başa koy ve zayıf olanı listeden tamamen çıkar, sona saklama.
Bir de portföy sitesinin kendisi sessiz bir vaka çalışması. İlk ekranı açmak için birkaç megabaytlık görsel indiren, mobilde yatay kaydırma yapan bir sayfa, içindeki kullanıcı deneyimi iddialarını kendi başına çürütüyor. Sayfayı yayına almadan önce mobil bağlantıda bir kez aç, ilk içeriğin ne zaman göründüğüne bak.
Güncellemeyi işin bitince değil, iş sürerken yap
Portföy en çok proje bitiminden aylar sonra, hangi kararın neden alındığı unutulduğunda zarar görüyor. Proje devam ederken eskiz, ara sürüm ve tartışma notlarını bir klasörde biriktir. Vaka çalışmasını yazma anı geldiğinde elinde hikâye zaten olur; sonradan üretilen gerekçe hem daha zayıf hem de okurken belli oluyor.