Web Tasarımda Görsel Hiyerarşi İlkeleri

Görsel hiyerarşi, kullanıcı akışına ve kullanıcıların karar verme eğilimlerine yardımcı olan farklılıklar yaratarak sitenin işlevselliğini arttırır. Bir arayüzün görsel hiyerarşiye sahip olması, aslında Rönesans ustalarının estetik prensipleriyle aynı bakış açısına dayanır. Yani, belirli bir içeriğe teşvik eden bir altmetin barındırır. Burada başlıca hedeflerin sitenin daha keyifli bir hale gelmesini sağlayarak kullanıcı sayısını arttırmak ve etkinlik çağrısı yaparken kullanıcı hedeflerini gerçekleştirmek olduğunu söyleyebiliriz. Görsel hiyerarşinin temel kavramları, kullanıcının dikkatini çeken unsurları onların gözünden bakarak belirler. Fakat somut bir hiyerarşi oluşturmak için tek bir doğru yol yok. Rekabet ortamında tasarımcılar, birbirinden farklı yöntemler keşfediyor. Diğer taraftan tasarımcılar, oyunda kalabilmek için buldukları yöntemleri her daim geliştirmek zorunda kalıyor. Basit veya karmaşık hiyerarşileri desteklemek için aşağıdaki temel görsel hiyerarşi ilkeleri tasarımcılar için faydalı olabilir. 1. Boyut "Büyük" hemen her zaman daha dikkat çekici olsa da konu tasarımsa bunun her zaman iyi olduğunu söyleyemeyiz. Yine de hiyerarşinin içindeki detayları karmaşık hale sokmadan, en önemli unsurların büyük kullanmak başarılı bir yöntem. Fitts Kanunları'nın kullanıcıların daha büyük nesnelere tıklarken daha az gayret sarf ettiğini söylüyor. Bu durum, sitedeki dinamik çağrılar için de geçerlidir ki bu kullanıcının gideceği yolu bulmasında büyük bir etki yaratacaktır. Elbette söylemek istediğimiz şey, "İNDİR" butonunun diğer butonlardan 10 kat daha büyük olması gerektiği değildir. Büyüklük faktörü, bütün kelimelerin arasında bir uyum olduğu zaman değerlidir. Tıklanabilirlik adına, sitenin tüm görsel tasarımı için büyüklük önemli bir faktördür. Belirli ölçüde büyük öğeler sağdan sola veya yukarıdan aşağıya estetik olarak dizilebilir. Ayrıca, belirli bir bakış açısıyla kontrast ve renk düzenleri esas olarak alınabilir. Boyutu etkileyen faktörler arasında metin ve tipografi de önemli bir yer tutar. Makalelerin ana başlıkları ve alt başlıklarında görüldüğü gibi gerçekten önemli faktörlerdir. Smashing Magazine'in yayınladığı 50 popüler web sitesinde ortalama boyutlar şu şekilde;

• Başlıklar: 18-29 piksel
• Gövde: 12-14 piksel

Boyut ile ilgili bütün prensipler, harflerin dizilişine göre sıralanabilir. Farklı puntoların hangi mesajı vereceğini gözden kaçırmayarak uygulanacak her basamak, görsel hiyerarşi adına bir verim oluşturacaktır. Alt metin satırında, yine sihirli birkaç dokunuş ile küçük yazı tipindeki anahtar kelimelere dikkat çekilebilir. Gözleriniz hala ilgi çekici bir şeyler arıyorsa, köşelere logo, menüsü ya da navigasyon çubuğu  yerleştirmek iyi bir fikir olabilir. 2.Renk Siteniz için seçtiğiniz renkler büyük önem taşır. Her rengin kendine has psikolojik bağlantıları vardır. Bir araştırma yapıp, bu konunun detaylarını öğrenebilirsiniz. Bir an için durup düşünmemiz gereken bir olgu vardır ki dengeleri tamamen değiştirebilir. Bu, renklerin kendi aralarındaki hiyerarşik karakterleridir. Örneğin siyah ve kırmızılar, genellikle daha kolay dikkat çeker. Arka planlar içinse en uygun renklerin yumuşak sarı ve krem rengi olduğunuz söyleyebiliriz. Ancak, bu etkiler kontrast kullanarak geliştirilebilir. Oluşturulan kontrast, daha dikkat çekici bir görünüm kazandıracaktır. Doğal olarak, dijital tasarımcı ve sanat yönetmeni Vito Salvatore'nin web sitesinde ikna edici renklerde görseller bulunuyor. Özellikle kendi giriş sayfası için seçtiği fotoğraflar, sanatçının yeteneğini ortaya koyuyor. Renk hiyerarşisi açısından, kum ve gökyüzü, mavi ve tezat olan yumuşak sarı olarak derin bir kontrast ihtiva ediyor. İşlevsellik açısından, beyaz seçimi ve fotoğrafların hareketliliği, arka plandaki kadrajın sanatsal lezzetine şık bir görünüm katıyor. Daha üst seviyelerde, renk tablolarında görüldüğü gibi, ten rengi ile gökyüzünün mavisi birbirini tamamlıyor. Fotoğraflarda çok dengeli bir estetik meydana geliyor. Ayrıca, tan vakti, kum veya kumsal, hareketlenme ile tozlanma hissi oluşturuyor. Tasarımlar bizi sona yaklaştırsa da, yavaş yavaş hangi rengi nasıl gördüğümüzü anlamaya başlıyoruz. Görseller ve tipografi, ekranın en değerli kısmı için bize yol gösteriyor. 3. Yerleşim Arayüzler, web sitesi tasarımında, görsel hiyerarşiyi kontrol etmek için en kestirme yollardan biridir. Özetle, dikkat çekici alanlara, öncelik yoğunluğuna uygun öğeler yerleştirebilirsiniz. Bu sizin görsel hiyerarşinizin en yüksek noktasını oluşturabilir. Ancak, ekranda şekillendirilecek birden fazla alan bulunur. Görsel etkenlerden ilki 'birincil piksel' olarak adlandırılır. Fitt Kanunları'na ait diğer prensiplerinden yararlanmak için derinlemesine bakmamız gerekir. Tasarımda ekranın köşelerine dikkat etmekte fayda var. Köşelerdeki görseller, detay gerektirdiğinden fazlaca özene ihtiyaç duyar. Adoratorio'nun sayfasında öncelikle ekranın merkezine odaklanmak gerekirken , durgun bağlar, alt köşede kolay erişilebilir bir hal alıyor. Aşağıya ve yukarıya kaydırma değişiklikleri ortada görüntüleniyor. Ancak site logosu, menüsü, iletişim ve sosyal medya linkleri hala birinci bölge içerisinde konumlandırılıyor. Düzeniniz, görsel hiyerarşiyi mutlaka etkiler. Satır ve sütunların organize bir yapıyı desteklercesine kenarda olması büyük kolaylık yaratır ve sitenizin daha düzenli olmasını sağlar. Bu sebeple, birincil piksel oluşturmanız, siteniz için büyük bir yatırımdır. Eğer çok fazla arayüz ekipmanınız web sitenizde size kalabalık hissi aktarıyorsa, görsel hiyerarşiyi düzenlemek sizin yani kullanıcıların başlıca göreviniz haline gelebilir. 4. Boşluk Bir tasarımda boşuklar,sayfanın işlevini güçlendirir. Boşluklar, görsel hiyerarşiyi iki şekilde etkiler; yakınlık ve negatif boşluk. Görsel açıdan kullanılan yakınlık, bir ölçütün anlamını ve işlevselliğini sunmak adına bir web tasarımcısı için çok güçlü bir araçtır. Gestalt prensiplerinde, yirminci yüzyıl düşünce akımlarının, görsel ve psikolojik okulundan örnekler bulunur. Buna göre kullanıcı benzer işleve sahip ögeleri birbirine yakın olduğunda daha kolay algıladığını gösterir. Yukarıdaki örnekte, merkezdeki imajla alakalı ögeler hemen imajın hemen altında bulunuyor. Navigasyon seçenekleriyle ilgili site içeriği grup halinde sağ tarafa yerleştirilmiş. Aşağıdaysa navisgasyonla ilgili olmayan linkler bir arada verilmiş. Web tasarımında yapılan hatalardan biri de tasarım aracında boşlukları boş bir tuval olarak düşünmektir. Yetenekli tasarımcılar parçacıkların ne kadar az ya da ne kadar çok olması gerektiğini biliyor. Bu önemli unsurun bir araya geldiği noktada, doğru parçacıkları doğru miktarlarda, doğru yerlerde kullanan tasarımcıların, zamanla kendi çizgilerinin ne denli sağlam kaldığını görüyoruz. Örneğin Nua Bikes negatif alanı (boşluğu) en iyi şekilde kullanan markalardan biri. Minimalist yaklaşımı ve zıt görselden kaçınması sayesinde site kullanıcı önemli olan noktaya odaklanıyor: bisiklet. 5. Tarz Web tasarımda görsel hiyarşinin tek bir başarılı yolu yoktur. Desenler, grafikler ya da imaj kullanımı yoluyla kendinize has bir tarz oluşturabilirsiniz. Tüm bu ögeler görsel hiyerarşiyi etkiler ve kendinizi anlatmanıza yardımcı olur. En güçlü tarz oluşturma araçlarından biri de desendir. Doğru kullanıldığında desen boyut ve renk gibi unsurlara ek olarak derinlik ve kişisel bir atmosfer yaratarak tasarımınızı güçlendirir. Desenli bir element kullanmak da desenli arkaplan üzerine kullanılan desensiz obje de sayfanızın dikkat çekmesini sağlayacaktır. Le Mystère de Grimouville'in sayfasında da görebileceğiniz gibi, başlıktaki doku yalnızca dikkat çekmekle kalmıyor siteye özgü bir atmosfer ve tarz katıyor. Gizemli etki yaratan site merak uyandıran bir hikayenin ipuçlarını veriyor. Desene ek olarak grafiklerin ve imajların türü de görsel hiyerarşi üzerinde büyük etki yaratır. Logonun etrafındaki bir dokunuş sitenin karakterini yansıtır. Aynı şekilde akıllıca kullanılan ikonlar ve zengin görseller de sitenin rengi ne olursa olsun dikkat çeker. Risotteria Melotti’nin sitesi kullandığı renkler kadar lezzetli görünen yemek görseliyle de fark yaratıyor. Aslında bu sitedeki desenler pek geleneksel olmayan bir tarzda efekt içeriyor. Zengin bir fotoğraf kullanımı sayesinde ortamın hissi ekrandan kullanıcıya ulaşıyor. Fotoğraf arkaplana oturtulduğu için arayüz objeleri de gerektiği kadar dikkat çekiyor ve atmosferi destekliyor. Siz de görsellerinizi tasarlarken insanların ilgi alanlarını görmezden gelmeyin. Sonuç Yukarıda sözünü ettiğimiz görsel hiyerarşi ilkeleri, web tasarımcılarının hayatını kolaylaştıracak temel yapı taşlarıdır. Hatta, daha iyisini tasarlamak için bir gerekliliğin ötesinde olduğunu söylemek bile mümkün. Becerinin sürekliliği, insanı ustalaştırır. Eğer, tasarım piksel olarak mükemmel olsa bile her bir kullanıcı ile birlikte belirsizlik unsuru artacaktır. Çünkü herkes kendi sevdiği rengi görmek isteyebilir. Sade, anlaşılır ve farklı kullanıcılara hitap eden arayüzler, görsel hiyerarşinin amacıdır.