Görsel Tasarımın Öğeleri ve İlkeleri: Listeyi Kısaltmak
Görsel tasarım anlatımları hep aynı yerden başlar: yedi öğe, yedi ilke. Listeyi ezberlemek kolay, ekranda karşılığını kurmak zor, çünkü maddelerin bir kısmı aslında diğerlerinin sonucu. Aşağıda o listeyi kısaltıp geriye her gün karar verdiğim birkaç şeyi bırakıyorum.
Yedi öğe, ama ekranda hepsi eşit ağırlıkta değil
Klasik sıralama şöyle: çizgi, şekil, negatif alan, hacim, değer, renk, doku. Basılı işte hepsinin ağırlığı var. Ekranda durum başka türlü işliyor. Hacim ve doku çoğu arayüzde birkaç piksellik gölgeye inmiş durumda, çizgi ile şekil ise genelde bileşen kütüphanesinden hazır geliyor. Geriye tasarımcının gerçekten karar verdiği üç şey kalıyor: boşluk, değer, renk.
Boşluk bir süs değil, gruplama aracı
İki öğe arasındaki mesafe, aralarında ilişki olup olmadığını söyler. Bir etiketi ait olduğu alana 8 piksel, üstteki bloğa 24 piksel uzaklıkta koyduğunda hangi etiketin hangi alana ait olduğunu kimseye ayrıca anlatman gerekmez. Tersi de geçerli: bütün aralıkları eşitlenmiş bir form, kullanıcıya hiçbir şey söylemeyen düz bir listeye dönüşür. Boşluk kısıldığında ilk kaybolan şey estetik değil, anlam.
Değer, rengin altındaki katman
Değer bir tonun açıklık koyuluk derecesidir ve erişilebilirlik ölçütlerinin dayandığı yer de burası. WCAG kontrast oranı renk tonundan değil, bağıl parlaklıktan hesaplanır. Yani kırmızı zemin üstüne yeşil metin renk olarak sonuna kadar kontrastlı görünür, parlaklıkları birbirine yakınsa oran normal boy metin için istenen 4.5:1 eşiğini geçemez. Kontrolü basit: ekran görüntüsünü gri tonlamaya çevir. Hiyerarşi grinin içinde ayakta duruyorsa renk yalnızca karakter katıyordur. Ayakta durmuyorsa hiyerarşiyi rengin kendisi taşıyordur ve bu, daha yayına girmeden bilinen bir arıza.
Renk anlamları ezberden gelmez
Kırmızı enerji, mavi güven, yeşil huzur eşlemeleri sunum slaytlarında iyi durur. Uygulamada belirleyici olan bağlamdır: aynı kırmızı, bir bankacılık ekranında hata, bir yemek sitesinde iştah, bir grafikte düşüş demektir. Renge anlam yükleyen şey rengin kendisi değil, yanında ne olduğu ve kullanıcının o ekrana ne yapmaya geldiği.
İlkelerin bir kısmı zaten ilke değil
Standart liste yine yedi başlık sayar: bütünlük, gestalt, hiyerarşi, denge, kontrast, ölçek, hakimiyet. Bunlar aynı düzlemde durmuyor. Kontrast ve ölçek birer araç, yani elinle çevirdiğin düğmeler. Hiyerarşi bir sonuç, o düğmeleri çevirince ortaya çıkan şey. Hakimiyet ise hiyerarşinin birinci satırından başka bir şey değil, ayrı madde olarak sayılması listeyi şişiriyor. Gestalt da bir ilke değil, diğerlerinin neden işe yaradığını açıklayan algı modeli. Tasarım kararı olarak geriye denge, kontrast, ölçek ve bütünlük kalıyor, dördü de birbirinin lehine ya da aleyhine ayarlanabiliyor.
Vurgu sabit bir bütçe
Hiyerarşi göreli çalışır. Bir öğe ancak çevresi sakinken öne çıkar. Üç birincil düğmesi olan ekranda birincil düğme yoktur, üçü birden ikincil olur. Aynısı metinde de geçerli: bir paragrafta kalınlaştırılmış üç ifade varsa okuyucu üçünü birden atlar. Vurguyu ekran başına harcanacak sabit bir bütçe gibi düşünmek, hiyerarşi tartışmalarının çoğunu daha başlamadan bitiriyor.
Dijital tarafta iki tuzak
Birincisi hover. Bir öğenin tıklanabilir olduğunu sadece üstüne gelince belli ediyorsan, dokunmatik ekranda o bilgi hiç ortaya çıkmaz. Hover bir bonus katmandır, taşıyıcı katman değil. Tıklanabilirlik durağan halde de görünmeli.
İkincisi görsellerin adlandırılması. Dosya adı arama tarafında işe yarar, ama ekran okuyucuya konuşan şey alt metnidir ve iyi bir dosya adı o boşluğu kapatmaz. Görsel bilgi taşıyorsa alt metnini yaz, yalnızca dekorasyonsa alt metnini bilerek boş bırak. Hangisi olduğuna karar veremiyorsan görsel muhtemelen sayfada gereksiz duruyordur.
Kaynaklar