Görsel Ağırlık Nasıl Dengelenir? Web Sitesi Tasarım Rehberi

Görsel ağırlık nedir ve web sitesinde neden dengelemelisiniz?

Görsel ağırlık, bir tasarım öğesinin gözü ne kadar güçlü çektiğini anlatan algısal değerdir. Büyük, koyu, renkli ve yoğun öğeler ağır gözükür; küçük, açık ve sade öğeler hafif kalır. Dengeli bir sayfada ağırlığı rastgele değil, bilinçli biçimde paylaştırırsınız.

Bu rehberde görsel ağırlık kavramını web sitesi açısından ele alıyoruz. Yani yazı içeriğini değil, tasarımı konuşuyoruz: boyut, kontrast, boşluk ve odak noktası bu işin dört temel kolu.

Ziyaretçi bir sayfaya girdiğinde metni okumadan önce yerleşimi tarar. Dolayısıyla gözü ilk çeken öğe, sayfanın size verdiği ilk mesajdır. Dolayısıyla ağırlığı yanlış dağıtırsanız yanlış öğe öne çıkar ve asıl hedef, yani teklif ya da satın alma düğmesi, gölgede kalır.

Ekibimiz tasarım denetimlerinde bu sorunu çok sık görüyor. Örneğin sayfa güzel gözükür ama göz nereye bakacağını bilemez. Çözüm süslemeyi artırmak değil, ağırlığı yeniden dağıtmaktır.

Görsel ağırlık hangi unsurlardan oluşur?

Görsel ağırlığı tek bir özellik belirlemez. Çünkü birkaç özellik birlikte çalışır ve bazen birbirini dengeler. Küçük ama çok kontrastlı bir düğme, büyük ama soluk bir fotoğraftan daha ağır görünebilir.

Tasarımcıların sahada en çok kullandığı unsurlar şunlardır:

• Boyut: Büyük alan kaplayan öğe, aynı özellikteki küçük öğeden ağır gözükür.
• Kontrast: Zemininden güçlü ayrışan öğe gözü hızla yakalar.
• Renk: Gözünüz doygun ve sıcak tonları, soluk ve soğuk tonlardan daha ağır algılar.
• Yoğunluk: Detayı çok olan bölge, sade bölgeden daha fazla dikkat toplar.
• Konum: Sayfanın üstünü ve solunu, alt ve sağ tarafa göre daha güçlü okursunuz.
• Yalıtım: Çevresinde boşluk bırakılan öğe daha ağır hisseder.

Ancak bu altı unsuru tek tek tanımanız yeterli değil. Asıl iş, hangisini ne zaman kısacağınıza karar vermektir. Çünkü bir öğeyi ağırlaştırmanın en ucuz yolu, çevresindeki diğerlerini hafifletmektir.

Boyut görsel ağırlığı nasıl etkiler?

Boyut, görsel ağırlığın en kolay yönetilen kaldıracıdır. Çünkü bir öğeyi büyüttüğünüzde göz ona önce gider. Ancak her büyütme, sayfadaki diğer öğeleri otomatik olarak geri plana iter.

Örneğin ana sayfada devasa bir kahraman görseli kullanırsanız başlık ve düğme bu görselin altında kalır. Bu nedenle görselin boyutunu, ona eşlik eden başlığın boyutuyla birlikte planlamanız gerekir.

Pratik bir kural önerelim: bir ekranda yalnızca bir öğe "en büyük" olsun. Ayrıca ikinci en büyük öğe birincinin yarısı kadar ağırlık taşısın. Üçüncü düzey ise destek rolünde kalsın.

Böylece göz bir sıra izler. Boyutlar birbirine çok yakınsa göz kararsız kalır ve sayfa kalabalık gözükür. Üstelik bu kararsızlık ziyaretçinin sayfada geçirdiği süreyi değil, sayfadan çıkma ihtimalini artırır.

Bununla birlikte boyut farkını abartmak da hata olur. Çok küçük bıraktığınız öğeyi kimse okumaz, tıklamaz ve mobilde dokunma alanı da kalmaz. Bu yüzden oranları ölçerek seçmek, tahminle seçmekten daha güvenlidir.

Kontrast ve renk görsel ağırlığı nasıl artırır?

Kontrast, ağırlığı boyuttan bağımsız biçimde yükseltir. Örneğin açık zeminde koyu bir blok, çok küçük olsa bile dikkat çeker. Ama aynı blok koyu zeminde kaybolur. Kısacası ağırlık, öğenin kendisinden çok zeminle ilişkisinden doğar.

Renk tarafında şu eğilimleri görürsünüz: doygun tonlar ağırlaşır, pastel tonlar hafifler. Ayrıca sıcak renkler öne gelir, soğuk renkler geride durur. Ama marka renginiz zaten doygunsa her yerde kullanmak ağırlığı dağıtır ve hiçbir yer öne çıkmaz.

Bu yüzden vurgu rengini bir sayfada az sayıda öğeye ayırmanızı öneririz. Örneğin yalnızca ana düğme ve bir ya da iki bağlantı vurgu rengi taşısın. Böylece geri kalan her şey nötr tonlarda kalsın.

Kontrast aynı zamanda erişilebilirlik konusudur. Özellikle metin ve zemin oranını ölçmek için renk kontrast kontrol aracını kullanabilirsiniz. Konuyu daha derin işlemek isterseniz ayrıca tasarımda kontrast kullanımı yazımıza ve renk psikolojisi rehberimize göz atın.

Beyaz alan görsel ağırlığı nasıl dengeler?

Beyaz alan, yani boş bırakılan bölge, görsel ağırlığın sessiz ortağıdır. Boşluk bir öğeyi yalıtır ve ona nefes aldırır. Bu nedenle çevresi boş olan küçük bir öğe, kalabalık içindeki büyük bir öğeden daha çok dikkat çekebilir.

Boşluğu dolgu olarak görmeyin. Çünkü boşluk bir tasarım aracıdır ve ağırlığı doğrudan etkiler. Bir bölümü hafifletmek istiyorsanız içeriğini azaltmak yerine çevresindeki boşluğu da gözden geçirin.

Sayfada üç tür boşluk vardır:

• Mikro boşluk: Satır aralığı, harf boşluğu ve düğme iç dolgusu.
• Makro boşluk: Bölümler arası dikey mesafe ve sütun araları.
• Aktif boşluk: Bir öğeyi bilerek yalıtmak için bıraktığınız geniş alan.

Dengesiz sayfalarda genellikle makro boşluk eşit değildir. Örneğin bir bölüm sıkışık, diğeri aşırı geniş kalır. Bu durumda göz, boşluğu yanlış okur ve önemli bölümü atlar. Minimalist web tasarım yaklaşımı bu konuda iyi bir referanstır.

Konum ve yerleşim görsel ağırlığı nasıl değiştirir?

Aynı öğeyi sayfanın farklı yerlerinde farklı ağırlıkta algılarsınız. Yani üst bölge ağır, alt bölge hafif gelir. Sol taraf, soldan sağa okuyan kullanıcı için başlangıç noktasıdır; dolayısıyla gözünüz önce oraya gider.

Merkeze yakın öğeler de ek ağırlık kazanır. Örneğin sayfanın tam ortasına koyduğunuz küçük bir öğe bile dikkat çeker. Buna karşılık kenara ittiğiniz büyük bir öğe ise etkisini kısmen kaybeder.

Özellikle göz hareketi tarafında F okuma modeli işinize yarar. Kullanıcılar metin ağırlıklı sayfalarda önce üst satırı, sonra sol kenarı tarar. Bu nedenle önemli öğeleri bu rota üzerine yerleştirmek, ağırlığı doğal akışla birleştirir.

Ayrıca kıvrım üstü alan ilk izlenimin geçtiği yerdir. Bu alanda yalnızca bir ana ağırlık merkezi olsun. Üstelik ikinci ve üçüncü ağırlık merkezlerini kaydırmadan sonra tanıtmak, ilk ekranı sadeleştirir.

Simetrik ve asimetrik denge arasında nasıl seçersiniz?

Simetrik denge, ağırlığı merkez eksenin iki yanına eşit paylaştırır. Böylece düzenli, güvenli ve resmi bir izlenim verir. Hukuk, finans ve kurumsal siteler bunu sık tercih eder.

Asimetrik denge ise farklı ağırlıktaki öğeleri karşı karşıya koyar. Örneğin sol tarafta büyük bir görsel, sağ tarafta küçük ama kontrastlı bir başlık ve düğme durur. Sonuç daha dinamik ve modern gözükür.

Ancak seçimi sektörünüz ve hedefiniz belirler. Aşağıdaki tablo iki yaklaşımı karşılaştırıyor:

Hangisini seçerseniz seçin tutarlı kalın. Çünkü bir sayfada simetrik, diğerinde asimetrik kurgu kullanmak markanın görsel dilini bozar.

Odak noktasını nasıl belirlersiniz?

Her sayfanın tek bir birincil odak noktası olmalıdır. Bu nokta genellikle sayfanın asıl amacıdır: teklif formu, satın alma düğmesi ya da ana mesaj. Bu yüzden odak noktasını önce yazıyla belirleyin, sonra tasarıma dökün.

Basit bir cümle kurun: "Bu sayfaya gelen ziyaretçi önce şunu görmeli." Cümleyi tamamlayamıyorsanız sayfanın amacı net değildir. Bu durumda ağırlığı dengelemek de mümkün olmaz, çünkü dengeleyecek bir hedef yoktur.

Odak noktasını güçlendirmek için şu adımları izleyin:

1. Sayfanın tek hedefini belirleyin ve tek cümleyle yazın.
2. Bu hedefe hizmet eden öğeyi seçin; genellikle bir başlık ve bir düğmedir.
3. Öğeyi diğerlerinden biraz büyük, belirgin biçimde daha kontrastlı yapın.
4. Çevresindeki boşluğu genişletin ve yarışan öğeleri sadeleştirin.
5. Sayfayı gözlerinizi kısarak izleyin; ilk görünen şey odak noktanız mı?

İkincil odak noktaları olabilir, ama sayısı azdır. Kısacası üç ya da dört eşit güçte odak, aslında odak olmadığı anlamına gelir.

Görsel hiyerarşiyi görsel ağırlıkla nasıl kurarsınız?

Hiyerarşi, öğelerin önem sırasına göre okunmasını sağlayan düzendir. Görsel ağırlık ise bu düzeni kuran ham maddedir. Yani hiyerarşiyi ağırlık farklarıyla inşa edersiniz.

Üç basamaklı bir yapı çoğu sayfada yeter. Birinci basamak ana başlık ve ana düğmedir. İkinci basamak alt başlıklar, görseller ve destekleyici bloklardır. Üçüncü basamak ise açıklama metni, dipnot ve ikincil bağlantılardır.

Her basamak bir öncekinden belirgin biçimde hafif olmalı. Çünkü farklar küçükse hiyerarşi bulanıklaşır. Ama farklar fazla büyükse sayfa kopuk gözükür. Bu nedenle oranı bulmak için test etmeniz gerekir.

Ana sayfada bu düzenin nasıl kurulacağını ana sayfa tasarımı yazımızda öğeleriyle anlattık. Uygulama tarafında ise web tasarım hizmetimiz kapsamında her sayfa için ağırlık haritası çıkarıyoruz.

Fotoğraf, ikon ve illüstrasyon görsel ağırlığı nasıl yönetir?

Görseller sayfadaki en ağır öğelerdir. Örneğin bir fotoğraf, aynı alanı kaplayan metinden her zaman daha güçlü çeker. Bu yüzden görseli yerleştirmeden önce neye hizmet ettiğini sormalısınız.

Üstelik fotoğrafta yüz varsa göz önce yüze gider. Yüzün baktığı yön de ağırlığı yönlendirir: kişi düğmeye doğru bakarsa göz de düğmeye akar. Bu küçük detay, çoğu zaman ek hiçbir çaba gerektirmeden sonucu iyileştirir.

İkonlar ve illüstrasyonlar ise daha hafiftir. Çizgi ikonlar sade kalır, dolgulu ikonlar ağırlaşır. Aynı satırda iki farklı ikon stili kullanırsanız ağırlık dengesizleşir.

• Gerçek fotoğrafı ana mesajı desteklediği yerde kullanın.
• Aynı bölümdeki ikonlarda tek stil ve tek kalınlık seçin.
• Arka plan görsellerini bulanıklaştırın ya da karartın; metin öne çıksın.
• Dekoratif görselleri küçük tutun ve sayfa başına sayısını sınırlayın.

Gerçek ekip ve ürün fotoğraflarının stok görsellere göre güven verdiğini de biliyoruz. E-ticarette görsel dil yazımızda bu konuyu ayrıntılandırdık.

Tipografi görsel ağırlığı nasıl taşır?

Yazı da bir görsel öğedir ve ağırlık taşır. Kalın ve büyük bir başlık, ince ve küçük bir paragraftan çok daha ağırdır. Dolayısıyla tipografi, hiyerarşinin en hızlı kurulduğu yerdir.

Ağırlığı yönetmek için üç değişken yeterlidir: punto, kalınlık ve renk. Başlıkta üçünü birden artırmak gerekmez. Büyük bir başlık ince kalabilir, küçük bir başlık ise kalın ve koyu olabilir.

Ancak çok fazla kalınlık seviyesi karışıklık yaratır. Çoğu site için iki ya da üç kalınlık yeter. Metin için normal, vurgu için yarı kalın, başlık için kalın kullanabilirsiniz.

Satır uzunluğu ve satır aralığı da gri tonu belirler. Sıkışık satırlar koyu bir blok gibi gözükür ve sayfayı ağırlaştırır. Rahat satır aralığı ise metni hafifletir.

Font seçimi tarafında web tipografisi seçimi rehberimiz size yol gösterir. Orada okunabilirlik, hız ve marka uyumunu birlikte ele alıyoruz.

Mobilde görsel ağırlığı nasıl yeniden dengelersiniz?

Masaüstünde dengeli görünen sayfa, mobilde dağılabilir. Sütunlar alt alta dizildiğinde ağırlık tek eksende birikir. Sayfanın üst kısmındaki büyük görsel tüm ekranı kaplar ve başlık ile düğme aşağı kayar.

Bu nedenle mobilde ağırlığı yeniden planlamanız gerekir. Görselleri küçültün ya da kırpın, ana başlığı ve düğmeyi ilk ekranda tutun. Düğmeyi başparmağın ulaşacağı alana yakın yerleştirin.

Kontrol ederken şunlara bakın:

• İlk ekranda başlık, kısa açıklama ve ana düğme birlikte yer alıyor mu?
• Görsel, metni ekranın dışına itiyor mu?
• Dokunma alanları yeterince büyük ve birbirinden ayrık mı?
• Boşluklar küçük ekranda orantılı mı yoksa sıkışık mı?

Mobil öncelikli yaklaşımı mobil öncelikli tasarım yazımızdan okuyabilirsiniz. Önce küçük ekranı kurarsanız ağırlık sorunlarını erkenden yakalarsınız.

Görsel ağırlık performansı ve erişilebilirliği nasıl etkiler?

Ağır görsel, ağır dosya anlamına da gelir. Sayfanın en büyük öğesi çoğunlukla büyük bir görseldir ve yükleme hızını doğrudan belirler. Google, en büyük içerik öğesinin yüklenme süresini (LCP) ölçer ve iyi sonuç için 2,5 saniye ya da altını hedefler (web.dev, LCP).

Boyutunu tanımlamadığınız görseller ise sayfa yüklenirken kaymaya yol açar. Bu da düzen kayması puanını bozar; iyi sonuç için hedefiniz 0,1 ve altıdır (web.dev, CLS). Yani görsel ağırlığı yönetmek aynı zamanda teknik bir iştir.

Erişilebilirlik tarafında WCAG, normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı ister (W3C, Contrast Minimum). Soluk gri metinle hafif bir sayfa kurmak güzel görünse de bu sınırın altına düşmemelisiniz.

Görsellerinizi hafifletmek için görsel optimizasyonu rehberimize bakın. Hızlı bir başlangıç için resim küçültme aracımız işinizi görür.

Dengesiz sayfalarda hangi hatalarla karşılaşırsınız?

Dengesizlik genellikle belirli kalıplarla ortaya çıkar. Aşağıdaki hatalar ekibimizin denetimlerinde en sık karşılaştığı örneklerdir:

• Her öğenin aynı boyutta ve aynı vurguda olması; göz hiçbir yere yerleşemez.
• Birden fazla büyük görselin aynı ekranda yarışması.
• Vurgu renginin her yerde kullanılması; sonuçta hiçbir yer vurgulu kalmaz.
• Ana düğmenin ikincil düğmelerle aynı görünmesi.
• Sol tarafın aşırı yüklü, sağ tarafın boş bırakılması.
• Aşırı dar boşluklar yüzünden bölümlerin birbirine karışması.

Bu hataların çoğu "her şey önemli" düşüncesinden doğar. Oysa her şeyi öne çıkarırsanız hiçbir şey öne çıkmaz. Önceliklendirme, tasarımın en zor ama en değerli kısmıdır.

Çözüm için önce sayfadaki öğeleri önem sırasına dizin. Ardından en önemli üç öğeye ağırlık verin, geri kalanı hafifletin. Bu sıralamayı müşteriyle ya da ekiple birlikte yapmanız, sonradan çıkacak tartışmaları da azaltır.

Görsel ağırlık dengesini nasıl test edersiniz?

Dengeyi sezgiyle değil, basit testlerle doğrulayın. Bu testler pahalı araç gerektirmez ve çoğu dakikalar içinde biter.

1. Göz kısma testi: Ekrandan uzaklaşın, gözlerinizi kısın. Hâlâ seçilen öğe, sayfanın en ağır öğesidir.
2. Bulanıklaştırma testi: Ekran görüntüsünü bulanıklaştırın. Ana düğme ve başlık hâlâ seçebiliyor musunuz?
3. Gri tonlama testi: Renkleri kaldırın. Hiyerarşi renk olmadan da çalışıyorsa kontrastınız sağlamdır.
4. Beş saniye testi: Birine sayfayı beş saniye gösterin ve ne hatırladığını sorun.
5. Isı haritası: Gerçek kullanıcıların nereye baktığını ve tıkladığını inceleyin.

İlk üç test tasarım aşamasında, son ikisi canlıda işe yarar. Isı haritası verisi varsayımlarınızı doğrular ya da çürütür; böylece tasarımı rakama bağlarsınız.

Daha kapsamlı bir inceleme için UX denetimi yazımızı okuyun. Denetimde ağırlık dağılımı da ele alınan başlıklardan biridir.

Sayfa türüne göre görsel ağırlığı nasıl dağıtırsınız?

Her sayfa tipi farklı bir hedefe hizmet eder, dolayısıyla ağırlık dağılımı da değişir. Ana sayfa markayı anlatır, ürün sayfası satışa götürür, blog yazısı okutur.

Aşağıdaki tablo, sahada başlangıç noktası olarak kullandığımız bir yaklaşımı özetliyor. Bu bir garanti değil, saha tecrübesine dayalı bir çıkış noktasıdır:

Tabloyu kendi sitenize uyarlayın. Önemli olan, her sayfada ağır öğenin sayfanın hedefiyle aynı olmasıdır. Eşleşme yoksa tasarım hedefe değil, kendine hizmet ediyor demektir.

Görsel ağırlık denetimi için adım adım kontrol listesi nedir?

Aşağıdaki kontrol listesini yeni sayfalar tasarlarken ve mevcut sayfaları gözden geçirirken kullanabilirsiniz. Her maddeye evet diyemiyorsanız o madde bir iyileştirme fırsatıdır.

1. Sayfanın tek hedefini yazıyla ifade ettiniz mi?
2. Ekranda tek bir en ağır öğe var mı?
3. Ana düğme ikincil düğmelerden belirgin biçimde ayrışıyor mu?
4. Vurgu rengini sınırlı sayıda öğede mi kullanıyorsunuz?
5. Boşluklar bölümler arasında tutarlı mı?
6. Görsellerin boyutları ve yönü ana mesajı destekliyor mu?
7. Metin kontrastı WCAG sınırlarının üstünde mi?
8. Mobil görünümde ağırlığı yeniden dengelediniz mi?
9. Sayfa hızı görsellerin ağırlığı yüzünden düşmüyor mu?
10. Göz kısma ve bulanıklaştırma testlerini geçtiniz mi?

Listeyi bir kez uyguladıktan sonra sonuçları kaydedin. Birkaç hafta sonra aynı sayfaya dönüp dönüşüm verisiyle karşılaştırın. Böylece hangi ağırlık kararının işe yaradığını öğrenirsiniz.

Görsel ağırlık ile görsel hiyerarşi aynı şey midir?

Hayır, ama birbirine sıkı bağlıdır. Görsel ağırlık bir öğenin dikkat çekme gücüdür. Görsel hiyerarşi ise bu güçlerin sayfada nasıl sıralandığını anlatır. Yani ağırlık ham veridir, hiyerarşi ise o verinin düzenidir.

Bir benzetme yapalım: ağırlıklar müzikteki notalara, hiyerarşi ise bestenin kendisine benzer. Notaları doğru seçmeden iyi bir beste yazamazsınız. Ama notaları rastgele dizerseniz de ortaya müzik çıkmaz.

Pratikte iki ayrı soruyu yanıtlarsınız. Birincisi, hangi öğe ne kadar ağır? İkincisi, bu ağırlıklar okuma sırasını doğru kuruyor mu? İlk soruyu ölçerek, ikincisini kullanıcı testiyle yanıtlamak daha sağlıklıdır.

Bu ayrım ekip içinde de işinize yarar. Tasarımcı ağırlığı ayarlar, içerik yazarı önem sırasını belirler. İkisi aynı tabloda buluşmazsa sayfa güzel olur ama yanlış şeyi öne çıkarır.

Hareket ve koyu tema görsel ağırlığı nasıl değiştirir?

Hareket, ağırlığı en hızlı artıran unsurlardan biridir. Gözünüz, ekranda kıpırdayan küçük bir öğeyi hareketsiz büyük bir öğeden önce fark eder. Bu nedenle animasyonu dikkatli seçmelisiniz.

Örneğin sürekli dönen bir rozet, ana başlığı gölgede bırakabilir. Buna karşılık ana düğmeye eklediğiniz hafif bir geçiş efekti, odağı doğru yere çeker. Hareketi odak noktasına hizmet eden öğeye saklayın.

Koyu temada denge tersine döner. Açık renkli öğeler ağırlaşır, koyu öğeler kaybolur. Dolayısıyla açık zeminde kullandığınız vurgu renkleri, koyu zeminde aynı etkiyi vermez. Aynı turuncu düğme iki temada aynı gücü taşımaz.

• Sürekli hareket eden öğeleri sayfa başına bir ile sınırlayın.
• Kullanıcı hareket azaltma tercihini seçtiyse animasyonları kapatın.
• Koyu temada vurgu renklerini ayrıca test edin.
• Parlak beyaz bloklardan kaçının; gözü yorar ve ağırlığı bozar.

Hareket tarafında daha fazla örnek için mikro animasyon yazımıza göz atın. Orada hareketin ne zaman yardım ettiğini, ne zaman engel olduğunu anlatıyoruz.

Örnek bir ana sayfada görsel ağırlığı nasıl yeniden kurarsınız?

Şimdi varsayımsal bir senaryo üzerinden gidelim. Bu bir örnek kurgudur, gerçek bir müşteri vakası değildir. Bir hizmet firmasının ana sayfasında dört büyük görsel, üç parlak düğme ve altı eşit boyutlu kart olduğunu düşünün.

Ziyaretçinin gözü bu sayfada sürekli sıçrar. Çünkü her öğe aynı güçte bağırır. Dönüşüm düğmesi de diğer düğmelerin arasında kaybolur.

Yeniden kurmak için şu sırayı izleyebilirsiniz:

1. Dört görselden yalnızca birini büyük bırakın, diğerlerini küçültün ya da kaldırın.
2. Üç düğmeden yalnızca birini dolgulu ve vurgu renginde tutun.
3. Diğer düğmeleri çerçeveli ya da metin bağlantısı biçimine çevirin.
4. Altı kartı iki satıra dizin ve ilk satırdaki kartı biraz daha büyük yapın.
5. Bölümler arasındaki boşluğu eşitleyin ve ilk ekrandaki alanı genişletin.

Sonuçta sayfada tek bir birincil odak, birkaç destek öğesi ve bol nefes alanı olur. Üstelik bu değişiklik yeni içerik gerektirmez; yalnızca mevcut öğelerin ağırlığını yeniden dağıtırsınız. Etkiyi mutlaka öncesi ve sonrası verisiyle ölçün.

Marka rengi ve görsel ağırlık çatışırsa ne yaparsınız?

Marka kılavuzları çoğu zaman renkleri tanımlar ama ağırlığı tanımlamaz. Sonuçta çok doygun bir marka rengi, sayfanın her yerinde ağır bir etki yaratabilir. Bu durumda markayı bozmadan dengeyi kurmanız gerekir.

İlk çözüm, rengi kullandığınız alanı daraltmaktır. Örneğin marka rengini yalnızca düğmelerde ve küçük vurgu çizgilerinde tutun. Geniş zeminlerde ise rengin açık bir tonunu ya da nötr bir tonu seçin.

İkinci çözüm, aynı rengin farklı tonlarını tanımlamaktır. Böylece ana düğme tam doygunlukta, ikincil öğeler ise daha açık tonda durur. Markanın kimliğini bozmazsınız, ağırlığı ise kademelendirirsiniz.

Üstelik bu yaklaşım erişilebilirliği de iyileştirir. Çünkü açık tonlu zeminlerde koyu metin kullanmak kontrast oranını kolayca yükseltir. Marka kimliği tarafında daha fazla bilgi için ekibimizin marka kimliği çalışmalarına da göz atabilirsiniz.

Site büyüdükçe görsel ağırlık dengesini nasıl korursunuz?

Tek bir sayfada dengeyi kurmak kolaydır. Zor olan, site büyürken bu dengeyi korumaktır. Çünkü her yeni bölüm, her yeni kampanya bandı ve her yeni düğme ağırlığı değiştirir.

Bunun için bileşenlere ağırlık seviyesi atayın. Örneğin "birincil düğme", "ikincil düğme" ve "metin bağlantısı" olmak üzere üç düğme seviyesi tanımlayın. Her yeni sayfada aynı seviyeleri kullanırsanız dengeyi kendiliğinden korursunuz.

Bu fikir tasarım sisteminin temelidir. Tasarım sistemi yazımızda bileşen mantığını ayrıntılı anlattık. Ayrıca her ekran için "en ağır öğe hangisi?" sorusunu inceleme listesine ekleyin.

• Kampanya bantlarını aynı anda en fazla bir tane gösterin.
• Yeni bölüm eklerken mevcut bölümlerin boşluk değerlerini kopyalayın.
• Her yayından önce göz kısma testini yineleyin.
• Üç ayda bir ana sayfayı yeniden gözden geçirin.

Böylece site yıllar içinde büyüse bile ziyaretçi aynı net hiyerarşiyi görür. Bu tutarlılık, kullanıcının sitede kendini evinde hissetmesini sağlar.

Görsel ağırlık çalışmasını biz nasıl yürütüyoruz?

Talha Aslan ve ekibi olarak web tasarım projelerinde önce sayfa hedeflerini ve önem sırasını netleştiriyoruz. Ardından düşük detaylı bir taslakta ağırlık haritasını çıkarıyor, renk ve tipografiyi bu haritaya göre seçiyoruz.

Canlıya çıktıktan sonra ısı haritası ve dönüşüm verisiyle tasarımı doğruluyoruz. Çünkü güzel görünen sayfa ile iş getiren sayfa her zaman aynı değil. Kendi sitenizdeki dengeyi dışarıdan bir gözle değerlendirmek isterseniz web tasarım sayfamızdan bize ulaşabilirsiniz.

Kısacası görsel ağırlık bir süs değil, yönlendirme aracıdır. Boyut, kontrast, boşluk ve konumu bilinçli kullandığınızda ziyaretçi nereye bakacağını düşünmeden doğru yere bakar. Bu da daha net mesaj, daha yüksek güven ve daha iyi dönüşüm demektir.