Kullanıcı Arayüzlerinin 3 C'si: Renk, Kontrast ve İçerik

Birçok iş stratejistinin yaşadığı eski bir iş modeli var - 3 C. Şirkete, müşterilere ve rakiplere odaklanmak için bir hatırlatma. Birçok küçük işletme ve web sitesi de bu modeli kullanır. Ancak tasarımcılar için üç C biraz farklı.

Kullanıcı arayüzleri oluştururken renk, kontrast ve içeriğe odaklanmalısınız. Bu üç unsur iyi tasarımın temelidir. Ancak her biri yüzeyden göründüğünden biraz daha karmaşıktır. Kullanıcı arayüzlerinin üç C'sini tasarım projelerinizde nasıl düşüneceğinizi ve birleştireceğiniz aşağıda açıklanmıştır.

Tasarım Kaynaklarını Keşfedin

Renk

Renk, çoğu kullanıcı için en belirgin görsel öğelerden biridir. Tasarımcılar ve tasarımcılar, renk ve belirli bir renk tonunun veya paletin kendilerine hitap edip etmediği hakkında konuşabilirler.

Renk, başka etkiler olmadan tamamen kendi başına farklı duygusal bağlantılar oluşturabilir. Neredeyse herkese bir renk örneği veya çip verebilir ve görünen renk hakkında tepki alabilirsiniz. Ayrıca, kişisel ve tasarım tercihlerinin neredeyse evrensel olarak zaman içinde değişme eğiliminde olması komik bir tasarım öğesidir.

Renk, bir tasarımı birçok nedenden dolayı yapabilir veya kırabilir, ancak öncelikle çok fazla şey yapar ve kullanıcıya aynı anda çok fazla görsel ipucu sağlar ve onu görmezden gelemezsiniz.

Renk etkileri:

• Kullanılabilirlik ve okunabilirlik
• Marka bilinirliği ve farkındalığı
• Kullanıcıların nerede göründüğü ve etkileşim kurduğu
• Kuruluş ve kullanıcı akışı
• Tasarımın genel başarısı

Oluşturmak için renk kullanın:

• Net ve anlaşılır navigasyon
• Sezgisel etkileşimler
• Proje için bir ruh hali
• Güçlü harekete geçirici mesajlar veya kullanılabilir öğeler oluşturun
• Gerçekliğe karşı fantezi gibi tasarımın ne hakkında olduğu hakkında bir fikir oluşturun

Bu, kırmızı, yeşil ve mavi karışımı kadar basit bir şey için uzun bir düzen gibi görünebilir.

Peki, nereden başlıyorsun? Renk söz konusu olduğunda tartışmasız en önemli değişkenler, kullanıcılarla etkileşime giren ve tasarımın ne olduğu hakkında (markalaşma ve ruh hali gibi) konuşan bir palet oluşturmaktır. Örneğin, Coca-Cola için maviyi kırmızı yerine baskın bir renk olarak kullanan bir web sitesi kullanıcılara sarsılır.

Düz renk paleti, renk teorisi prensiplerine dayanır.

Düz renk paleti, renk teorisi prensiplerine dayanır. Çalışması için birkaç renkten daha fazlasına ihtiyacınız yok. İki ila üç renk ve daha açık ve daha koyu varyasyonların iyi bir kütüphanesi yeterlidir. Mockplus 6: 3: 1 kuralını önerir: bir palet için üç renk seçin, zamanın yüzde 60'ını kullanan baskın bir renk, yüzde 30'unu kullanan ikincil bir renk ve kalanında olabilecek bir vurgu rengi de dahil Tasarımın yüzde 10'u. Kural, tasarım teorisinin temelini oluşturan altın orana dayanır ve harika bir başlangıç ​​noktası olabilir.

Kullanıcı arayüzlerinde renk paletleri oluşturmak için bir kural daha: siyah beyaz ile başlayın. Tasarım renksiz kullanılabilirse, renk eklendiğinde muhtemelen işe yarayacaktır. Siyah beyaz anahat ayrıca kullanılabilirliği artırmak için yeterli kontrastla (ikinci C) renklerin nasıl seçileceği konusunda iyi bir fikir verir.

Kontrast

Kontrast, öğeler arasında bir ayrım yaratır. Görsel hiyerarşi, taranabilirlik oluşturmaya yardımcı olur ve bir şeyin hızlı bir şekilde anlaşılmasının ne kadar kolay olduğuna katkıda bulunur. Güçlü kontrastlı öğeler, kullanıcının bir şeyden diğerine bakmasını kolaylaştırır, doğal bir görsel desen ve kullanıcı akışı oluşturur.

Kullanıcı arayüz tasarımı için kontrastın çok önemli olmasının nedeni, yaptığınız her şeyin bir parçası olmasıdır. Kontrastı nasıl oluşturacağınız, ilgili görsel efekt öğesinin türüne göre değişir.

Aşağıdakilerle kontrast oluşturabilirsiniz:

• Renk
• Boyut
• yön
• Uzay
• şekil

Erişilebilirlik yönergelerinin temel bir unsuru kontrasttır, çünkü kullanıcıların tasarımda bir öğeyi diğerinden ayırt edebilmesini sağlar. Web erişilebilirliğini kolaylaştırmayı amaçlayan A11Y Projesi şu öneriye sahiptir: renk tekerleğinin farklı segmentlerindeki renkleri veya kontrast renkleri kullanarak renk kontrastı ile başlayın. Tamamlayıcı renklerin - renk tekerleğinin karşıtları - maksimum kontrast sağladığını unutmayın.

Aynı kavram diğer unsurlar arasında kontrast oluşturmak için de geçerlidir. Farklı ailelerden yazı biçimleri seçin veya kullanıcıların kelimeleri hızlı bir şekilde okumasına yardımcı olmak için önemli ölçüde farklı boyutlar kullanın.

Kısacası, kontrastın arkasındaki fikir karşıtların dikkatini çekmesidir.

Kullanıcının belirli bir yöne bakmasını sağlamak için yön işaretlerini, okları veya görüntüleri hareketle kullanın, ardından daha fazla kontrast için yön işaretini çevirin.

Sıkı ve açık alan arasındaki fark çok fazla kontrast yaratır. Metninizin kolayca görülebildiğinden ve okunabildiğinden emin olmak istiyorsanız, metne dikkat çekmek için biraz daha yer verin.

Kısacası, kontrastın arkasındaki fikir karşıtların dikkatini çekmesidir. Görünüşte farklı olan unsurlar aslında birlikte çalışabilir, böylece her ikisini de bir bakışta görmek kolaydır.

Kontrastın istediğiniz şekilde çalışıp çalışmadığını bilmek için ekrandaki öğelere bakarken birkaç faktörü düşünün:

• Okunabilirlik: Tüm kelimeleri ve resimleri görmek ve okumak kolay mı?
• Netlik: Bir elementi diğerinden ayırmak kolay mı?
• Erişilebilirlik: Mümkün olduğunca çok insan için çalışıyor mu?
• Çevre: Kullanıcılar tasarımı kullanılacak yerlerde görebilir ve anlayabilirler mi?

içerik

Üç C'nin sonuncusu içeriktir. Kullanıcı arayüzü tasarımı sadece içerdiği bilgiler kadar iyi olabilir. İçerik, resimlerden metne, resimlere ve simgelere, logolara ve marka işaretlerine kadar her şeyi içerir. İçerik ayrıca video ve tam mesajlaşma veya anlatımdan blog yayınlarına küçük mikro kopya parçalarına kadar her kopyayı içerir.

Sadece içeriğe sahip olmak yeterli değildir. Yıldız içeriğine sahip olmalısınız.

Tüm bu unsurlar, tasarımınızı ve kullanıcı arayüzünüzü özel kılan şeyin hikayesini anlatmak için bir araya geliyor. Kullanıcılar neden başka bir şey yapmak yerine size zaman ayırsın?

Ve sadece içeriğe sahip olmak yeterli değildir. Yıldız içeriğine sahip olmalısınız. Yüksek çözünürlüklü içerik. Yüksek değerli içerik. İçeriğiniz, kullanıcıların dikkatini çekmek için rekabet eden benzer içeriklerden daha iyi / daha büyük / daha özel olmalıdır.

Bu uzun bir sipariş olabilir, ancak çoğu tasarımcı bu içeriği kendilerine, markalarına ve mesajlaşmalarına sadık kalarak oluşturabilir. Ne olduğuna ve ne bildiğine bağlı kal. Kullanıcılar bu özgünlüğü görecek ve umarım tasarımınızla zaman geçirerek buna değer verecektir.

Sonuç

Artık, iş, şirket, müşteriler ve rakipler gibi üç eski Cs ve renk, kontrast ve içerik olan üç Cs - arayüz, renk, kontrast ve içerikle donatıldığınıza göre, bu dünyanın dışında bir tasarım projesi oluşturmak için gerekli araçlara ve bilgiye sahipsiniz. iyi. (Ya da en azından son derece kullanışlı.)

Her iki stratejiyi de tasarım projelerinde çalıştırarak, web sitesi sahibine ve kullanıcıya fayda sağlayacak bir şeyin nasıl oluşturulacağını düşünmeye zorlanırsınız. Sadece tasarımın güzel olması için değil, aynı zamanda işlevsel olması için de yaratıyorsunuz.

Not: Bu makaledeki tüm örnekler Design Shack Galerisi'nden alınmıştır. Etrafınıza bir göz attığınızdan emin olun; harika iş ve ilham dolu.