Does perfect alignment mean perfect design? Symmetry Isn’t Always the Answer

Tasarımda “optik illüzyon” konusu aslında oldukça derin bir başlık. Ancak ben bu yazıda meseleyi biraz daha algı ve yaklaşım tarafıyla ele almak istiyorum. Çünkü tasarım sürecinde, özellikle de görsel hiyerarşi ve hizalama üzerine konuşurken, insanların sık sık çizgiler çekerek “bak, bu hizalı değil” deme eğilimiyle karşılaşıyoruz. Mobil arayüzlerden baskı işlerine, web tasarımlarına kadar neredeyse her alanda bu tür yorumlara rastlamak mümkün.

Üstelik bu sadece hizayla sınırlı değil; bazen de “bu butonun rengiyle bu yazının rengi aynı değil” gibi ufak farklar üzerinden abartılı bir böbürlenme hali doğuyor. Elbette kullanıcıya net bir deneyim sunmak önemli, ancak insan gözü her zaman matematiksel doğrulara sadık kalmaz. Görsel denge ve algı, sayısal tutarlılıktan daha güçlü olabilir.

Bu konuyla doğrudan ilişkili olmasa da, zamanında Google DevFest etkinliğinde yaptığımız Usable Psychology for User Interfaces sunumunu buraya bırakmak istiyorum. Bu tip algısal detaylar orada da sıkça karşımıza çıkmıştı.

Yazının çok uzun olmasını istemiyorum; çerezlik bir okuma olarak kalmasını tercih ederim. Ama ilgisini çekenler için yazının sonunda, bu konuyla ilgili daha teknik ve kapsamlı kaynakların linklerini de paylaşıyorum.

İnsan gözü oldukça farklı şekilde çalışır; gördüğümüz her şeyin sayısal olarak eşit olması, görsel anlamda da dengeli algılanacağı anlamına gelmez. Denge, leke dağılımı, görsel hiyerarşi gibi birçok faktör devreye girer. Bu durumu en basit haliyle şöyle örnekleyebiliriz: Bir dolgu (fill) buton ile hemen yanında yer alan aynı renkteki bir metin, gerçekte aynı renk değerine sahip olsalar bile gözümüze farklı görünebilir. Çünkü buton, rengi daha geniş bir alana yayarak daha baskın bir etki yaratır. Metin ise daha dar bir alanda kaldığı için daha zayıf algılanır. Bu dengeyi sağlamak adına, metnin rengini biraz daha doygun hale getirmek gerekebilir. Sonuç olarak göz, bu denge düzeltmesini algılamaz; iki öğeyi aynı renkteymiş gibi görür.

Bir diğer sık karşılaşılan örnek de “Başlat (Play)” butonunun bir daire içine yerleştirilmesi. Bu tür simgelerde onay/oynatma işareti (▶) dairenin tam ortasına konumlandırılsa bile, göz bunu genellikle kaymış olarak algılar. Bu yüzden, görsel olarak dengede durması için ikon bilinçli şekilde biraz yukarı ya da sağa kaydırılır. Sayısal olarak ortada olması, her zaman görsel olarak ortada görünmesini sağlamaz.

Benzer bir durum, yazılarla hizalı yerleştirilen oval butonlarda da karşımıza çıkar. Butonun oval şekli, hiza çizgisine birebir oturtulduğunda hizasız gibi algılanabilir. Bu yüzden tasarımcılar genellikle butonun kenarlarını, görünmez bir çizgiyle hizayı “bozuyormuş” gibi dışarı taşır—aslında tam da olması gerektiği gibi yerleştirerek.

Gelelim Gökhan Kurt’un atıfta bulunduğu paylaşıma. Bir kullanıcı, iOS arayüzündeki yerleşimleri tamamen optik illüzyonun varlığını göz ardı ederek, kırmızı çizgilerle tüm öğelerin “yanlış hizalandığını” göstermeye çalışmış. Oysa ilgili paylaşımın altında, yorumlarda bu yerleşimlerin ardında yatan mantığı anlatan, referanslı yanıtlar da mevcut.

Eğer siz de bu kuralları uyguluyorsanız ve biri gelip tasarımınıza bir çizgi çekip “bak bu hizalı değil” derse, artık buna verecek cevabınız var. Yaptığınız şeyin bir dayanağa ve görsel algıya göre kurgulandığını göstermek çoğu zaman yeterli olacaktır—en azından çoğu kişiyi ikna etmeye yetecek kadar.

Son olarak, bu yazıda sadece yüzeyine dokunduğum bu konuyla ilgili daha teknik ve kapsamlı birkaç makaleyi yazının sonunda paylaşıyorum. Göz atmanızı mutlaka öneririm.
Visually distorted - when symmetrical UI looks all wrong
Optical Illusion Science Projects
Creating Visual Intrigue with Optical Illusions: Inspiring Visuals & Design Tips

🇬🇧 English version

A few weeks ago, I came across a repost post by Gökhan Kurt on X, bringing back an old but ever-relevant discussion in the design world: optical illusions. Especially for those unfamiliar with the topic, there’s a tendency to rely solely on symmetry—drawing lines and insisting “this is the correct alignment.” Unfortunately, this isn’t just a case of social media nitpicking; it’s something almost every designer faces on a weekly basis.

Optical illusion in design is a deep topic. But in this post, I want to touch on it more from a perception and mindset perspective. During the design process—especially when working with visual hierarchy and alignment—it’s common to encounter people drawing lines and saying, “Look, this isn’t aligned.” Whether it’s mobile interfaces, print designs, or web layouts, these comments appear everywhere.

And it’s not just about alignment. Sometimes you’ll hear remarks like, “This button color isn’t the same as this text color,” with an oddly proud tone. Of course, providing a clear and cohesive user experience is important, but the human eye doesn’t always follow mathematical logic. Visual balance and perception often outweigh numerical precision.

I don’t want this to be a lengthy piece—think of it more as a quick, snackable read. Still, for those who are curious, I’ve included a few technical and more comprehensive articles at the end of this post.

The human eye works in unique ways; just because elements are mathematically equal doesn’t mean they’ll look balanced. Concepts like visual weight, composition, and hierarchy come into play. Here’s a simple example: imagine a filled button next to a text label, both using the exact same color. Although the color values are identical, the button appears more dominant because the color spreads across a larger area. The text, being confined to a narrow space, appears lighter or weaker in comparison. To correct this imbalance, the text color might need to be slightly more saturated. Interestingly, our eyes will perceive both as being the same, simply because the visual weight feels balanced.

Another popular example is the Play button often placed inside a circle. Even when mathematically centered, the triangle icon (▶) often appears off. That’s because our eyes expect it to be slightly shifted—to the right or upward—for it to feel visually centered. So designers intentionally make this micro-adjustment to create the perception of balance, not just the numbers.

Similarly, when placing an oval button next to text, aligning its shape to the same baseline might look off. This is because the curved ends of the button throw off the visual alignment. To compensate, designers often extend the button slightly beyond the alignment line, creating what looks like an “off” placement—but is in fact the visually correct one.

Which brings us to the post Gökhan Kurt referenced. A user shared screenshots of the iOS UI and, completely ignoring the idea of optical illusion, added red lines to show that none of the elements were “properly” aligned. But if you check the replies, you’ll find people sharing thoughtful and informed counterpoints that explain the logic behind these choices.

So, if you follow these principles and someone draws a line on your design saying “this isn’t aligned,” now you’ll have a well-informed response. Showing that your decisions are rooted in perception and backed by best practices is often enough to settle the conversation—or at least to keep your confidence intact.

To dive deeper, here are some great articles I recommend:
Visually distorted - when symmetrical UI looks all wrong
Optical Illusion Science Projects
Creating Visual Intrigue with Optical Illusions: Inspiring Visuals & Design Tips