close
optik-yanilsama-2

Optik olarak dengelenmiş simgeler, şekillerin doğru hizalamak ve mükemmel yuvarlak köşeler hazırlamak.

Gözümüz garip organlardır, çoğu zaman bize yalan söyleyebiliyorlar. Fakat insanların görsel algısının özelliklerini biliyorsanız, daha doğru ve temiz tasarımlar oluşturabilirsiniz. Optik hileler kullanmak sadece font tasarımcılarına değil aynı zamanda etkileşim halindeki arayüz tasarımcıları içinde oldukça faydalı.

1. Ölçülen ve Optik ölcü

Hangisi daha büyük: 400 px ölçüsünde bir karemi yoksa 400 px ölçüsünde bir dairemi? Geometrik olarak her ikisinin yükseklik ve genişlik değeri aynı. Fakat aşağıdaki resime bir göz atalım. Gözlerimiz bize karenin daireden daha yüksek olduğunu söylemekte. Bu arada ağırlık ile ilgili kelimeler optik yanılsamayı tanımlamak için daha uygundur.

Bu şekillerin doğru bir hizada ve yükseklikte olduğuna inanmıyorsanız klavuz çizgileri olan diğer versiyonuna aşağıdan göz atalım.

Şimdi bir kare ve daire içeren bir resime daha göz atalım. Bunlar sizce görsel ağırlık bakımından eşit sayılabilir mi?

Benim için evet eşit ağırlığa sahip her ikisi de. En azından hangisinin bir diğerinden daha ağır olduğunu bir bakışta söylemek zor. Şaşırtıcı değil, çünkü dairenin yarı çapı 50 px arttı.

Bunun nasıl olduğunu göstermek için ilk örnekten (400 px kare ve daire) ve ikinci örnekten (400 px kare ve 450 px daire) şekilleri üst üste çakıştıralım. Sizinde gördüğünüz gibi sol şekilde “a” bölgeleri ağırlık oluşturuyorken sağ şekilde ise “b” bölgeleri daireye ağırlık kazandırıyor. sol tarafta ki şekilde kare daireyi kapsarken, sağ şekilde kare ve daire birbirini kapsamıyor her birisinin bağımsız 4 parçası mevcut.

Aynı etki diğer şekiller içinde geçerlidir. Kare ile aynı ağırlıkta görünmesi için diğer şekillerin kareden biraz daha büyük olması gerekmektedir.

Peki bu özellik arayüzünde nasıl kullanılır? Örneğin, bir dizi simge oluştururken, simgeleri dengeli yapmanız önemlidir, böylece hiçbir simge çok fazla öne çıkmaz veya çok küçük görünmez. Kare alanlara doğrudan simgeler çizersek, daha kare görünüme sahip simgeler daha büyük görünecektir.

Ve şimdi optik olarak dengelenmiş bazı ikonlara bakalım.

Şimdi bir ikon alanının her zaman ikon gövdesinden daha büyük olduğunu açıkça görüyoruz, sadece kare olmayan ikonlara uyması ve kare ikonlardan daha küçük görünmemesini sağlamak için.

Görsel dengeyi kontrol etmenin en kolay testi, öğeleri bulanıklaştırmaktır. Simgeleriniz az yada çok benzer lekelere dönüşürse, aynı optik ağırlığa sahip olmuş demektir.

Ancak bazen mevcut grafiklerle, örneğin paylaşım ve beğenme düğmeleri olarak kullanılan sosyal ağ simgeleri ile çalışmaktayız. Facebook ve Instagram ikonları kare, oysa Twitter kuş silueti ve Pinterest ile çevrelenmiş “P” ile temsil edilir. İşte bu yüzden Twitter ve Pinterest simgeleri biraz daha büyük, bu yüzden Facebook ve Instagram simgeleriyle dengeli görünüyorlar.

Optik denge sorununun bir başka örneği, yuvarlak bir düğme ile birlikte yerleştirilen bir metin kutusudur. Düğme çapı metin kutusu yüksekliğine eşitse, düğme gözlerimizden daha küçük görünür, ancak biraz büyütürseniz tüm yapı dengelenir.

Ancak butonun stilini değiştirirseniz, genişleme gerekmeyecektir. Aşağıdaki resimde düğme ve metin kutusu 80 piksel yüksekliktedir ancak sağdaki düğme, güçlü siyah dolgu nedeniyle komşu metin kutusuyla daha dengelidir.

Hatırlatmakta fayda var

  • Optik ağırlık, insan gözlerinin bir cismin boyutunu ve önemini nasıl algıladığıdır ve mutlaka piksel boyutuna eşit değildir.
  • Kare biçimlerle kare olmayan şekilleri dengelemek için kare olmayan şekilleri daha büyük yapmak gereklidir.
  • Simgeler için alanın bir kısmı optik dengeleme için ayrılmış olmalıdır. Tutarlı bir şekilde görünmesi gereken simge kümeleri için çok önemlidir.

Üç bölümden oluşacak bu yazının birinci bölümünü burada bitiriyoruz. Takipte kalmaya devam edin devamı için.

Kaynak: https://medium.muz.li/optical-effects-9fca82b4cd9a

Tags : arayüzikonlarkare va daireoptik yanılsamaşekillersimgelerTasarım

Leave a Response