Tasarım İlkeleri – Görsel Hiyerarşiye Giriş

Teknolojiler ve kullanıcı arayüzleri değiştikçe, görsel tasarımda tasarım becerilerine duyulan ihtiyaç artmaya devam ediyor. Her yıl ortaya çıkan tipik bir kullanıcı arayüzünün yeni örnekleriyle, temel görsel hiyerarşi, algı ve kompozisyon anlayışımız değişti mi?

Modern görsel algı kavramının kökleri yalnızca bilimde değil, aynı zamanda psikolojide de yatmaktadır. Sonuç olarak, sürekli değişen kullanıcı arayüzlerinden bağımsız olarak, görsel bilgiyi görme ve algılama şeklimiz aynı kalacaktır. Bunu göz önünde bulundurarak, çağdaş etkileşim tasarımının grafik kompozisyon ve görsel hiyerarşinin temelleri üzerinde gelişmesi mümkün müdür?

Görsel algının temel kuralları, herhangi bir görsel tasarım için kritik öneme sahiptir, çünkü gömülü bir anlama sahip bilgilerin mümkün olduğunca çabuk nasıl iletilebileceğini öğretirler. Ancak görsel tasarım, grafik tasarımın yakın bir kuzeni olduğundan, bu standartlar basılı medya için oluşturulmuştur ve dijital için henüz yeniden tanımlanmamıştır.

Potansiyel olarak yeni tasarım ilkeleri oluşturabilecek bir “dijital Bauhaus okulu” gibi bir şey henüz oluşmadı. İnsanlar bir kullanıcı arayüzünü baskıdan tamamen farklı bir şekilde deneyimledikçe, görsel hiyerarşi ve kompozisyon kuralları sadece eski değil, aynı zamanda bir kullanıcı arayüzünde çöküyor.

Tasarımcılar çoğunlukla ekrana statik, iki boyutlu bir nesne olarak bakma eğilimindedir ve etkileşimli tasarımcılar için zorluk, dijital medya projelerine baskı formatlarını uygulamanın ötesinde yenilik yapmaktır. Ancak yeni tasarımlar ilerlemeden önce, görsel hiyerarşi, algı ve kompozisyonun temel bir anlayışının yeniden gözden geçirilmesi gerekiyor.

Görsel Hiyerarşi: Etkileşimli Arayüzler için Yeni Bir Görsel Kompozisyon Anlayışı

Görsel hiyerarşi nedir ve neden önemlidir? Görsel hiyerarşi, bilgiyi etkili bir şekilde iletmek ve anlamı iletmek için bir kompozisyondaki içeriğin düzenlenmesidir. Görsel hiyerarşi, izleyicileri önce en önemli bilgilere, ardından ikincil içeriğe yönlendirir.

Boyut, renk, şekil, mesafe, orantı ve yönelimin uygun kullanımıyla oluşturulan bir kompozisyonun anlamı, konsepti ve havası, görsel hiyerarşiyi belirleyen grafik öğelerin yaratıcı kullanımı yoluyla aktarılır.

İster ziyaretçinin gözünü yönlendirmesi gereken bir açılış sayfası olsun, isterse bir mobil kullanıcı arayüzünde gezinme olsun, görsel hiyerarşi her tür görsel tasarım için kritik öneme sahiptir. Kullanıcının her öğeyi anlaması, kompozisyondaki diğer öğelere ve bunların bağlamına bağlıdır. Görsel ilişkiler oluşturmak ve böylece bir tasarım boyunca görsel hiyerarşi oluşturmak için kompozisyon öğeleri buna göre işlenir.

Görsel Hiyerarşide Renk

Görsel hiyerarşi kurallarının çoğu oldukça basit ve hatta banal görünebilir, ancak bunlar iyi bir görsel tasarım için kritik bir temeldir. Örneğin renk, görsel tasarımda en etkili yaratıcı unsurdur.

Tek renkli bir çarpıya karşı kırmızı bir çarpının doğrudan çağrışımlarını düşünün. Kızılhaç, neredeyse evrensel olarak tarafsızlık ve koruma anlamına gelir. Renk kullanımı ile anında iletişim potansiyeli budur. Renk aynı zamanda grupları tanımlamak için de kullanılır, örneğin üç tek renkli olan arasında bir kırmızı çarpı bir şekilde daha belirgin olarak öne çıktığında olduğu gibi.

Parlak, zengin renkler, sessiz olanlardan daha fazla öne çıkar ve bu nedenle daha büyük bir görsel etkiye sahiptir. Bir arayüzde, renk bir yapı hissi sunmak ve mevcut etkileşimlere işaret etmek için kullanılabilir. Tek renkli bir arayüzdeki tek bir renk, bir seçimi ayırt edebilir ve hatta kullanıcının üzerine geldiği bir düğmenin ötesinde ne olduğunu önerebilir.

Renk ayrıca, izleyicinin bilinçaltına açık bilgi iletebilen anlam ve duygu ile tohumlanır. Markalaşmada, tüketicilerde bir markayla anlamlı bir etkileşime girmeden önce içgüdüsel bir tepki yarattığı için renk üzerine çok sayıda psikolojik araştırma yapılmıştır. Örneğin, maviler genellikle güvenilir, güvenli ve sakinleştirici olarak algılanırken, kırmızılar uyarıcıdır ve insanların kalp atışlarını arttırdığı bilinmektedir. Bununla birlikte, renklerin kültüre bağlı olarak farklı bir önemi olabilir.

Web tasarımında rengin anlamlı, yapısal kullanımına güzel bir örnek The Names for Change sitesidir. Site, yapısını renk kullanımıyla anında iletir; kuruluş varsayılan olarak dağınıktır ancak konuya ve/veya renge göre yeniden düzenlenebilir.

Bununla birlikte, seçilen tonlar, sitenin anlamındaki olası zorluklardan birinin üstesinden gelinmesine yardımcı olur. Çorap veya tampon gibi günlük ürünler için bağış toplama, kendini satacak kadar heyecan verici değildir, bu nedenle sitenin radikal grafik tonu, gerekli temel organizasyon yapısını kurarken günlük öğelerin algısal değerini yükseltir.

Görsel Hiyerarşide Boyut

Üç küçük kuşun yanında oturan büyük bir kuşun resmini hayal edelim. Daha fazla bilgi olmadan, bu basit grafik, öğeleri arasındaki ilişkiyi anında iletir: bir aileyi toplu olarak iletişim kuran bir ebeveyn ve çocuklar.

Geleneksel grafik tasarımda tipik bir strateji, en önemli öğeleri en büyük hale getirmek ve ardından öğeleri hiyerarşik olarak küçültmektir. Boyut, görsel hiyerarşiyi oluşturur, çünkü en büyük öğeler önce dikkat çeker ve bu nedenle en önemli gibi görünür.

Başlıklar, bölümler ve alıntılar gibi önemli farklılıkları belirtmek için metin gövdelerinde farklı yazı tipi boyutları da sıklıkla kullanılır. Resim alt yazıları gibi ikincil içerik, metnin ana gövdesiyle rekabet etmemek için genellikle daha küçüktür.

Instagram gibi en yaygın kullanılan görsel arayüzlerden bazılarını düşünün. Ekrandaki hiçbir şey görüntüler ve videolarla rekabet edemez; çoğu ekranın yüzde 60'ından fazlasını kaplarlar. Kullanıcı arayüzünün amacı anında gerçekleşir.

Web tasarımında tipik görsel hiyerarşi yapısını alt üst eden bir örnek, sanat/tasarım stüdyosu Ro/Lu'nun portföy sitesidir. Alışılmadık siteleri en sezgisel olmayabilir, ancak tipik çevrimiçi yaratıcı portföyün görsel düzenlemesine meydan okuyor. Çeşitli projelerinin kasıtlı olarak rastgele seçilmesi nedeniyle, bir ziyaretçi siteye her geldiğinde baskın olarak farklı bir proje ortaya çıkar ve bu da her ziyareti benzersiz ve ilginç kılmaktadır.

Çoğu yaratıcı tasarım stüdyosunun portföylerinde işler hiyerarşik olarak organize edilmez çünkü her proje benzersizdir ve eşit derecede önemli kabul edilir. Ro/Lu sitesinin tasarımı, her ziyarette değişen seviyelerde ilgi ile dinamik bir kompozisyon oluşturur ve izleyicileri stüdyonun kapsamlı portföyünü araştırmaya teşvik eder. Sonuç olarak, tasarım stüdyosunun eklektik, disiplinler arası doğası, içeriğin rastgele gösterimi ile temsil edilir.

Görsel Hiyerarşide Hizalama

Görsel hiyerarşide hizalama, öğeleri uzamsal olarak birbirine bağlayarak bir düzen duygusu iletir. Doğrusal olmayan bir romandaki bölümlerde olduğu gibi, grafik bir kompozisyonda çizginin dışında duran bir kare hayal edin. Tek bir unsur yerleşik bir yapıyı bozduğunda, kompozisyondan sıyrılır ve böylece diğerlerine göre anlam kazanır.

Bir öğe görsel ızgaradan, yani bir düzen duygusundan sıyrılmadıkça, katı bir kompozisyon durağan ve görsel olarak ilgisiz görünebilir. Yanlış hizalama veya "ızgarayı kırmak", bir grafik öğeye daha fazla görsel ağırlık vermek için bir fırsattır. Bu kavram, tasarımdaki görsel hiyerarşinin temelidir.

Geleneksel görsel tasarımda bir ilkeye göre, çerçevenin ortasına yerleştirilen öğeler daha önemli görünmektedir. Örneğin, birincil içerik veya arayüz öğeleri merkeze yerleştirilebilirken, gezinme, menüler ve diğer ikincil içerik genellikle kenarlarda tutulur.

Ancak öncü tasarımcılar statükoya meydan okumayı sever. Etkileşimli tasarım, temel görsel hiyerarşi ilkelerini uyguladığında ve ardından yenilikçi görsel kompozisyonların sınırlarını zorladığında, ilginç yeni deneyimler yaratılır. Farklı bir hizalama kullanılarak öğeler arasında yeni çağrışımlar ve anlamlar oluşturulur.

Örneğin, DNA projesi, müzisyenin albümünün yaratıcı yapısını iletmek için bir dizi kopuk hiyerarşiyi kullanan bir sitedir. Albümün yapımı gibi sitenin yapısı da karmaşık.

İlk olarak, ziyaretçiler albümün geleneksel olarak bir albüm formatında hizalanmış parçalarına tıklayarak müziği dinlemeye davet edilir. Bununla birlikte, ziyaretçilerin sitenin DNA öğelerini yeniden düzenlemelerine izin vererek, albüm konsepti sadece bir dizi parça olarak değil, zaman içinde parçalanmış öğelerin doğrusal olmayan bir yapısı olarak iletilir.

Görsel Hiyerarşideki Şekiller

Şekiller söz konusu olduğunda, basit kalp şeklinin çoğu sosyal ağ kullanıcı arayüzünde potansiyel kullanımını 'beğenme' için ne kadar çabuk ilettiğini düşünelim. Önem veya gruplar oluşturmak için dört daire arasında bir kalbi düşünün. Geometrik formlar, renklere benzer, çünkü şekiller, öğelere kişilik veya anlam veren belirli çağrışımlar taşır.

Etkileşimli tasarımda geometrik şekiller, anlamı metinden daha hızlı ve evrensel olarak ilettikleri için verimli iletişim için gereklidir. Metin yerine, genellikle basit geometrik şekiller olan simgeler (semboller), çoğu navigasyon sistemi ve kullanıcı arayüzü için analog haline geldi.

Bir görüntüyü 'beğenme', dosya indirme, telefon görüşmesi yapma veya bir mesajı kontrol etmenin ardındaki amaç, basit ve doğrudan simgelerle (geometrik şekiller) iletilir. Bu verimli görsel iletişim biçimi, dijital ürünlerin genellikle birden çok dilde geniş uluslararası izleyicilere hizmet ettiği küresel bir pazarda giderek daha önemli hale geliyor.

Geleneksel basılı ve dijital medya arasındaki farklı etkileşim modlarını vurgulamak için, Sanat bölümü için gerçek bir gazetede arama yapmak ile çoğu uygulamada arama simgesini kullanmak arasındaki farkı düşünün. Yakın zamana kadar, çoğu gazete web sitesi sayfalarını sanki basılıymış gibi düzenlerdi ve içeriği gözden geçirme deneyimi beceriksiz ve kafa karıştırıcıydı.

Geleneksel web düzenlerini kıran Signes du Quotidien web sitesi, ziyaretçilere içerik boyunca rehberlik eden benzersiz bir görsel hiyerarşi sunmak için temel kare ve daire şekillerini ince bir şekilde kullanır. Menü, sayfanın ortasındadır ve ziyaretçiler tıkladığında sitenin dört bölümünü temsil eden dört renkli nokta görünür. Ziyaretçiler daha sonra o bölüme gitmek için noktalardan birini kareye sürüklerler.

Görsel Hiyerarşide Hareket

Hareketli bir öğe, bir grup durağan öğede daha fazla görsel ağırlık taşıyacaktır ve görsel hiyerarşide hareket, basılı olarak kullanılması imkansız olan ancak görsel tasarımcının araç setine kesinlikle dahil edilebilecek bir ilkedir.

Hareket, kendisinin harfi harfine tercümesinden başka ne iletebilir? Hareket, genellikle bir kullanıcı arayüzünde, bir öğenin etkileşime girebileceğine dair bir ipucu olarak kullanılır. Hareket kullanımı daha ileri götürülüp benzersiz bir şeyi iletmenin bir yolu olarak kullanılabilir mi? Görsel hiyerarşi sadece iletişimin verimliliği ile ilgili değil, aynı zamanda gömülü anlam ile ilgiliyse, hareket temel bir görsel iletişim aracı olarak nasıl kullanılabilir?

I Remember sitesi için, ana arayüz (animasyonlu), etkileşime davet ettiği için hemen göze çarpıyor. Hareket ve arayüz işlevsel gezinme araçları olsa da, görsel tasarımcılar bu öğelerin potansiyel kaybını web sitesinin temel amacı olan Alzheimer hastalığını iletmenin bir yolu olarak kullandılar. Tıpkı organizasyonun bağış topladığı hastaların silinen anıları gibi, web sitesi de aktif etkileşim olmadan yavaş yavaş yok oluyor.

Bilgi Hiyerarşisinde Ses

Ses, yazılı basında kullanılması mümkün olmayan, ancak henüz hiyerarşi ilkeleri içinde geliştirilemeyen bir diğer araçtır. Ses tamamen görsel olmadığı için başvurulacak herhangi bir kural yoktur. Ancak ses, içeriğin yanı sıra ruh hali veya anlamı etkili bir şekilde ileten bir tasarım aracı da olabilir. Belirli sesleri taşıyan tasarım öğeleri birbirine göre gruplandırılabilir ve en cesur olanlar en önemli gibi görünebilir veya gruptan ayrılmayı ifade edebilir.

Bir öğeye eklenen sesin kalitesi, içeriği hızlı bir şekilde tanımlamalı, karakterize etmeli veya yapılandırmaya yardımcı olmalıdır. İlişkili görsel öğesiyle çelişen bir ses nasıl yeni bir anlam ifade edebilir?

Seslerin kendisi o kadar karmaşık olabilir ki, görsel herhangi bir şey algılanmadan önce bütün bir ruh halini veya bir tasarımın mesajını oluştururlar. Tıpkı renkli bir arka planın bir ruh hali oluşturması gibi, bir ses arka planda durabilir veya bir kullanıcı arayüzünde, örneğin mobil cihazlarda bir düğmeye dokunarak yanıt vermek gibi geri bildirim sağlayabilir. Tekniğin ilkesi temeldir, ancak uygulanabileceği yaratıcılık, sihrin olabileceği yerdir.

Kolektifin yaratıcı çalışmasındaki önemi nedeniyle, Alman sanatçı grubu ZERO'nun Guggenheim'daki sergisi için oluşturulan web sitesi, sesi atmosferik bir fon olarak ve ayrıca sitede gezinirken bir geri bildirim biçimi olarak kullanıyor. Cesur zil sesleri, bir temanın başlangıcını temsil eden parçaları oluştururken, üçüncül projeler arka planda tıklanır.

Görsel Hiyerarşi Kavramı

Görsel hiyerarşi basit bir kavramdır ve teoriyi anlamak, aslında bir tasarımcının iyi yapılandırılmış bir kompozisyonu uygulamadaki pratik yeteneğinden daha kolaydır. Bununla birlikte, iyi tasarımı korurken yeni bir ortamda yaratıcı olmak zordur.

Her zaman yeni ortamlar ortaya çıkıyor ve zorlu durumlar azalmayacak - tam tersi. Bugün kullanımda 200'den fazla farklı ekran boyutu var. Ve bu sadece iki boyutlu olanlar. Önce internet, masaüstü tarayıcılar, ardından cep telefonları ve tabletler geldi ve şimdi etkileşimli TV, IoT, giyilebilir cihazlar, sanal ve artırılmış gerçeklik gibi teknolojilerle yeni alanlara giriyoruz.

Dijital medyanın sınırlarını gerçekten zorlayan tasarım henüz emekleme aşamasında. Umarım, görsel hiyerarşi ve iyi tasarım ilkeleri, teknolojinin hızlı ilerlemesine ayak uydurur, böylece dijital medya deneyimimiz anlam ve zevkle dolu kalır.

Toptal Tasarım Blogunda daha fazla okuma:

• UX'inizi Net Görsel Hiyerarşi ile Güçlendirin
• Tasarım Temelleri – Görsel Hiyerarşi Rehberi (İnfografik ile)
• Tasarım İlkeleri: Hiyerarşiye Giriş
• Daha İyi Taranabilirlik için Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları
• Bu Başarılı Etkileşim Tasarım İlkeleri ile UX'inizi Güçlendirin