Web Tasarımınızda Simetrik ve Asimetrik Dengeden En İyi Şekilde Yararlanma

Bir web sitesinin görsel dengesi, kullanıcının deneyimi üzerinde anında (ve genellikle içgüdüsel) bir etkiye sahiptir. Dengeli bir kompozisyon doğru geliyor ve kullanıcılar onu hemen alma eğiliminde. Simetri ve asimetri kullanımı, büyük görsel dengenin temelidir.

Web tasarımınızda simetrik ve asimetrik dengeyi elde etmek teoride oldukça basittir, ancak her seferinde doğru yapmak pratikle gelir. Bu yazıda, görsel dengeyi sağlamak için birlikte nasıl çalıştıkları hakkında daha iyi bir fikir edinmek için tasarımdaki simetri ve asimetri ilkelerine bir göz atacağız.

Hadi içeri girelim!

Dengeli Kompozisyon nedir?

Görsel denge, insanları gördüklerinde iyi hissettirir. Görsel denge ve görsel dengesizlik arasındaki fark, rahatlık ve memnuniyet duygusuna karşı isteksizlik ve rahatsızlık hissidir. Bir şey iyi bir görsel dengeye sahip olduğunda, anında anlam kazanır. Hiçbir şeyin yerinde olmadığı ve kompozisyonun tam da olması gerektiği gibi olduğu hissini veriyor.

Simetri ve asimetri, tasarımcıların bir kompozisyonda görsel dengeyi sağlamak için kullandıkları iki tasarım tekniğidir. Simetri ve asimetri zıt kavramlardır, bu nedenle simetrik ve asimetrik denge birbirinin zıttıdır.

Her bir terimin tanımına daha yakından bakalım.

Simetri Nedir?

Simetri, bir görüntünün merkezinden bir çizgi çizilirse, her iki tarafın da aynı olmasa da çok benzer olacağını belirten görsel bir matematiksel kuraldır. Bu çizgi yatay, dikey veya çapraz olarak çizilebilir, bu nedenle yatay simetriye, dikey simetriye ve diyagonal simetriye yol açar. Bu üçü, 'yansıma simetrisi' olarak kabul edilir, çünkü görüntünün kendisini yansıtması gibidir.

Ek olarak, simetrinin üç türü daha vardır; radyal, transrasyonel ve rehber yansımalı. Dengeli bir kompozisyon elde etmek için bu dört simetri stilinden herhangi birini kullanabilirsiniz.

yansıma simetrisi

En yaygın simetri türü yansıma simetrisidir. Buradaki fikir, bölme çizgisinin her iki tarafının da diğeriyle neredeyse aynı olmasıdır. Örneğin, ikiye kesilmiş bir elma veya kanatları açık bir kelebek.

Radyal simetri

Radyal simetri, dairesel veya radyal bir şekil etrafında tekrarlanır. Örneğin, mandalalar ve dairesel rozetler.

öteleme simetrisi

Translasyonel simetri, bir şeklin görsel bir alanda tekrar tekrar tekrarlanmasıdır. Örneğin, kesintisiz bir desen.

Kılavuz Yansıma Simetrisi

Kılavuz yansıma simetrisi, yansıma simetrisine benzer ancak bir eksen üzerinde kayar. Örneğin, ayak izleri.

Asimetri Nedir?

Asimetri aslında simetrinin tam tersidir. Görsel olarak, kompozisyonun her bir tarafı diğerinden farklıdır. Başlangıçtan itibaren dengeli bir görsel teknik olan simetriden farklı olarak, asimetriyi dengelemek daha zordur. Asimetrik dengenin nasıl çalıştığını anlamanın en iyi yolu kaya dengeleme sanatıdır. Aşağıdaki resimde bir grup dengeleyici kaya görebilirsiniz. Kayalar mükemmel bir şekilde dengeli görünse de kompozisyon simetrik değildir. Kenarlar eşit olmasa da kompozisyon yine de ahenk ve görsel dengeyi çağrıştırıyor.

Asimetrik dengeyi elde etmek ne kadar zor olduğundan, normal simetrik dengeden çok daha hoştur. Bu nedenle, birçok web sitesinin ve derginin dengeli bir kompozisyon oluşturmak için asimetrik düzen kullanması şaşırtıcı değildir.

Web Tasarımında Simetrik Denge Örnekleri

Artık simetri ve asimetrinin ne olduğunu ve bu tekniklerin görsel bir denge elde etmenize nasıl yardımcı olabileceğini biliyoruz. Gelin bu bilgiyi web tasarımına taşıyalım ve kendi kreasyonlarınıza ilham vermek için bazı örneklere bakalım.

Polugar Rus Ekmeği Şarabı

Polugar web sitesine giriş, ürünlerini şık bir şekilde sunmak için yansıma simetrisini kullanır. Ortada bir şişe belirir ve her iki yanında girdap şeklinde şekiller oluşur. Daha sonra, kaydırdığınızda, üç şişe ekranı doldurdukça simetri genişler ve alttaki üç tanıtım yazısı gezinmenize yardımcı olur. Ürün sayfaları üç sütunlu simetrik bir ızgarayı takip eder ve göze çok hoş gelir.

Max Shkret Sanatçı Portföyü

Max Shkret'in bu tasarım portföyü web sitesi de biraz farklı bir şekilde yansıma simetrisine sahiptir. Simetri kenarlara kadar genişler. Web sitesinin geri kalanı simetriktir ancak yükleme sayfası kadar mükemmel değildir.

Olivier Oueneno Web Tasarım Portföyü

Tasarımcı Olivier Ouendeno'nun bu portföy web sitesi, kılavuz yansıma simetrisinin harika bir örneğidir. Hem yatay hem de dikey, neredeyse düzenli bir kaos gibi görünen benzersiz bir görsel denge sağlıyor.

Web Tasarımında Asimetrik Denge Örnekleri

Yukarıda bahsettiğim gibi asimetrik denge, simetrik denge kadar kolay sağlanamaz. Bununla birlikte, bir web tasarımcısı asimetrik bir dengeyi yönettiğinde sonuçlar muhteşemdir. Web tasarımında bazı asimetrik denge örneklerine bir göz atalım. Bunlar kesinlikle yaratıcı zihin akışınıza ilham verecek.

Anasayfa Toplum Tasarımcısı Web Sitesi

Home Societe web sitesine ilk girdiğinizde, bir dergi yayınının parçası gibi görünen bir şeyle karşılaşacaksınız. Soldaki tam yükseklikte bir görüntü dikey bir menüyü çerçeveler. Sağda sıska serif türünde bir cümlenin parçaları vardır. Bu web sitesi ilk bakışta hoş görünüyor ama sonra yatay kaydırmayı kullandığınızda hayat buluyor. Tüm site baştan sona kusursuz bir asimetrik dengeye sahiptir.

Başlık CBD Yağı

Headery CBD Oil için bu site ilk bakışta simetrik görünebilir, ancak aslında mümkün olan en ince asimetrik dengedir. Ürün başlığı ekranda ortalanarak bir başlangıç ​​simetrisi oluşturulur ancak damlalıklı şişeler soldadır. Bu, sağda daha fazla boş alan bırakır. Merakla, sarı sohbet düğmesi dengeyi yaratan şeydir.

Adjuvan Sermaye Web Sitesi

Adjuvant Capital web sitesi, ekran küçüldüğünde daha da iyi görünen çapraz asimetrik bir denge kullanır. Sağdaki üçgen bir videodur ve sol üstteki metin bloğunu dengeler.

Simetrik ve Asimetrik Dengeli Divi Düzenleri

Ne düşünüyorsun? Simetrik veya asimetrik bir görsel denge için hangi teknik daha iyidir? Bence ikisi de oldukça şaşırtıcı. Biraz ilhama baktıktan sonra, bu görsel denge tekniklerini kendiniz denemek istemeniz gerekir. Neyse ki Divi kitaplığında başlamanıza yardımcı olacak çok sayıda düzen var.

Hadi bir bakalım.

Kripto Para Birimi Düzeni – Simetrik Denge

Cryptocurrency Consulting düzeni, güzel bir yansıtıcı simetrik dengeye sahiptir. Sağdaki beyaz düğme, genel simetriye görsel bir asimetri zorladığı için mavi arka plan üzerinde gerçekten çok iyi göze çarpıyor.

Okape Meyve Suyu Dükkanı – Simetrik Denge

Divi'den bir başka güzel simetrik düzen, Okape Juice Shop düzenidir. Ana simetriyi oluşturmak için ekranda üç şişe ortalanmıştır. Düzenin geri kalanı, ince bir kılavuz yansıma simetrisini korur.

Kayropraktik Hizmetler – Asimetrik Denge

Yeni Kayropraktik düzeni güzel bir asimetrik dengeye sahiptir. Solda büyük bir görüntü ve sağda turuncu görüntü kutusu gölgesiyle dengelenen turuncu bir düğme var. Düzenin her bölümü asimetrik bir denge ile kurulur, ancak her şeyi kaydırdığınızda, aynı zamanda kılavuz yansıma simetrisi gibi hissettirir.

Çevre Gezileri – Asimetrik Denge

Gezi Turları için bu düzen, güzel bir kaosa benzeyen asimetrik denge türüdür. Fotoğrafların bulanık ve dalgalı kenarları ile iç içe geçen kutuların düz çizgileri nedeniyle görsel denge çekici.

Görsel Denge ile Tasarım Sıranız

Tüm bu görsel ilhamla, tasarımlarınıza simetri ve asimetri uygulama sırası sizde. Simetri ve asimetri kurallarını ve dengeli bir kompozisyonun nasıl elde edilebileceğini hatırlayın. Kullanıcılarınızın sitenizde kalmak ve bu tekniklerle gezinmek istediğinden emin olun.

Flat art / Shutterstock.com aracılığıyla Öne Çıkan Görsel