Portfolyoda Görsel Hikaye: Eleme, Hiyerarşi ve Ağırlık
Portfolyo bir iş listesi değil, seçim listesidir; neyi dışarıda bıraktığınız, gösterdiğiniz kadar konuşur. Görsel hikaye anlatımı denince akla önce tipografi ve renk geliyor, oysa işin çoğu sıralama ve elemede bitiyor. Bir portfolyonun anlattığı hikayeyi, ziyaretçinin ilk on saniyede hangi projeye baktığı belirler.
Önce eleme, sonra düzen
Hiyerarşi kurmak bir şeyi öne çıkarmaktan çok, geri kalanını geri plana itmek demek. On iki projeyi eşit boyutta karelere dizerseniz ziyaretçi hangisine bakması gerektiğini anlamaz, çünkü sayfa hepsi için aynı şeyi söylüyor. Üç işi büyütün, geri kalanı küçülsün, savunamadığınız her şey listeden çıksın.
Peki ya en iyi işiniz üç yıl öncesine aitse? Tarihi saklamak yerine kararı anlatın: o çözüm neden hâlâ ayakta duruyor, bugün neyi farklı yapardınız. Eski bir işi savunabilmek, listeyi doldurmak için eklenmiş yeni ve vasat bir projeden daha çok şey söylüyor.
Grid burada araç, amaç değil. Sabit bir kolon yapısı sayfayı her ekranda tahmin edilebilir tutar; hikayeyi kuran şeyse kolonlar değil, hangi projenin iki kolon kapladığıdır.
Tipografi ve renkte az sayıda karar
İki yazı tipi ailesi çoğu portfolyoya fazlasıyla yetiyor: başlıklar için karakteri olan bir tane, gövde için okuması kolay bir tane. Gövde metnini 16 pikselin altına indirmeyin. Başlık basamaklarını da tek tek seçmek yerine tutarlı bir ölçekten türetin, böylece yeni bir sayfa eklediğinizde boyut tartışması sıfırdan başlamaz.
Renkte durum benzer. Nötr bir zemin, tek bir vurgu rengi ve bu rengin yalnızca tıklanabilir yerlerde kullanılması, sayfaya dağılmış beş renkten çok daha net yönlendiriyor. Vurgu rengi her yerdeyse hiçbir yerde değildir.
Vaka çalışması galeri değil
Bir projeyi anlatırken sıralama neredeyse hep aynı işe yarıyor: problem neydi, hangi kısıtlar vardı, ne denendi ve elendi, ne çıktı. Elenen yol özellikle kıymetli, çünkü kararın size ait olduğunu gösteren tek kısım orası.
Sürecin ortasından alınmış üç kaba ekran görüntüsünü, tek bir cilalı sunum görselinden daha ikna edici bulurum. İkincisi işin güzel olduğunu söylüyor, birincisi işin sizin elinizden çıktığını.
Erişilebilirlik sonradan eklenen bir katman değil
Gövde metninde 4,5:1 kontrast oranı (WCAG AA) alt sınır, büyük başlıklarda 3:1'e kadar inebilirsiniz. Bunu tasarım biterken kontrol etmek yerine palet seçerken ölçmek, sonradan yapılan renk ameliyatlarından ucuza geliyor.
Görsellerin alt metni de öyle. ekran1.png hiçbir şey anlatmıyor; "rezervasyon akışının üçüncü adımı, hata durumu" hem ekran okuyucuya hem de altı ay sonra kendi dosyalarını karıştıran size bir şey söylüyor.
Sayfa ağırlığı sessizce kaybettiriyor
Portfolyolar görsel yoğun olduğu için ağırlık hızla birikiyor. Tam genişlikte on iki görsel, tanesi 400 KB'tan, 4,8 MB eder; 10 Mbit/sn'lik bir bağlantıda bu yalnızca görseller için yaklaşık dört saniye demek. İşe alım yapan biri sekmeyi o süre dolmadan kapatabilir.
Çözüm karmaşık değil. İkonları ve şemaları SVG olarak verin, fotoğrafları WebP ya da AVIF'e çevirin, ilk ekranın altında kalan görselleri loading="lazy" ile geciktirin. Üçü de tarayıcının kendi imkanlarıyla çözülüyor.
Kaynaklar