Portföy Projesinde Grid Sistemi ve Bilgi Mimarisi Kurmak
Portföy sitesi kurarken en çok vakit alan iş tasarım değil, neyin nereye gireceğine karar vermek. Grid o kararı verdikten sonra işe yarıyor; sırayı ters çevirince ortaya güzel duran ama içinde ne olduğu anlaşılmayan bir sayfa çıkıyor. Bilgi mimarisi önce gelir, ızgara sonra.
Önce içerik, sonra ızgara
Portföyde aslında az sayıda içerik türü var: işler, yetkinlik açıklaması, hakkında, iletişim. Zor olan türleri saymak değil, işlerin kendi arasında nasıl gruplanacağına karar vermek. Sektöre göre mi, iş türüne göre mi, tarihe göre mi?
Burada iki katmanlı bir hiyerarşiye çıkmadan durmakta fayda var. Otuz kırk projesi olmayan bir portföyde alt kategoriler kimseyi hızlandırmaz, sadece araya fazladan bir tıklama koyar. Peki ya işler gerçekten çok çeşitliyse? O zaman kategori yerine filtre daha iyi çalışıyor: tek sayfa, üstte etiketler, liste yerinde daralıyor. Ziyaretçi geri tuşuna basmadan başka bir kesite geçebiliyor.
12 kolon nereden geliyor, nerede tıkanıyor
12 kolonluk ızgaranın yaygınlaşma sebebi estetik değil, aritmetik. 12 sayısı 2'ye, 3'e, 4'e ve 6'ya tam bölünür, yani aynı ızgarayla ikili, üçlü, dörtlü ve altılı düzenler kurabilirsiniz. Bölünmediği yerler ise 5 ve 7. Portföyünde beş vaka çalışması olan biri bunları 12 kolona eşit dağıtamaz; kart başına 2,4 kolon düşer, artan boşluk ya son karta yamanır ya da satır ortada kesilir.
Kolon sayısını genelde içerikten türetirim. Beş iş varsa 10 kolonluk bir ızgara 12'den çok daha az uğraştırıyor. Bunun da ötesinde, kart tabanlı bir portföyde sabit kolon saymayı büsbütün bırakmak mümkün: repeat(auto-fit, minmax(280px, 1fr)) yazıp kartın alt genişlik sınırını verirsiniz, kaç tanesinin yan yana sığacağına tarayıcı karar verir. Kırılma noktası listesi tutmaya gerek kalmaz.
Mobil ile web arasındaki fark ızgarada, mimaride değil
Mobilde ızgara neredeyse her zaman tek kolona iner, bunda tuhaf bir şey yok. Tutarsızlık sıralamada başlıyor. Masaüstünde en üstte duran vaka çalışmaları mobilde iletişim formunun altına düşüyorsa ziyaretçi iki farklı site görmüş oluyor ve ikisinden hangisinin sizi anlattığını bilmiyor.
Görsel sıralamayı CSS ile değiştirmek teknik olarak kolay, ama okuma sırasıyla klavye odak sırasının ayrışması bilinen bir erişilebilirlik sıkıntısı: sekme tuşuyla gezen biri ekranda gördüğü sıradan başka bir sıraya düşer. Sıra değişecekse HTML'de değişsin.
Kağıt mı, wireframe aracı mı
Başlangıçta kağıt daha hızlı, çünkü ilk beş düzenin dördü zaten çöpe gidecek ve kağıtta çöpe atmak bedava. Dijital araca geçiş noktası, düzeni başkasına göstermek ya da gerçek metinle denemek gerektiği an. Lorem ipsum ile çizilen ızgara neredeyse her zaman gerçeğinden dar çıkar; proje adları uzundur, müşteri adları daha da uzun.
Düzenin çalışıp çalışmadığını anlamanın kısa yolu
Siteyi hiç görmemiş birine ekranı beş saniye gösterip kapatın, sonra sorun: bu kişinin en iyi işi hangisi? Cevap gelmiyorsa sorun ızgarada değil, hiyerarşide. Bütün kartlar aynı ağırlıkta demektir, ki o zaman ziyaretçi de sizin adınıza seçim yapmaz, sadece kaydırır. Öne çıkarmak istediğiniz işi ızgarada iki kat yer kaplatmak, sıralamayla oynamaktan çok daha çabuk sonuç veriyor.