İnsanların Web Tasarımında Görsel Bilgileri İşleyişini Kullanma

Web siteleri ve kullanıcı arayüzleri tasarlamak son birkaç yılda çok daha kolay hale geldi. UI'leri geliştirirken sıfırdan başlamayı anlamsızlaştıran, kullanabileceğiniz çok sayıda araç var (yeni kullanıcı arayüzü derlememize bakın). Ama burada web tasarımının ölümü hakkında tartışmak için gelmedim.

Bunun yerine, yapacağım şey, görsel tasarım araçları bolluğunun arkasındaki temel, psikoloji temelli kavramları açıklamaya çalışmaktır (en temel CSS kitlerinden en gelişmiş premium temalara kadar). Sadece onları kullanmayacak, aynı zamanda onları anlayacaksın. Bunun var olanları da başarılı bir şekilde değiştirmeyi kolaylaştıracağına inanıyorum..

Görsel bilgiyi işlemek için insan aklının ve bedenin nasıl çalıştığını ve bu bilginin web tasarımı için nasıl yorumlandığını inceleyelim..

Algısal Örgütlenme İlkeleri

Gestalt psikolojisine göre, Bütün, parçaların toplamından farklı. Bu düşünce okulunun takipçileri, insan zihninin nesnelerin nasıl gruplandığı ile ilgili birkaç prensip olduğunu iddia ediyor. Bunlar basitçe teoriler değil, aklınızda bulundurun, ancak görsel grupları organize etmeyle ilgili gerçek pratik bilgilerdir..

Aşağıda, bazı yasaları ve bu ilkelerin daha popüler ve iyi bilinen kullanımlarını bulacaksınız. Bir sonraki tasarımınız için yeni fikirler bile bulabilirsiniz..

Benzerlik Kanunu

İlk prensip benzer küçük nesneler grup olarak algılanır, aynı küçük nesnenin birden çok örneği yerine. Benzerlik şekil, renk, gölgeleme veya başka bir kaliteye bağlı olabilir. Bu ilke temelidir desen tasarımı yanı sıra birçok geometrik ve minimalist logo tasarımı.

Örneğin, bu resim ayrı üçgenler yerine dairesel bir logo olarak gösteriliyor. Kartalın altındaki üçgen şekil, şeklin de görüntünün bir parçası olduğunu düşünmemize neden olur..

Birkaç tane oluştururken muhtemelen bu kanunu bilmeden de kullandınız, aynı boyutta özellikli içerik kutuları web siteniz için. Belirli içerik öğelerinin aynı öneme sahip olduğunu göstermek veya benzer bilgileri paylaşmak isterseniz, Sadece bu amaç için belirli bir şekil oluşturmak. Bu şekilde, kullanıcınız bu şekli, belirli bir bilgi alanı ile derhal ilişkilendirir..

Yakınlık Yasası

Bu kanuna göre daha yakın olan nesneler birbirlerine aynı grupta olduğu kabul edilir. Aynı kareler, birbirine yakın, düzenli yakınlıkta yapıldığında, gruplama duygusu yaratır..

Bu ilke özellikle son zamanlarda web’de büyük ölçüde web’de kullanılmaktadır. içerik döngüleri, Örneğin. bloglarda ve web mağazalarında.

Başlığı, öne çıkan resmi, meta verileri ve alıntıyı herhangi bir sınır veya arka plan olmadan bile birlikte gruplayabilirsiniz. Gereksiz çizgileri ve renkleri daha minimalist, ancak yine de tam olarak anlaşılabilir hale getirmek için tasarımınızdan silebilirsiniz.

Size kolaylık sağlamak için, Vikipedi de belirtildiği gibi alıntı:

İyi Form Kanunu

Pragnanz veya Good Gestalt Yasası olarak da bilinen bu yasa, nesneleri bir arada gruplandırma eğiliminde olduğumuzu belirtir. Basit, düzenli ve düzenli bir desen oluşturmak. Aklımız karmaşık ve algısal olarak zor formları basitçe anlaşılabilir şekiller grubuna ayırmaya çalışır; bu kurşun özlülük önemi.

Bu aynı zamanda başarının ardındaki olası nedenlerden biridir. ızgara tabanlı tasarım ve bu tablo ve çerçeve temelli (neyse ki tasarımın karanlık çağındaki şeyleri) web yapılarını çok popüler yaptı.

Bu prensibi göz önünde bulundurursanız, muhtemelen yukarıdaki diğer yasalar aracılığıyla aklınıza takılacak karmaşık içerik blok şekilleriyle dolu bir web sitesi oluşturmaya başlamazsınız. Yine de yapabilirsin nesnelerinizi ilginç bir şekilde bir araya getirin, Örneğin. Elmas veya uçurtma şeklinde, çünkü bunlar hala düzenli ve özlü şekiller olarak algılanıyor.

Renk teorisi, algı ve kullanım

Renk görme ve renk algısı büyük ölçüde öznel dayalı izleyicilerin beyinleri nasıl tepki veriyor? renkli nesneler veya şekillerle yansıyan ışık dalgalarına. Kural, farklı kişilerin, herhangi bir görme engelli olmasa bile, aynı nesneyi farklı renklerde görmesidir (elbiseyi hatırlayabilirsiniz)..

Renk özellikleri

Yine de rengin üç nesnel özelliği vardır; renk, değer ve yoğunluk.

renk Rengin renk tekerleğinde veya gökkuşağında etiketli adıdır. Altı (veya on iki, kiminle konuştuğunuza bağlı olarak) temel tonlar vardır: kırmızı, turuncu, sarı, yeşil, mavi ve mor.

Sarı, mavi ve kırmızı birincil, turuncu, yeşil ve mor ikincil tonlar; ayrıca, var üçüncü iki birincil ve ikincil renk tonunun doğrudan karışımları olan tonlar (örneğin, sarı yeşil veya kırmızı menekşe).

değer olarak adlandırılan rengin açıklığı veya koyulmasıdır. yüksek değer açık renkler için veya Düşük değer koyu renkler için.

yoğunluk ifade eder parlaklık veya dimness bir rengin; bu, aynı renk tonuna ve aynı değere sahip bir rengin yoğunluğu değiştirilerek ve farklı renk çıktıları oluşturularak hala soluk veya parlak olabileceği anlamına gelir.

Her rengin en yüksek yoğunluğu, renk tekerleğinde gösterdikleri renk tonudur (aşağıya bakın), en düşük renk gridir.

Renk kontrastları

Yukarıda belirtilen benzerlik yasalarına atıfta bulunarak, algılayıcıların zihinleri benzer ve farklı özelliklere dayanarak gördükleri küçük nesneler grupları oluşturur - genellikle renkler.

Renk paletinizi web siteniz için seçtiğinizde, özellikle minimalist bir yaklaşım arıyorsanız veya metin ağırlıklı bir içerik alanı tasarlarsanız, ör. bloglar veya reklamlar farklı renk kontrastlarının farkında olun bu, en iyi sonuç için doğru renk değerlerini bulmanıza yardımcı olabilir..

Johannes Itten'e göre 7 renk kontrastı var, fakat sadece 3 tanesinden bahsedeceğim halde.

1. Ton kontrastı

Tam yoğunlukta sarı, kırmızı ve mavi doğrudan ve canlı kontrastlardır. İkincil tonlar daha az keskin bir ayrım sağlar, ancak her ikisi de gibi olmasa da, üçüncül tonlar gibi, yine de çalışır Birincil tonlarda olduğu gibi harika sonuçlar.

2. Tamamlayıcı kontrast

Birlikte karıştırıldığında nötr bir gri oluştururlarsa, iki renk tamamlayıcı kontrastlıdır. Bunlara ayrıca denir garip çiftler. Bitişiklerse, canlılığı ve yoğunluğu arttırırlar, birlikte karıştırılırken birbirlerini iptal ederler. Her rengin bir tek tamamlayıcısı vardır; Renk tekerleğinde, çiftler çapraz olarak birbirine zıt.

3. Açık-Koyu kontrast

Tek renkli bir web sitesiyle deneme yapmak istiyorsanız, aynı renk tonunun farklı değerlerini kullanarak harika sonuçlar üretebilir. Çoğunlukla minimalist web tasarımında kullanılırsa, kullanıcıya renk teması seçenekleri sunmak istiyorsanız açık-koyu kontrastı temel alarak mükemmel sonuçlar elde edebilirsiniz. Bu kontrast gri tonlamalı tasarım için de kullanılır.

Kalan 4 renk kontrastını izlemek istiyorsanız, onları burada bulabilirsiniz..

Palet oluşturma ve kontrastları kontrol etme

Teoriyi bilmek harika, fikirlerinizi yorumlamak tamamen bir başka şey. Endişelenmemelisiniz, web, renk hokkabazlık ihtiyaçlarınız için büyük destek sağlar. Renk kontrast kurallarına dayalı olarak özel renk desenleri oluşturmanıza yardımcı olan birçok araç vardır. Paletton veya Adobe Kuler.

Web amaçları için, webAIM'de, Jonathan Snook'un sitesinde kullanmayı tercih ettiğiniz kontrastları kontrol etmek veya The Paciello Group'un Color Contrast Analyzer'ın bir örneğini buradan indirmek isteyebilirsiniz..

Sonuç

Yeni bir tema ile çalışmaya başladığınızda veya mevcut olanları değiştirmeye başladığınızda, içeriğinizi organize etmek için algı ilkelerini düşünmeye çalışın ve tasarımınıza son halini ve tonunu verirken renk kurallarını göz önünde bulundurmayı unutmayın.

Editörün Notu: Bu misafir yazısı Hongkiat.com tarafından yazılmıştır. Marton Fekete. Marton, son zamanlarda WordPress'e bağlı bir Macar site geliştiricisidir. Boş zamanlarında RPG oynamaktan hoşlanan, yeniden tasarlanan bir meraklı ve serbest içerik yazarıdır..