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:    Açılır listeden istediğiniz şemayı seçin.  bir.    Temel renk olarak belirtilen alana gerekli renk değerini girin  iki.    Hangi renklerin ihtiyaçlarıma uygun olduğunu belirleyin. üç.    Benim durumumda Figma'yı kullanarak bunları çalışma alanıma aktarın. dört.  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:  Başlık renginizi seçin (mutlaka siyah olması gerekmez).  HLS moduna geçin.  İ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    İstediğiniz rengin değerini girin.  bir.    Gölgeleri ve adım sayısını seçin (5 kullandım).  iki.    Renk tonlarını ve adım sayısını seçin.  üç.    . Sonuç olarak bir renk için aşağıdaki tabloyu oluşturdum dört    = Birincil, P    = bu bizim ana rengimiz, P 60    = bunlar Renk Tonlarında topladığımız açık tonlardır, P 10'dan P 50'ye kadar    = bunlar Gölgeler panelinde topladığımız koyu tonlardır.  P 60'dan P 100'e kadar  Aynı işlemi diğer renkler ve yazı ve hata durumları için de tekrarlayın!  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 (   ) 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. WCAG  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,   ş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. IBM yönergeleri   Fareyle üzerine gelme durumları  Ana renginiz   yarım adım daha açık tonlara çıkmalısınız.  siyah ile 70 arasındaysa  Ana renginiz   ise yarım adım daha koyu tonlara inmelisiniz.  60 ile beyaz arasında   Basın / Etkin durumlar    değerler için aktif durum iki tam adım daha hafif hale gelir 100'den 70'e kadar olan    arasındaki değerler için aktif durum iki tam adım daha koyu hale gelir  60 ila 10   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.  Bunların benim tecrübelerime dayanan ipuçları olduğunu unutmayın, kendi adımlarınızı ekleyebilir, sırasını değiştirebilirsiniz ancak metninizin kontrastının ve farklı arayüz durumlarının herhangi bir kullanıcı tarafından iyi okunabilmesi için erişilebilirlik testi yapmayı unutmayın.  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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps