Web Tasarımında Simetri ve Asimetri: Dengeyi Nerede Kurmalı

Simetri ve asimetri sayfa düzeninde iki ayrı iş yapar. Simetri taramayı kolaylaştırır, asimetri bakışı belirli bir yere çeker. Bu ikisini estetik tercih sanmak, tartışmayı en baştan yanlış yere kurar: asıl soru sayfanın o bölümünde kullanıcıdan ne beklendiğidir.

Simetri düzen kurar, asimetri hiyerarşi

Simetri, öğelerin bir eksen çevresinde dengeli dağılmasıdır. Menüler, formlar, fiyat tabloları, alt bilgi alanları: kullanıcının tek tek okumayacağı, hızla tarayacağı her yer simetrik düzene uygundur. Göz eşit aralıklı yapıyı bir kez öğrenir, sonra ona bakmayı bırakır. İyi bir navigasyonun görünmez olması bundandır.

Asimetri tam tersini yapar. Eşitliği bozarak bir öğeyi diğerlerinin önüne geçirir. Kahraman alanı, tek bir eylem butonu, öne çıkarılan kampanya bloğu asimetrik düzenin doğal yeridir. Sayfada vurgulanacak tek bir şey varsa asimetri çalışır; üç şey varsa hiçbiri vurgulanmaz ve düzen sadece dağınık görünür.

Simetri türlerinin pratikte kaçının karşılığı var

Tasarım yazılarında dört simetri türü sıralanır: dönel, yansımalı, ötelemeli ve kaydırmalı yansıma. Bu sınıflandırma süsleme ve desen matematiğinden gelir, sayfa düzeninden değil. Bir CSS ızgarasında gerçekten karşılığı olan ikisidir.

• Ötelemeli simetri: Aynı kartın belirli aralıklarla tekrarı. Ürün listeleri, galeriler, blog akışları. Izgara sisteminin kendisi zaten budur.
• Yansımalı simetri: Bir eksenin iki yanında ayna düzeni. Ortalanmış logo ve iki yana açılan menü, iki sütunlu eşit bloklar.

Dönel simetri logoda ve ikonda görülür, sayfa iskeletinde görülmez. Karuseller ötelemeli tekrardır, kaydırmalı yansıma değildir: orada aynalanan hiçbir şey yoktur. Bu ayrımı yapmak önemli, çünkü olmayan bir kategoriyi tasarım kararı diye taşımak insanı boş yere düşündürüyor.

Asimetride denge görsel ağırlıkla kurulur

Asimetrik düzen dengesiz düzen demek değildir. İki sütun 1:3 oranında bölündüğünde bile sayfa dengeli durabilir, yeter ki dar sütun kontrastla, koyu renkle ya da tek güçlü bir görselle ağırlığını taşısın. Boşluk da ağırlıktır: geniş bir beyaz alan, yanındaki yoğun metin bloğunu dengeler.

Denge bozulduğunda bunu göz hemen anlar, sebebini söyleyemez. Pratik kontrol basit: sayfayı bulanıklaştırıp bakın, hangi tarafın çöktüğü tek bakışta görülür.

Asimetri tek bir kırılma noktasında yaşar

Buradaki asıl sorun estetik değil, uygulama. Asimetrik bir kompozisyon kurduğunuzda o kompozisyon yalnızca geniş ekranda vardır. Mobilde düzen tek sütuna iner ve bütün görsel ağırlık hesabı ortadan kalkar; geriye yalnızca öğelerin sırası kalır.

Sıra da kaynak koddaki sıradır. Masaüstünde sağ üstte duran, dolayısıyla ilk görülen eylem butonunuz, işaretlemede en sonda tanımlıysa mobilde sayfanın dibine düşer. Grid ile yerini değiştirerek bunu görsel olarak düzeltmek mümkün ama ekran okuyucu ve klavye ile gezinme yine kaynak sırasını izler, yani erişilebilirliği bozarsınız. Asimetriyi mobil sırayı belirledikten sonra kurun, tersi değil.

Bu kararı A/B testiyle çözemezsiniz

Yaygın tavsiye şudur: iki düzeni test edin, hangisi kazanırsa onu kullanın. Sorun, simetrik ve asimetrik iki sürümün yalnızca simetride farklılaşmamasıdır. Boşluklar, görsel boyutları, metin uzunlukları, hepsi birlikte değişir. Çıkan sonuç düzene değil, o pakete aittir ve başka bir sayfaya taşınamaz.

Test edilebilir olan tek şey tek değişkendir: butonun konumu, görselin tarafı, sütun oranı. Bunları ayrı ayrı ölçün. Simetri ve asimetri arasındaki seçim ise ölçüm işi değil, karar işi: taranacak yerde simetri, tıklanacak yerde asimetri.