Web Tasarımında Yakınlık Prensibi
Recently I picked up an Geçenlerde bir eski tasarım kitabı Bir süredir dokunmadığım ve bana birçoğumuzun muhtemelen bilinçaltında bir şekilde uygulamaya koyduğu bir tasarım prensibini hatırlattı.
Kitap baskı için tasarlamayla ilgileniyor, ancak web tasarımı bağlamında tartışılacak harika bir konu olacağını düşündüm.
Yakınlık ilkesi, ilgili öğelerin görsel olarak gruplandırılması, daha az dağınıklık yaratılması ve daha organize bir düzen için yapılması çağrısında bulunur. İlişkisizliklerini vurgulamak için birbirleriyle ilgisiz maddeler daha ayrı yerleştirilmelidir.
Ayrıntıları ve bunun etkili bir şekilde uygulanabileceği bazı yolları tartışacağım, ancak bu tanım bu makalede tartışacağımız konular için yeterli olmalıdır.
Diğer tasarım ilkeleri ile bağlantılı olarak yakınlığın doğru kullanımı, kullanıcı deneyimi üzerinde ve sonuçta bir web sitesinin genel başarısı üzerinde büyük bir etkiye sahiptir.
Beyaz Uzaydan Korkmayın
Yakınlık ilkesini düzgün bir şekilde uygulamak için ilk adım, tasarımda beyaz alanın önemini anlamaktır.
Amatör tasarımlarda beyaz alan eksikliği yaygın bir sorundur. Tasarım, bilgiyi iletmenin bir yoludur ve amatörler bir mesajı tasarıma aktarmaya çalıştıklarında, doğal eğilimleri, iyi organize olmuş beyaz alanın potansiyeli hakkında fazla düşünmeden, alanı doldurmak için içeriği eşit bir şekilde yaymaktır.
Beyaz boşluk, kullanıcının davranışını, sayfanın asıl içeriğinden daha fazla değilse de etkileyebilir. Beyaz alan kullanıcının gözünü istenilen yönde yönlendirir, kontrast oluşturur ve kalıcı bir etki bırakır.
W3Avenue'nin yukarıdaki web sitesi önemli miktarda içerik barındırıyor olsa da (herhangi bir tasarım blogu gibi sayısız kategoride makalelerle) ve bir dizi kenar çubuğu reklamı, kullanıcıyı görsel olarak bunaltmaz.
Başlıkta yer alan cömert oda ve içerik ve kenar çubuğu alanlarındaki uygun aralıklı öğeler bu temiz ve düzenli görünüme katkıda bulunur. W3Avenue, içeriği ile özellikle benzersiz bir şey yapmıyor, ancak tasarımı muhtemelen güçlü trafik o içine alır kısa süre .
Yani tasarımınızdaki boş alan konusunda güvensiz olmayın. Düzgün bir şekilde beyaz boşluk kullanmak, yakınlık ilkesinin uygulanmasında ilk adımdır ve bu sayede bir tasarımı daha görsel olarak çekici hale getirir.
Görsel Grupla İlgili Öğeler
Bununla birlikte beyaz alan, yakınlığın uygulanmasının sadece bir parçasıdır. Bir tasarımda çok fazla beyaz alan olabilir, ancak öğeler doğru şekilde gruplandırılmamışsa , aşağıdaki iki kartvizitten de görüldüğü gibi beyaz alanın etkisi az olacaktır:
Soldaki kart darmadağın değil; biraz beyaz boşluk var. Ancak, öğeler mantıksal olarak gruplandırılmamıştır, bu yüzden etki zayıftır.
Okuyucu, kartı birkaç kez taramaya zorlanır. Ancak sağdaki kart daha hoş bir görsel etkiye sahiptir. Okuyucu sadece bilgi almak için ona bakmak zorundadır (daha sonra bunun üzerine).
Sağdaki karttaki elemanların gruplandırılması da daha mantıklıdır . İlk eleman grubunda, şirket adının altındaki yazıyla birlikte büyük fontta görüyoruz. İkinci set, verilen hizmetler hakkında (örneğin telefon numarası ve web sitesi adresi) bilgi almamızı sağlar.
Bu örnek, baskı tasarımında yakınlığın önemini göstermektedir ve benzer bir fikir, aşağıdaki ekran görüntüsünde gösterildiği gibi web tasarımındaki öğeler için kullanılabilir.
Arora Designs'ın web sitesi karmaşık veya bilgi ağır olmamasına rağmen, beyaz alan kullanımı ve gruplandırılmış öğelerin görsel ayrımı etkilidir. Burada dikkat edilmelidir ki “beyaz alan” beyaz olmak zorunda değildir; Renklerden bağımsız olarak elemanlar arasında herhangi bir boş alan olabilir.
Arora Tasarımları durumunda, beyaz alanın rengi olmasına rağmen, başlık, gezinme ve içerik alanlarını görsel olarak ayırmak için aynı amaca hizmet eder.
Görsel Hiyerarşi Yaratmak
Web sitenize net bir görsel hiyerarşi vermek için beyaz alanı etkili bir şekilde kullanmak ve ilgili öğeleri gruplamak çok önemlidir. Tabii ki, web sitesinin mimarisi ve bilgi akışı etkili yakınlığın temeli .
Hiyerarşi, öğelerin gruplandırıldığı ve alt gruplandığı yolla iletilir.
Bu hiyerarşi, kullanıcının nerede olduklarını ve nereye gitmek istediklerini anlamasına yardımcı olur ve böylece web sitesinin amacını iletmesine yardımcı olur. Liste, aşağıdaki resimde gösterildiği gibi görsel hiyerarşiyi iletişim kurma potansiyeline sahip bir öğenin iyi bir örneğidir:
Yukarıdaki iki listeye bakarak, içeriği incelemeden bile, soldaki listenin, öğeler arasındaki ilişkileri (girintili öğeler ana öğelerin alt kategorileridir) gösteren açık bir görsel hiyerarşiye sahip olduğunu görürsünüz.
Bu hiyerarşi beyaz boşluk olmaksızın mümkün olmayacaktır ( makro ve mikro Beyaz boşluk). Sağdaki liste, görünüşte bir ilişki veya hiyerarşi bulunmayan öğelerin rastgele bir gruplandırmasıdır.
Bu ilkeyi bir HTML listesi kadar basit bir şeyle bir web sitesinde uygulamak kolaydır. Bu ilke, bu ilkeyi, web sitesinin yapımında planlama ve wireframing aşamasından tasarıma yönlendiren bir faktör olarak kullanmaktır.
Tarama ve Okuma Kolaylığı Olan Düzenler
Bir hiyerarşi halinde düzenlenmiş ve mantıksal olarak gruplanmış içerik okumak ve taramak için daha kolaydır .
Örneğin başlıklar, kullanıcının ana noktaları açıkça belirterek taramasına izin vermelidir. Söylemeye gerek yok, içerik uygun bir görsel hiyerarşiyi yansıtmak için get-go'dan planlanmalı; İçeriğin görsel hiyerarşiyle eşleşmemesi nedeniyle, yukarıda listelenen öğelerle birlikte liste zayıf bir örnektir.
Mimarisinde ve tasarımında yakınlığı kullanan bir web sitesi, kullanıcıyı bilgi ile boğmaz.
Bu nedenle, içeriğe uygun web sitelerine yakınlık ilkelerini uygulamak nispeten kolay olsa da, içerik açısından zengin web sitelerinde yakınlık çok daha önemlidir.
Haber siteleri bu ilkenin iyi örnek çalışmalarıdır. Aşağıda bir karşılaştırma Los Angeles zamanları ve Küre ve posta .
Genel olarak, LA Times web sitesi özellikle renk seçimi ve tipografi nedeniyle hoş bir tasarıma sahiptir. Ama aynı zamanda özellikle başlık bölümünde, temiz ve düzenli bir görünüme sahiptir.
Logo büyüktür ve web sitesinin markasına etkin bir şekilde katkıda bulunur. Logoya en yakın olan nesne, aşağıdaki yatay gezinme çubuğudur. Gezinme çubuğu karanlık olduğundan, logo ile tezat oluşturur.
Logonun yukarısındaki metin bağlantıları, iki bölüm arasında bolca yer kaplayan şekilde düzenlenmiştir. Başlıktaki içeriğin sol hizalanması da temiz görünüme katkıda bulunur.
LA Times başlığında yer alan her bilgi, tek başına duran logo haricinde ilgili öğelerle gruplandırılmıştır. Başlıktaki hiçbir şey sizi şaşırtmaz ya da ait olduğu yeri merak etmez.
Aşağıda gösterilen Globe and Mail web sitesi nedir?
Globe ve Mail web sitesinde, yakınlık ilkesini uygulayamayan karmaşık bir başlık bölümü vardır.
Beyaz alanın tek önemli miktarı, hiçbir şey gerçekleştirmeyen, logonun yanında, merkezdedir. Üstbilgiye katkıda bulunan, başlıkta iki reklam görünür. Reklamlar finansal nedenlerle gerekli olabilir, bu yüzden problemler anlaşılabilir.
En büyük sorun, büyük banner reklamın üstündeki dağınık bölümdür. Bu bölümdeki öğeler arasında net bir ayrım yoktur.
Üç noktalı dikey çizgi, alanı dört bölüme ayırmaya çalışır, ancak ilk ayırıcı bir anlam ifade etmez. Aslında, bu bölüm noktalı ayırıcılar kaldırılmışsa muhtemelen bu bölüm daha fazla davet görecektir.
Yakınlık ile yardım
Öğeleri gruplandırmanın ve beyaz alanı uygun şekilde kullanmanın bir yolu, bir kılavuzla başlamaktır.
Hem LA Times hem de Globe ve Mail websitelerinde göze çarpan bir bakış açısından, sadece LA Times tasarımını bir ızgaraya ya da planlama aşamasında en az kullanılan grid temelli ilkelere dayandırmış gibi görünüyor. Globe ve Mail'in web sitesi, bir grid formatı hakkında çok az kanıt gösterir.
Uygun oluk boyutlarına sahip ızgara tabanlı bir düzen, bölümler arasında bolca odaya izin verir ve çoğu durumda tasarımcıyı, yakınlık ilkelerini bile düşünmeden uygulamaya zorlar.
Aşağıda, çalışan iki web sitesinin ekran görüntüleri 960 ızgara sistemi . Her ikisi de oldukça basittirler (örneğin, yukarıda tartışılan haber siteleri gibi yoğun içerikli değildir), ancak ızgaraların her bölümün kendi görsel evini besleyen sayfa öğeleri solunum odası sağladığını gösterir.
Kullanıcıları Doğru Yolda Bırakın
Yakınlığın bir diğer önemli faydası, kullanıcıların gereksiz gecikmeler veya engeller olmadan bir web sitesinde gezinmelerine yardımcı olmasıdır. Birincil gezinme sayfadaki diğer öğelerden açıkça ayrıldığında, anında bulunacak ve unutulma olasılığı daha düşük olacaktır.
Yakınlık yoluyla uygun görsel hiyerarşi, kullanıcıların bulundukları veya gittikleri yer hakkında endişe etmeden web sitenize daha derinlemesine girmelerine yardımcı olur.
Her zaman rahat hissedecekler ve web sitenizin en önemli bölümlerine hızlı ve verimli bir şekilde ulaşacaklar.
Baskı tasarımında çok az deneyime sahip olan ya da hiç olmayan web tasarımcıları, baskı tasarımcılarının web patlamasından yıllar önce uygulamaya koyduğu prensiplerden büyük ölçüde faydalanabilir.
Yakınlık, bir sitenin daha kullanışlı ve görsel olarak hoş olmasına yardımcı olacak tek tasarım ilkesi değildir, ancak tartışılan birçok nedenden dolayı dikkate alınması gereken önemli bir faktördür.
Daha fazla okuma
- Tasarım Temelleri: Yakınlık İlkesi
- Site Tasarımınız CRAP Nedir?
- Web Sayfası Yerleşimlerinde Gruplandırmayı Kullanma
Bu yazı serbest yazar ve web geliştiricisi Louis Lazaris tarafından Webdesigner Deposu için özel olarak yazılmıştır. Louis koşuyor Etkileyici Webler web tasarımında makaleler ve eğitimler yayınlar. Louis'i takip edebilirsin Twitter'dan ya da onunla temasa geç web sitesi aracılığıyla .