Tasarımda görsel hiyerarşi çok önemli bir konudur. Muhtemelen tasarımcı arkadaşlar biraz daha aşinadır bu terime. Ancak özellikle yeni başlayacak arkadaşlarımız, bu bilgiler ışığında işlerine çalışırlarsa, gelişme süreçleri hızlanacak ve doğrudan kaliteli bir video yapabilmeleri için gerekli tüm kuralları öğrenmiş olacaklar. Şimdi konuyu daha iyi anlamanız için size hemen herkesin daha önce en az bir kez gördüğü bir örnek göstereyim.
Görsel Hiyerarşi
Muhtemelen mevzuyu anlamışsınızdır. Size, okumanızı ve dikkatinizi çekmeyi istediğim sıraya göre bir tasarım hazırladım hızlıca. Bunu yaparken boyut, kontrast, boşluk ve yazı tipinde değişiklikler yaptım. Böylece bu görsel hiyerarşiye uygun bir tasarım olmuş oldu. Şimdi eğitimde ayrıntılı olarak değinmiş olsak da burada bazı görsel hiyerarşi unsurlarına değinmek istiyorum. Bu temeller, göz zevki ve estetik açıdan da çok önemlidir.
Tasarımda Görsel Hiyerarşi Nedir?
Tasarımda görsel hiyerarşi, görsel ögelerin önem sırasına göre derecelendirilmesidir. Görsel hiyerarşi ilkelerini şu şekilde sıralayabiliriz: Boyutlandırma, hizalama, tekrarlama, renk ve konumlama.
1-Boyutlandırma
İlk verdiğim örnekteki gibi, metinler ya da nesneler arasında diğer her özellik aynı olsa bile karşı tarafın ilgisini sırasıyla çekmek istiyorsanız boyutlandırma farkıyla dikkatleri istediğiniz sıraya göre çekebilirsiniz. Böylece bir web sayfasındaki ya da tasarımlarınızdaki algıyı istediğiniz gibi yönlendirerek kişilerin ilgisinin dağılmasını engelleyebilir ve ona göre etkileyici tasarımlar ve animasyon videolar yapabilirsiniz. Uygulamada benzer örnekleri değerlendireceğiz.
2-Hizalama
Hizalama, tasarımın en önemli kurallarından biridir. Yeni başlayan birçok tasarımcı ya da animasyoncu arkadaşın hizalamaları eksik yaptığını görüyoruz. Tabii her zaman dikkatinizi tam veremeyebilirsiniz. Ya da bazen acil işleriniz olduğunda zamanınız olmayabilir. Ancak mümkünse bu kurala daha projeye yeni başlarken dikkat ederseniz, ileride revizelemeniz gereken bir eksik de olmayacaktır.
Hizalama sayesinde, gözünüz nesneler arasındaki görünmez çizgiyi algılamış gibi o bütünlükten tatmin olacaktır. Zaten başta Illustrator’den tutun, Canva ve Vyond’a kadar birçok programın kendi içerisinde size hizalamayı gösteren cetvelleri mevcuttur.
3-Tekrarlama
Tekrarlama, vurgulanmak istenilen obje ya da ögenin bilinçli şekilde bir uzantı üzerinde çoğaltılmasıdır. Kendi içerisinde doku, renk, şeffaflık değişebilir ancak her biri bir sonraki ögenin vurgusunu kuvvetlendirir. Ben, özellikle bu kuralı videodan ziyade tasarımlarda daha faydalı görüyorum. Ancak tekrar da aynı anda değil ancak sırasıyla göstermek amacıyla kullanılabilir ya da hareketlendirilebilir. Ama sahneyi doldurup karmaşıklaştırmasının da tercih edilmediğini söylemeliyim.
4-Renk/Kontrast
Renk bir tasarımın göze hitap etmesindeki en temel unsurlardandır. Gerek web sitelerinde, gerekse de video ve tekli tasarımlarda bu kurala uyarak tasarımı çekici hale getirebilirsiniz. Ancak bu kuralı uygulamazsanız göz uyumunu bozma ihtimaliniz çok yüksek. Kontrast dediğimiz terim ise iki ya da daha fazla nesne arasındaki görsel farklılığa denir. Yine bu özelliği doğru kullanırsak gözü yormayan ve fark edilmesi gerekeni fark ettiren bir tasarım ortaya koyabilirsiniz.
5-Konumlama
Konumlama gözün olası hareketlerine göre nesne ve yazıların yerlerinin belirlenmesidir. Örneğin, çoğu web site için göz yukarıdan aşağıya doğru okur. Yatay olarak ise dikkat önceliği soldan sağa olarak ilerlemektedir. Bunun sebebi ise okuma alışkanlığından kaynaklıdır. Bu hususta iki ayrı düzen mevcuttur. Bunlara “F” ve “Z” düzeni denilmektedir. Aralarındaki fark ise web sitelerinin içeriğinden kaynaklanmaktadır. Bu kalıplara uymaksızın dikkat çekici bir tasarım yapmak çok zordur.
Görsel Hiyerarşi Sıralaması
Yoğun bilgi içerikli web site görsellerinde F düzeni geçerlidir. İnsanlar okumayı soldan sağa ve sonra yukarıdan aşağı önceliklemesi ile okuyarak F şeklini oluşturan bir düzende ilerlerler. Örneğin bir forum sayfasında, haber sitesinde ya da arama motorlarının sonuç sayfalarında da yine F düzeninde okuma gerçekleşir. Sol tarafta gördüğünüz üzere sırasıyla dikkat çeken noktaları numaralandırdık.
Z düzeni ise içerik bakımından çok fazla yazının bitişik şekilde bir kitap gibi sunulmadığı ve gerek görsel gerek yazı gerek videolarla zenginleştirilmiş web sitelerde ya da tasarımlarda geçerlidir.
Bu yüzden temel olarak web siteleri bu düzene göre hazırlanır. Genelde sol üst kısımda logo, sonrasında menüler ve arama çubuğu olurken, aşağı çapraza doğru ise “Call to action” cümleleri olan ve hedeflenen butonlar konumlandırılır.
Tasarımda görsel hiyerarşi konusunu özet şeklinde anlatmaya çalıştım. Tasarımda görsel hiyerarşi unsurlarını barındırarak animasyon videosu yapmak da haliyle özenli bir prodüksiyon ve ekip çalışması gerektiriyor. Eğer siz de Vyond üzerinden 2D animasyon videonuzu hem tasarımsal unsurlara dikkat ederek hem de nitelikli bir içerikle birleştirmek istiyorsanız bizimle iletişime geçebilirsiniz.
