Farklı durumlar için renkler nasıl seçilir ve gölgeler nasıl belirlenir: Üzerine Gelme, Etkin, Basma, Devre Dışı Bırak

Arayüz için renk seçme süreci, özellikle çeşitli düğme durumları, yazı tipleri ve diğer kullanıcı arayüzü öğeleri dikkate alındığında karmaşık olabilir. Bu yazıda projeniz için başarılı bir renk şeması seçmenize yardımcı olacak yöntem ve ilkelerimi paylaşacağım.

1. Ana Rengin Tanımlanması

Bir web sitesi tasarlarken genellikle bir renk şeması seçmek gerekir. Bazen müşterinin zaten bir birincil marka rengi vardır. Bu durumda göreviniz ana rengi tamamlayacak ek renkleri ve tonları seçmektir. Sitede ana rengin yanı sıra hata durumlarını belirtmek, bağlantılar, resimler, simgeler gibi çeşitli amaçlarla veya grafiklerde ve gösterge tablolarında kullanılmak üzere ek renkler kullanılmaktadır.

2. Renk Uyumunu Kullanmak

Renklerin iyi bir uyum içinde olmasını sağlamak için tek renkli, tamamlayıcı, üçgen ve diğerleri gibi çeşitli renk uyum şemalarının kullanılmasında fayda vardır. Projenin ana rengini tamamlayan uyumlu bir renk paleti oluşturmaya yardımcı olabilirler. Artık teknolojinin hızla ilerlediği ve kolaylıkla renk şeması oluşturabilen özel hizmetlerin olduğu bir dünyada yaşıyoruz. Örneğin color.adobe.com adresini kullanıyorum.

İşte bunu nasıl yapıyorum:

bir. Açılır listeden istediğiniz şemayı seçin.

iki. Temel renk olarak belirtilen alana gerekli renk değerini girin

üç. Hangi renklerin ihtiyaçlarıma uygun olduğunu belirleyin.

dört. Benim durumumda Figma'yı kullanarak bunları çalışma alanıma aktarın.

3. Tonların seçilmesi

Daha sonra seçilen renklerin her birinin tonlarını belirlememiz gerekiyor. Seçilen renklerin tonlarını seçmek için bu süreçte yardımcı olabilecek belirli hizmetleri kullanabilirsiniz. Renklerinizin tonlarını belirlemenin iki yolu vardır:

İlk yöntem daha karmaşık bir formül içerir:

1. Başlık renginizi seçin (mutlaka siyah olması gerekmez).
2. HLS moduna geçin.
3. İlk hücreyi atlayın, ikinci hücrede değeri 2 azaltın, üçüncü hücrede değeri 5 artırın.

İkinci yöntem ise hizmeti kullanmaktır (kolay ve hızlı)

renkler.dopely.top

bir. İstediğiniz rengin değerini girin.

iki. Gölgeleri ve adım sayısını seçin (5 kullandım).

üç. Renk tonlarını ve adım sayısını seçin.

dört . Sonuç olarak bir renk için aşağıdaki tabloyu oluşturdum

P = Birincil,

P 60 = bu bizim ana rengimiz,

P 10'dan P 50'ye kadar = bunlar Renk Tonlarında topladığımız açık tonlardır,

P 60'dan P 100'e kadar = bunlar Gölgeler panelinde topladığımız koyu tonlardır.

4. Renk Erişilebilirliğini Kontrol Etme

Seçilen renklerin sınırlı yeteneklere sahip olanlar da dahil olmak üzere tüm kullanıcılar tarafından erişilebilir olmasını sağlamak önemlidir. Bir arayüz oluştururken takip edilebilecek Web İçeriği Erişilebilirlik Yönergeleri ( WCAG ) gibi yönergeler vardır. Renklerinizin erişilebilirliğini kontrol etmek için, seçilen renklerin kontrastını ve erişilebilirliğini doğrulayacak eklentiler veya web hizmetleri gibi belirli araçları kullanabilirsiniz.

Figma eklentisi – Kontrast

Web hizmeti – Soğutucular

5. Farklı arayüz durumları için renkleri tanımlama

Web projeniz için renk paleti tasarlamanın son aşamasında, belirli öğe durumları için gereken adım sayısını belirlemek gerekir. Tipik olarak dört temel durumu tanımlarız:

• Etkin (elemanın sakin ve normal durumu)
• Üzerine gelin (fareyle üzerine gelin)
• Aktif (bir düğmeye veya başka bir kontrole tıklamak)
• Devre dışı (engellenen öğe)

Adım sayısını belirlemek için ana renk değerimizi (asal) sabitlediğimiz renk panelini kullanıyoruz. Daha sonra fareyle üzerine gelme ve aktif durumlar için adım sayısını sayarız. Bundan sonra, düğmelerimizin ve içlerindeki metnin kolayca okunabildiğinden emin olmak için farklı erişilebilirlik durumlarını test ediyoruz.

Örneğin, IBM yönergeleri şu yaklaşımı açıklamaktadır: Fareyle üzerine gelme durumu, başlangıç renginden bir buçuk adım uzaktayken, etkin durum, ana renkten iki adım uzaklıktadır. Benzer şekilde seçilen durum ana renkten bir adım daha uzakta olacaktır. Bu yöntem, renk paletini tanımlamamıza ve sınırlı yeteneklere sahip kullanıcılar da dahil olmak üzere geniş bir hedef kitle için erişilebilirliğini sağlamamıza olanak tanır. Aynı yaklaşım, vurgulu ve aktif durumların tanımlandığı metinlere de uygulanır.

Fareyle üzerine gelme durumları

Ana renginiz siyah ile 70 arasındaysa yarım adım daha açık tonlara çıkmalısınız.

Ana renginiz 60 ile beyaz arasında ise yarım adım daha koyu tonlara inmelisiniz.

Basın / Etkin durumlar

100'den 70'e kadar olan değerler için aktif durum iki tam adım daha hafif hale gelir

60 ila 10 arasındaki değerler için aktif durum iki tam adım daha koyu hale gelir

Seçilen eyaletler

100'den 70'e kadar olan değerler için seçilen durum bir adım daha hafif hale gelir

60 ila 10 arasındaki değerler için seçilen durum bir adım daha koyu hale gelir

Tasarımlarınızın ve metinlerinizin okunabilir olduğundan ve doğru şekilde görüntülendiğinden emin olmak için test etmeniz de önemlidir. Çalışmayı tamamladıktan sonra farklı arayüz durumlarının ve metinlerinin düzgün göründüğünden ve çalıştığından emin olun.

Doğru renk şeması seçimi, kullanıcı dostu ve çekici bir kullanıcı arayüzü oluşturmada önemli bir rol oynar. Bu basit adımları izleyerek ve mevcut araçları kullanarak projeniz için renkleri seçip optimize edebileceksiniz.

Umarım makalemi beğenmişsinizdir. Herhangi bir sorunuz varsa veya daha fazla bilgiye ihtiyacınız varsa, lütfen yorum bırakmaktan çekinmeyin.