Arayüz Tasarımında Optik Denge Kavramı

Sizlere uzun zamandır söz etmek isteyip bir türlü fırsat bulamadığım, tasarımlarınızı daha iyileştirecek önemli bir kavramdan söz etmek istiyorum: Optik Denge.

Aslında grafik tasarımın genel kuralları içerisinde yer alan optik denge ve simetri kavramları, iş arayüz tasarımına gelince biraz daha komplike bir hal alıyor.

Siz her ne kadar milimetrik çalışsanız da, her obje ya da elementi yerli yerine koysanız da, göz ve beyinin algısı sizin oluşturduğunuz kompoziyon kadar metrik çalışmıyor. Algı farklı olunca da aslında hatasız olmasına rağmen, gözün kendine has algısı ve beyninizin bu algıyı yorumlaması sonucu ortaya denegeden yoksun eserler çıkabiliyor. Çok tecrübeli olmayan tasarımcıların pek umursamadığı bu kavram, zaman içinde -ki kendimi de bu konuda örnek gösterebilirim- sizin için değişmez bir alışkanlık haline gelerek tasarımlarınızın bir parçası olacaktır.

Şimdi bu dengeyi nasıl kurabilir, ortaya daha düzgün ve estetik işler nasıl çıkarabiliriz, bir kaç örnek ve ipucuyla sizlere açıklamaya çalışayım.

Temel olarak geometrik ve optik merkezlemeden söz edecek olursak, durumu aşağıda gördüğünüz şekil ile açıklamak mümkün. Gözün algı yolları (Kırmızı çizgiler) siz geometrik olarak siyah noktayı merkezleseniz de, sanki kanvasın alt kısmına daha yakınmış gibi görünür. Bunun için merkezlemek istediğiniz objeyi olması gerekenden biraz daha yukarıda göstermek tasarımı kurtaracaktır. Özellikle tek ekran tasarımlarda, özellikle sunum ekranlarında tasaımcıyı zorlayacak bir yerleşim şekli olabilir.

Diğer yandan ağırlık noktası ortada olan ancak dışa doğru taşma yapmış görsellerde de sık sık hata yapmak mümkün.

En basitinden bir banner tasarımı ele alalım. Elimide bir logo bir de yazı var diyelim. Logomuz da bu yanan futbol topu olsun.

Solda görünen banner geometrik olarak objeyi tam olarak merkezlediğinizde ortaya çıkan sonuç. Çünkü görselin optik ağırlık merkezi tam olarak topun kapsadığı alan. Bu durumu düzeltmek için, topun kapsadığı alanı merkez olarak belirleyip tasarımda yerleşimi ona göre yapmak gerek.

Simetri tasarımlar için önemli bir başka konu başlığı. Özellikle modern web tasarımı trendlerinde hemen her stil flat tasarım ilkeleri üzerinden ağırlıklı olarak kutu ve kart mantığı ile tasarlandığından simetri konusu da bir kat değer kazanıyor.

Ancak ne yazık ki geometrik ya da bir başka deyişle matematiksel olarak simetrik olduğunu bildiğimiz, öyle tasarladığımız bir çok unsuru gözlerimiz ve beynimi bu şekilde algılamamakta ısrar ediyor.

Çözüme gene örnekler ile gidelim.

Tasarımınızda bir kutu ya da kart içine yerleşim yapacağınız durumlarda objenin dört bir yanından eşit boşluklar bırakmalısınız, zaten bu iş güzel gözüksün diye değil bir tasarım kuralı. Buradaki çalışmada ben 30 piksellik boşuklar bıraktım. Birbiri ile bağıntılı objelerin arasına da (Başlık, alt başlık, metin v.b) yine doğal olarak aynı oranda boşluk verdim.  Ortaya çıkan sonuç ise korkunç denebilir. Tamamen dengesiz bir tasarım, kutunun altına daha yakın duran bir ağırlık ve asimetrik bir görüntü.

Oysa tüm paylarımız eşitti. Kullanıcıyı bu görsel kandırmacadan kurtarmak için ise en azından kendi çalışmalarımda  iki yol kullanıyorum. Birisi kutu içerisinde yer alan objelerin aralıklarını düzenleme, diğeri ise kutunun kendisini.

Kutu içerisindeki objelerin aralarını tam olarak yarı yarıya azaltınca aslında istediğimiz dengeli görüntüye ulaşmak mümkün. Burada 30’un yarısı olan 15 piksellik değeri uyguladım. İkinci yöntem olan kutu boyutları oynamak için ise yine yarı değer olan 15 pikseli kutunun boyuna ekledim, normalde geometrik olarak 30 piksel olması gereken boşluk şimdi 45 piksel ama göze daha dengeli ve simetrik olarak görünüyor.

Bu tip denge ve simetri konularında size tavsiyem genel olarak kullandığınız boşluk/aralık değerinin yarısına odaklanmanız. 20 ise 10, 30 ise 15 gibi. Genelde çözüme beklediğinizden hızlı ulaşacaksınız.

Kafanızı daha çok karıştırmadan bir de Türkçe harfler ve buton hizalamalarından söz etmek istiyorum. İngilizce site hazırlayan bilir, buton üzeri yazı hazırlamak, içerisinde metin geçen her tasarımı yapmak daha kolaydı. Türkçe’nin kendine özgü çengelli ve noktalı karakterleri özellikle buton tasarımlarınızın bozulmasına sebep olan en önemli etken. Çünkü harflerimizin kendine has bu minik özellikleri, tasarım içerisindeki optik dengeyi bozmak için birebir.

Örneklerimize dönecek olursak, kutu, kart ya da buton tasarımlarında çengelli metinlerin çengellerini yok sayıp, garfik ağırlık merkezi olarak harflerin kendisini almamız temel kural.

İlk buton örneğinde hizalamayı çengeller üzerinden yaparken, diğerinde geometrik ağırlık merkezi olan harfleri baz alarak yaptım. Aradaki ciddi farkı görmeniz mümkün.

Optik dengeleme kavramı tipografide de geçerli bir kural. Ancak şimdi bir de fontların dünyasına girip aklınızı daha fazla karıştırmak istemem. Bir ipucu vermek gerekirse Photoshop kullanırken metinlerinizi düzenlemek için Metrik yerine Optik seçeneğini kullanırsanız daha çok işinize yarayabilir. Bu özellik sayesinde metin çalışmalarınızı geometrik gerçeklik oranı yerine optik gerçeklik üzerinden yapabilirsiniz.

Hepinize keyifli tasarımlar dilerim :)