Web Tasarımında Denge Kullanımı
Web tasarımındaki dengeyi yakalamak bazı düşünce, çaba ve beceri gerektirir, ama kesinlikle buna değer. Bir bütün olarak daha geniş bir tasarım kategorisine uygulanabilecek olan denge hakkındaki en önemli şey, yarattığınız şeyi kullanıcı deneyimine hizmet etmeyen aşırı ve aşırı bir karışıklıktan koruyabilmesidir. Başka bir deyişle, web tasarımındaki denge, tasarımcı olarak o kadar güzel bir ılımlı noktaya sahip olmanızı sağlar. Çok fazla değil ama çok az değil. Çok gürültülü değil, çok ince değil. Müşterilerinizin tüm kullanılabilirlik hedeflerine ulaşırken tüm tasarımınızı uyum içinde tutar. Şimdi bu kesinlikle tasarımcının araç kutusuna koymak için bir beceri! Bu makalede, müşterilerinizin web sitelerine nasıl iyi bir denge kattığınıza bakacağız.
Simetrik denge
Web sitelerine göz atarken karşılaştığınız en yaygın denge denemelerinden biri, bunu fark etmemekle birlikte, simetri olmaktır. Simetri, göze hoş gelir ve estetik olarak iyi düzenlenmiş ve uyumlu bir tasarım yaratır. Simetrik denge, elemanları yatay veya dikey bir merkezi eksenin her iki tarafına eşit olarak yerleştirerek tanımlanır. Başka bir deyişle, sayfanın ortasındaki hayali bir dalış hattının her iki yüzü de birbirlerinin ayna görüntüleridir. Bazı eleştirmenler bu türden bir dengeyi sıkıcı veya öngörülebilir olarak yazabilirken, yine de zamanın testinde durdu ve web tasarımında dengeyi göstermenin en iyi yollarından biri olmaya devam ediyor.
Cisco'nun sitesi Bu denenmiş, test edilmiş ve doğru tasarım yaklaşımını tercih etti. Sitenin dikey ekseninde nasıl mükemmel bir şekilde dengelendiğini unutmayın. Hayali bir çizgi çizip Cisco'nun ana sayfasının tam ortasına böldüyseniz, aşağıdakileri fark edersiniz:
- Her iki taraftaki gezinme çubuğundaki (arama simgesi dahil) aynı sayıda öğe
- Başlık ve alt başlık her iki tarafta da eşit uzunlukta
- Harekete geçirme butonu mükemmel bir şekilde ortalanmış
- Her iki tarafa da “Hızlı Görevler” başlığı altında aynı sayıda eleman
Site şimdiye kadarki en heyecan verici site olmasa da, şirketin ağ ekipmanı sattığından beri olması gerekmiyor. Ayrıca, site kullanılabilir ve işlevsel, hem de müşterilerinin takdir edebilecekleri özellikler. Diğer iki simetri örneğine bakalım:
IWC Schaffhausen İsviçreli saatçi, yatay, simetrik bir denge sunan bir siteye sahip. Sayfayı ortadaki bir eksen boyunca ortaya bölersek, her iki taraf da simetriye sahiptir.
Aynı şey için de geçerli Beanstalk App web sitesi . Basit, minimal bir tasarıma sahip olan merkez ekseni, ana sayfanın ortasına doğru inerek, sayfanın iki yarısını yatay, simetrik bir dengeye bırakır.
Asimetrik denge
Simetrinin kutup karşıtı, asimetrik denge de mümkündür. Asimetri, parçalar arasında eşdeğerlik olmaması anlamına gelmez! Yakında göreceğiniz gibi, asimetrik denge tasarımda bir karşı ağırlık sistemi de sağlıyor… sadece beklediğiniz gibi değil. Asimetri bir web sayfasında çeşitli şekillerde temsil edilebilir. Örneğin, ekranın bir yarısı, dikey veya yatay olarak, daha yoğun bir öge ile öteleyebilirken, diğer yarısı daha ince öğelere sahip olabilir. Bu eşitsizliğe rağmen, hem güç hem de sayılardaki denge, çelişen unsurların yan yana gelmesiyle yaratılmaktadır. Bu şekilde asimetri gerçekten güzel olabilir, belki de basit simetriden daha fazladır, çünkü denge yaratmak için farklılık kavramını oynar. Bu bir tasarım paradoksu, ancak herhangi bir sitede çok iyi çalışıyor. Asimetrik denge bu nedenle tahmin edilebilir simetriden daha ilginç ve düşündürücüdür. Modernizm, enerji ve merak temalarını çağrıştırır. Ancak tasarımcılar, bir sayfada asimetri oluşturmanın, normal simetriden daha fazla iş gerektirdiğini not etmelidir. Sonuçta, daha karmaşık olan tasarım öğeleri arasındaki ilişkileri temsil etmek zorundasınız.
Honda web tasarımında bize net bir asimetri örneği verir. Ekranın alt kısmında, şirket ana sayfada, kart tabanlı bir tasarım kullanıyor, ancak bu, görsel olarak çekici ve renkli olsa da, dikey veya yatay bir merkezi eksenin her iki tarafında eşitlik eksikliği yaratan biraz dağınık bir görünüm yaratıyor. Bir şey için, kartlar her zaman yatay olarak farklı uzunluklardadır ve her zaman düzgün bir sütun veya satırda yığılmazlar. Bu, bakılması çok ilginç olan asimetriyi yaratır. Araba şirketinin ana sayfasında neredeyse küçük bir labirent gibi! Başka ilginç örnekler de var:
Typographisme web tasarımında mükemmel bir asimetri örneğidir. Sitede, döngüsel olan iki öğe bulunur. Hem TG logosu hem de sağdaki yeşil pul, üst köşe asimetri yaratıyor.
Duplo 'asimetri başlangıçtır. Sitenin merkezi eksen dikey veya yatay olsun, diğer yarısı ile tutarlı bir şekilde hizalanmayan bir yüzer eleman tasarımına sahiptir. Genel olarak, almak ilginç bir göz alıcı bir görünüm üretir.
Radyal denge
Radyal denge oldukça basittir. Adından da anlaşılacağı gibi, bir sayfadaki tüm tasarım öğeleri birleşik, merkezi bir noktadan eşit noktalarda yayıldığında, radyal denge oluşur. Dolayısıyla, sayfayı merkezi bir eksen boyunca dikey ya da yatay olarak bölerseniz, her iki tarafın öğeleri de merkez noktaya eşit ya da çok yakın olacaktır. Radyal dengenin en temel örneklerinden bazıları, merkezi bir noktadan gelen güneş ışınları veya yüzeyinde bir grup dalgalanma içeren bir gölet gibi şeylerdir. Bu denge şeklini daha özel kılan şey, yayılan etkinin her iki şekilde de geçerli olmasıdır: Dikkat, merkez noktadan uzaklaştıkça, aynı zamanda ortak merkezden ötürü de ona geri dönmektedir. Bu nedenle, bir odak noktası tutmak kolaydır.
Web sitelerinde, özellikle de ana sayfalarda oldukça nadir görülen radyal dengenin en iyi örneği - Vlog . Bu, her şey beyaz "Vlog.it" merkezi noktasından dışarıya doğru yaydığı için radyal dengenin bir özüdür.
Her türlü denge
Şimdilik, her tür dengenin bazı ortak bağlara sahip olduğu oldukça açık olmalı. Çekici ve ilginç bir denge sunan herhangi bir tasarımda tutarlı bir şekilde görünen tek tip faktörler vardır. Web tasarımındaki denge her yerde. Şansınız, hayatınızda göz attığınız tüm farklı sitelerde bunu takdir etmeyi ihmal ettiniz; Ancak bu sadece bir denge, herhangi bir siteye gittiğinizde düşündüğünüz ilk şey değil. Bununla birlikte, alan tasarımı için denge önemlidir. Sadece görsel açıdan ilginç olan estetik dokunuşlar sağlamaz. Aynı zamanda, bir sitenin görsel bilgisini daha kolay absorbe etmesini sağlayarak kullanıcı deneyimine yardımcı olabilir. Tasarımcılar, uyumluluk, karşı ağırlık ve eşitliğe daha fazla dikkat ederek, web tasarımlarında daha iyi bir denge sağlamaya çalışabilirler. İyi bir bakiyenin sonucu, müşterileriniz için açık olmayan temettü ödemeleri ve kullanıcı deneyimi sağlar.