Optik yanılsamalar

Optik yanılsamalar

Bilgisayar kaynaklı hesaplamalar iyi bir tasarım için gerekli ama, bazen yeterli olmuyor. Çünkü bilgisayarlar henüz insan algısına yönelik hesaplamalar yapamıyor. Tasarımcıların, bu hesaplamalarla yetinmek yerine, içinde bulundukları duruma göre bazı müdahalelerde bulunmaları gerekiyor. Bu küçük detaylar, oluşturduğumuz tasarımın algısını baştan sona değiştirebiliyor.

Bu yazımda, bu detaylar arasındaki farklılıkları ve optik algıya uygun bir tasarım yaparken dikkat etmemiz gerekenleri derlemek istedim.


Biz tasarımcılar, kullandığımız programların verdiği bazı sayısal değerlere güveniyoruz. Sıklıkla kullandığımız Adobe Photoshop veya Illustrator gibi yazılımların belirli otomatik hesaplamalara dayanarak sunduğu yazı büyüklüğü, ölçeklendirme, renk kodları ve hizalama gibi bazı değerler, sadece matematik hesaplamalara dayanıyor ve insanların görme algısı için en ideal sonucu sunamıyor. Örneğin, iki farklı nesneyi, yazılımın bize sunduğu hizalama araçlarını kullanarak hizaladığımızda bu iki nesne ancak matematik olarak hizalanabiliyor; fakat insan gözü, bu iki nesneyi hizalı olarak algılayamayabiliyor. Bir başka örnek verecek olursak, farklı alanlar kaplayan ve aynı renklere sahip iki nesne, kullanıcı tarafından aynı renkte algılanmıyor.

Gelin, matematik hesaplamalar ile optik hesaplamalar arasındaki küçük farkların ne kadar büyük problemlere yol açtığını inceleyelim.

Hizalama ve görsel ağırlık

Günümüzde kullandığımız bilgisayar yazılımları, bir nesnenin ağırlığını doğru bir şekilde tahmin edemez; sadece genişlik, yükseklik veya konum gibi değerlerle bazı hesaplamalar yapabilirler. Dolayısıyla, optik olarak dengeli algılanabilecek bir tasarım için, tasarımcılar olarak bazı müdahalelerde bulunmamız gerekebilir.

Video oynatıcılarda sıkça karşılaştığımız, daire içerisinde yer alan bir üçgenle görselleştirilen “oynat” ikonunu ele alalım. Bu ikonda optik dengeye ulaşabilmek için, kullandığımız görsel tasarım yazılımındaki hizalama aksiyonları yeterli mi? Ne yazık ki, hayır. Gelin, bunu örnek bir görselle daha anlaşılır hale getirelim.

Play-Icon

Gözünüz, yukarıdaki görselde solda yer alan ikonları “doğru” olarak algılıyor, değil mi? Oysa matematik olarak ortalı olan, yani yazılım yardımıyla ortadan hizaladığımız görseller aslında sağdaki ikonlar. Bunun nedeni ise çok basit. Ağırlık, kapladığı alan nedeniyle üçgenin sol tarafında ve bu, insan gözünde optik bir yanılsama oluşturuyor. Bu problemi ise, ancak görerek ve elle yapabileceğimiz bir müdahaleyle çözebiliyoruz.

Renk

Konu bir renk dengesi yakalamak olduğunda yine bazı optik yanılsamalar devreye giriyor. Çoğu tasarımcı, renkleri RGB, CMYK ya da onaltılık (hex) tabanlı renk paletlerinin numerik kodlarını dikkate alarak belirler. Oysa insan gözü renkleri sadece renk kodlarıyla değil, bu renge sahip olan nesnenin kapladığı alanı da dikkate alarak algılar.

Colour-Hex

Solda göreceğiniz örnekte, aynı onaltılık renk kodlarıyla doldurulmuş bir ikon ve bir metin görüyoruz. Burada ikonun, metne göre daha koyu algılandığını fark etmiş olmalısınız. Oysa sağdaki örnekte metin rengi elle müdahale edilerek değiştirilmiş. Bu sayede ikon ve metin öğesinin optik olarak aynı renkte gibi algılanması sağlanmış.

Boyut ve ölçek

İlk örneğimize benzer bir durum ise bir arada kullanılan daire ve kare formundaki nesnelerde karşımıza çıkıyor. Bu iki nesnenin dış yüzeyleri birbirlerine hizalı olsa da, 120 piksel eninde ve 120 piksel boyunda bir kare, 120 piksel çapındaki bir daireden daha fazla alan kaplıyor. Dolayısıyla bu iki nesne arasında bir boyut dengesi oluşturmak için, daireyi belirli bir oranda büyütmemiz gerekiyor.

Elips

Bu duruma tipografide de rastlıyoruz. Yazı tipi tasarımcıları, bir arada kullanılan farklı görsel nesnelerden oluşan yazı tiplerinin bu dengeyi sağlayabilmesi için gerekli optik müdahaleleri yaptıkları için, okuduğumuz bir metinde böyle bir tutarsızlıkla karşılaşmıyoruz.

Bunu daha iyi anlayabilmek için gelin, Garamond yazı tipini inceleyelim. Aşağıdaki örnekte göreceğiniz üzere, aynı satırda yer alan “i” ve “o” harflerinin yüksekliklerinde küçük de olsa bir farklılık var. Bunu “g” ve “r” harflerinde de görebiliyoruz. Yazdığımız metinde zemin çizgisine ve x yüksekliğine bir rehber çizgisi çektiğimizde bu farklılık belirginleşiyor, ama Garamond yazı tipiyle yazılmış bir metni okurken bu farklılığı kolayca gözlemleyemiyoruz.

Typography

Peki, ne yapmalıyız?

Matematik tabanlı yazılımlar, görsel tasarım süreçlerinde en büyük yardımcılarımız. Ama bu araçları kullanırken, yaptığımız tasarımın insanlar tarafından tüketileceğini aklımızdan çıkarmamakta ve optik algı açısından problem yaratacak alanlar konusunda dikkatli olmakta fayda var; en azından kullandığımız yazılımlar daha “akıllı” hale gelene kadar.


Adobe Creative Cloud aboneliklerinde öğrencilere ve öğretmenlere özel %60 indirim fırsatlarını kaçırmayın.

Makalenin derlenmesinde lukejones‘dan yararlanılmıştır.

  • Sertan Arığ

    Genel de bu yanılma butonlar üzerine yazılan metinlerde de görülüyor. Metin yazılım tarafından matematiksel olarak ortalanıyor fakat metin gövdesinin ağırlığından dolayı hizalamaya elle müdahale edilmesi gerekiyor.

    • Umut Çağdaş Coşkun

      “metin gövde ağırlığı”ndan kastınız nedir? Tasarımcı değilim yalnızca meraktan soruyorum.

      • Huseyin Emanet

        Ascender, descender, x-height ve baseline kelimelerini araştırabilirsin tipografi ile ilgili. Türkçe olarak ifade edince biraz tuhaf olabiliyor.

      • Serkan Avcı

        Dikey hizalama yaparken karakterlerin çengellerini, üst noktalarını hesap dışı bırakmalısınız. Örneğin Photoshop “Açıklama” kelimesini butona dikey ortalarken ç harfinin çengeli yüzünden metni daha yukarıya konumlandıracaktır. Elle düzeltme yapmalısınız.

Bugün ilk makalen bizdendi.
Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol
KEŞFETMEYE DEVAM ET
Sistem odaklı düşünmenin 7 heyecan verici faydası
Tuba Çakır

Sistem odaklı düşünmenin 7 heyecan verici faydası