Ara
Close this search box.

Tasarımda Görsel Hiyerarşi

Tasarımda Görsel Hiyerarşi

Merhabalar tasarımda görsel hiyerarşi içeriğine hoş geldiniz. Önce taş tabletler, papirüs ve kâğıt vardı. Ardından bilgisayar ekranları, monitörler ve elektronik tabletler geldi. Bir sayfayı görüntüleme teknolojisi geliştikçe, içeriği net bir şekilde düzenlemek tasarımcının işi olmaya devam ediyor.

Görsel hiyerarşi, bir tasarımdaki grafik öğelerin her birinin önem sırasına göre düzenlenmesidir. Yani kabaca izleyicinin gözlerinin neye odaklanacağını belirlemek. Bu algıyı yönetmek ve sıralamaktır.

Kil Tablet ve Apple Tablet – Tasarımda Görsel Hiyerarşi


Günümüzde çok ta büyük olmayan ekranlara bakıyoruz. Bu ekranlarda bazen birden çok içeriği aynı anda görüyoruz. Yoğun metin ve kısa dikkat süreleri ile karşı karşıya kalan tasarımcılar. İzleyicinin dikkatini en önemli verilere çekmek için bazı yöntemler geliştirdi.

Okuma Alışkanlıkları

Tüm kültürler yazıları yukarıdan aşağıya doğru okur ve çoğu kültür soldan sağa doğru okur. Bu temel bilgi sayfa tasarımcıları için önemli. Ancak iş biraz daha karışık.

Son araştırmalar, insanların okumaya başlamadan önce ilgilenip ilgilenmediklerini anlamak için bir sayfayı taradıklarını göstermiştir. Tarama desenleri “F” ve “Z” olmak üzere iki şekilden birini alma eğilimindedir ve tasarımınızda bundan yararlanabilirsiniz.

F Deseni Nedir?

F okuma eğilimi.

Bu alışkanlık makaleler veya blog gönderileri gibi metin ağırlıklı sayfalarda sıklıkla görülür. Bir okuyucu, sayfanın sol tarafını tarar, sola hizalanmış başlıklarda veya ilk konu cümlelerinde ilginç anahtar kelimeler arar.

Bunu nasıl kullanabilirsiniz? Önemli bilgilerinizi sola hizalayın ve paragraf bloklarını bölmek için kısa, kalın başlıklar, madde işaretleri ve diğer dikkat çekici unsurlardan yararlanın.

Z Deseni Nedir?

Z okuma alışkanlığı.

Bilgilerin blok paragraflarda sunulması gerekmeyen reklamlar veya web siteleri gibi diğer sayfa türleri için geçerlidir. Okuyucunun gözü ilk önce önemli bilgilerin bulunabileceği sayfanın üst kısmını tarar, daha sonra çapraz olarak karşı köşeye geçer ve aynı şeyi sayfanın alt kısmında da yapar.

Web tasarımcıları çoğu zaman en önemli bilgileri köşelere yerleştirirler. Diğer önemli bilgileri üst ve alt çubuklar boyunca yönlendirerek ve köşegenleri birbirine bağlayarak sayfalarını bu davranışa uyacak şekilde yaratırlar.

Boyut

Harika bir ipucum var. İnsanlar önce daha büyük şeyleri okurlar. 😊 Aşağıdaki reklamda gözünüz “çatlatan” kelimesinden önce “performansa” gidiyorsa, hemen bir algı psikoloğu ile iletişime geçmelisiniz. 😊

Tasarımda boyutlandırma

İlginç olan, bu eğilimin aslında yukarıdan aşağıya kuralını geçersiz kılacak kadar güçlü olmasıdır. Yukarıdaki resimde, “çatlatan”, “harekete geçme zamanını” geçersiz kılar çünkü hem daha büyük hem de sola yaslıdır. Bu nedenle soldan sağa kuralı yardımcı olur.

Özetle boyutlandırma çok önemlidir. İzleyicinin dikkatini çekecek en etkili unsurlardan bir tanesidir. İyi kullanıldığı zaman diğer kuralları da yıkma olasılığı vardır.

Boşluklar

Dikkat çekmenin bir başka yolu da içeriğe nefes alması için yeterli alan bırakmaktır. Bir düğmenin etrafında önemli miktarda negatif boşluk varsa veya bir metin bloğundaki satırlar iç içe geçmiş sıkışık vaziyette değilse. Okuyucular tarafından daha kolay görülebilir olacaktır.

Aşağıdaki örnek bir web sitesinden alındı. Negatif alanları nasıl kullandığına dikkat edin. Sloganlarını ortada küçük ve etrafı boşluk olacak şekilde konumlandırmışlar. Sade bir tasarım için örnektir.

Tasarımda Negatif Alanlar

Yazı Tipi Seçimi

Yazı tipi seçimi, tasarımda görsel hiyerarşi oluşturmak için çok önemlidir. Bir yazı tipinin en belirgin özelliği harflerin genişliğidir. Bir de tırnaklı ve tırnaksız font diye tanımlayabileceğimiz serif ve sans serif olmasıdır. İtalik gibi formları da rol oynar tabi.

Aşağıdaki örnekte yazı tipinin kelimelerin hiyerarşik sırasını nasıl etkilediğine dikkat edin. “Sizi sıcak tutmak için mükemmel çaylar” cümlesi odak noktadadır. İtalik, kalın yazım şekli bir arada kullanılarak vurgulama yapılmıştır.

Yazı Tipinin Önemi

Bazı durumlarda amaç, çeşitli bilgileri eşit derecede acil olarak sunmaktır. Hepsini aynı boyuta ve ağırlığa ayarlamak, denkliği sağlar ama aynı zamanda sıradan hale getirir.


Şu örnekte olduğu gibi, yazı karakterlerini farklılaştırmak bundan kaçınmanın bir yoludur.

Farklı yazı tiplerinin kullanımı.

Burada, sayfadaki beş başlığın tümü hiyerarşide eşittir, ancak biri orta genişlikte bir serif font, diğeri hafif ama uzun bir sans serif font olmak üzere iyi eşleştirilmiş iki yazı tipi arasında geçiş yaparak çeşitlilik sağlar.

Renk ve Renk Tonu

Bir başka önemli dikkat çekme aracı renkler ve renklerin kullanım şeklidir. Aşağıdaki örnekte olduğu gibi doygunluğu düşük ya da siyah beyaz ağırlıkta bir tasarıma renkli parlak bir dokunuş dikkat çeker.

Tasarımda renk kullanarak vurgu yapmak.

Bir başka web sitesi tasarımında ise renkler belirli kategorileri anlamak için kullanılmış. Bu yönüyle okuduğunuz içeriğin hangi kategoriye ait olduğunu düşünmüyorsunuz. İlgilendiğiniz konuyu renk ile dikkat çekici hale getirebilirsiniz.


Aynı rengi kullanarak bir başlık ve alt başlık yazdığınızı düşünün. Bir tanesini tonu biraz daha açık olursa önce koyu olan yazı okunacaktır. Yazı tipleri aynı, yazı boyutları aynı olsa bile. Renklerin tonlarını kullanmak izleyicilerde odaklanma için bir algı yaratır.

Renk tonlarının kullanımı


Aşağıdaki örnekte “New On Whitney….” Diye başlayan başlık izleyici için ilk dikkat çeken yerdir. Hemen altında ise “Cory Arcangel..” cümlesi geliyor. Odaklanma sırasında ikinci olmasının sebebi yalnızca yukarıdan aşağıya okunma kuralı değildir. Daha açık bir renk tonu kullanılmıştır.

Yön ve Kalıplar

Geleneksel işlerden dijital işlere kadar bir tasarımı yaparken belirli ızgaraları düşünürüz. Genelde yukarıdan aşağıya ve soldan sağa hayali çizgiler çizerek bir şablon oluştururuz. Her şey düz ve nettir. İşte bu düz ızgara çizgilerinin içerisinde farklı eğilimleri olan çizgiler dikkat çekmeye başlar. Aşağıdaki örnekte olduğu gibi yazı izleyicinin odaklanması için farklı yönde bir forma sahiptir. Ayrıca diğer kuralları da uyguladığı için uygun bir örnektir. Tabi izleyicilerin bir kısmı da doğrudan reklamdaki insana odaklanırlar. Eğer bu tasarımda insan yüzü olmasaydı ilk bakılacak yer konusunda hepimiz aynı şeyi söylerdik.

Tasarımda yön algısı.

Tasarımda Görsel Hiyerarşi izleyiciyi yönlendirmek açısından etkili bir araçtır. Sizin için hazırladığımız tasarımda şekillerin anlamı makalesini de okumanızı öneriyorum. İçeriğimizi okuduğunuz için teşekkür ederiz. Sizin de konuyla ilgili görüşlerinizi bekliyoruz. Yorumlarda görüşmek üzere.

Okuduğunuz İçin Teşekkürler

3 yanıt

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Dikkatinizi Çekebilecek Diğer İçerikler

Yapay Zeka Ücretsiz Görsel Oluşturma Rehberi 2024

Yapay Zeka Ücretsiz Görsel Oluşturma konusu giderek popülerliğini artırıyor. Dijital dünyanın hızla evrildiği günümüzde, görsel içeriklerin önemi hiç olmadığı kadar arttı. Peki, bütçenizi sarsmadan, etkileyici

Telifsiz Resimler İçin En İyi Kaynaklar 2024

Telifsiz resimler biz tasarımcılar için oldukça kıymetli kaynaklardır. Günümüz dijital çağında, içerik oluşturmak ve paylaşmak hiç olmadığı kadar önemli. Blog yazıları, web siteleri, sosyal medya

Yapay Zeka Video Programı Önerileri

Yapay Zeka Video Programı makalesine hoş geldiniz. Hızla gelişen AI teknolojisi ile videolarımızın kalitesini yükseltmek her geçen gün daha kolay hale geliyor. Gözlerimiz artık belirli

İçindekiler

3 yanıt

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Okumanız Gereken İçerikler

İnternetten gelir elde etmek

Para Kazanmak İçin Yapabilecekleriniz

Para kazanmak ve internet üzerinden dijital bir iş yaparak gelir elde etmek uzun zamandır pek çok kişinin hayali. Artık çok daha yaygın olarak kullanılan bazı

Fotoğraf kalitesini yükseltme

Photoshop’ta Resmin Çözünürlüğünü Arttırma

Bazı durumlarda fotoğraflarımızın ya da internette bulduğumuz görsellerin çözünürlüğü düşük olur Adobe Photoshop’ta resmin çözünürlüğünü arttırma yöntemlerini kısaca anlatacağız. Elbette bu işlem belirli bir seviye