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

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.

optik1

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.

optik2

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ü.

optik3

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.

optik4

İ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 :)

Son Yazılar
Yorum ( 9 )
  1. Mert Can Eyriyer
    17 Ağustos 2015 at 10:27 am

    Eline sağlık Hasan Ağabey :) Tam da merak ettiğim konuydu…

  2. Rıza Selçuk Saydam
    17 Ağustos 2015 at 11:10 am

    Optik Denge Merkezi’ni gündeme getirdiğin ve bu güzel yazı için teşekkürler Hasan abi.

    İlgilenenlere ayrıca Play iconu hakkında yazılmış bu makaleyi de önermek isterim: https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175

  3. Tayfun Demir
    17 Ağustos 2015 at 11:51 am

    Her zaman ki gibi şahane bir yazı olmuş.
    Ellerinize sağlık.

  4. Umut Çağdaş Coşkun
    18 Ağustos 2015 at 2:49 am

    Vay be… Teşekkürler yazı için merakla okudum. :)

  5. Mehmet Karaca
    19 Ağustos 2015 at 10:31 am

    Teşekkürler, önemli bir konu.
    Bu arada tebrikler Selçuk. Yeni işin hayırlı olsun.

  6. Necmettin
    30 Ağustos 2015 at 2:48 pm

    Hasan hocam gerçekten sizin yazılarınızı merakla bekliyoruz. Görsel ağırlık merkezi örneğinizi çok beğendim elinize sağlık

  7. Elazığ Teko İlaçlama
    26 Eylül 2015 at 10:31 pm

    Merak edilen bir konuydu anlatım için teşekkür ederim.

  8. Serdar sezer
    29 Eylül 2015 at 8:24 am

    geometrik merkez ve eşit aralık mantığı içime sinmediğinden tasarımlarımı genelde optik denge gozeterek yapıyordum ama doğru yolda mıyım değil miyim diye bir türlü emin olamıyordum. yazı için teşekkürler hocam. sayenizde bu ikilemden kurtuldum. :)

  9. BARIŞ
    19 Eylül 2016 at 3:16 pm

    Eminim benim gibi birçok arkadaş bilmeden optik dengeyi kullanıyordur. Bu şekilde belgelemek hoş oldu, teşekkürler :)

Bir cevap bırakın
Captcha Captcha güncellemek için resime tıkla