Nasıl ve neden bir renk çeşidi ve erişilebilirlik aracı tasarladım

Bir geliştirici olarak, tasarımlarım için renkleri seçmek her zaman en zor görevlerden biri olmuştur. Yardımcı olması için Coolors, SASS Color Generator ve bu renk kontrastı denetleyicisi gibi araçları kullanma eğilimindeyim.

Benim sürecim şuna benzerdi:

  1. Coolors kullanarak bir palet oluşturun
  2. SASS Color Generator kullanarak her renk için varyantları seçin
  3. Varyantları arka plan / ön plan kombinasyonlarında eşleştirin.
  4. Renk kontrastı denetleyicisini kullanarak çiftlerin erişilebilir olup olmadığını kontrol edin.
  5. Seçtiğim renkleri tercih ettiğim tasarım aracına ekle (Figma).
  6. Renkleri değiştirin ve 2. adımdan itibaren tekrarlayın.

Öyleyse problem neydi?

Eski sürecim, farklı uygulamalar arasında çok fazla ileri geri içeriyordu. Renklerimi değiştiremedim ve erişilebilirlik üzerindeki etkisini gerçek zamanlı olarak göremedim. Bunun yerine, HEX kodlarını bir uygulamadan diğerine kopyalayıp yapıştırmak zorunda kaldım. Sonra geliştirmeye başlamaya hazır olduğumda, değişkenleri SASS / CSS'de manuel olarak oluşturmam ve değerleri tekrar kopyalamam gerekti.

Ve çözüm?

(Neredeyse) her şeyi tek bir yerde yapabileceğim bir araç oluşturun. Amacım böyle bir sürece doğru ilerlemekti:

  1. Coolors kullanarak bir palet oluşturun
  2. Tek bir uygulama kullanarak çeşitleri seçin, renkleri eşleştirin ve ince ayarlar yapın.
  3. Ortaya çıkan renkleri tercih ettiğim tasarım aracıma ekleyin.

Ayrıca uygulamanın renklerimi koda aktarabilmesini istedim, böylece geliştirme için iyi bir başlangıç ​​noktası elde edebilirim.

İlk kavram kanıtı

Bir şeyi olabildiğince hızlı bir şekilde hazırlayıp çalıştırmak istedim, böylece test etmeye başlayabilirdim. Bunun için bir prototip oluşturmaya başladım.

Kullanım Durumları

Bir prototipi bir araya getirmenin ilk adımı, onu çalıştıracak kullanım durumlarını tanımlamaktı.

  1. Kullanıcı olarak, temel renklerim için varyantlar oluşturmak istiyorum.

Uygulamayı açabilmek, temel renklerimi ekleyebilmek, varyantları seçebilmek ve ardından bunları tasarım aracıma yeniden dışa aktarabilmek istedim. Basit mi?

2. Kullanıcı olarak, bir arka plan / ön plan renk çiftinin erişilebilir olup olmadığını kontrol etmek istiyorum.

Girilen temel renklerden veya varyantlarından, birlikte eşleştirildiğinde iki rengin erişilebilir olup olmadığını kontrol edebilmek istedim.

3. Bir kullanıcı olarak, temel bir rengi değiştirmenin erişilebilirlik üzerindeki etkisini görebilmeliyim.

Temel renklerimde her ince ayar yaptığımda seçtiğim renk çiftleri hakkında gerçek zamanlı geri bildirim alabilmek istedim.

(Çok kaba) çalışan bir versiyon

Tanımlanan kullanım durumları ile prototipi tasarlamaya başladım. Bir renk paleti buldum, sınırlı sayıda bileşen tasarladım ve sonunda üç "mod" veya sayfa içeren bir çözüme ulaştım, kullanıcı görevlerini yerine getirmek için aralarında geçiş yapmak zorunda kaldı.

Daha fazla anlatmak yerine, bir göz atalım.

Yukarıdaki görüntüden de görebileceğiniz gibi, prototip, ilk kullanım durumlarına dayanarak istediğim her şeyi başardı ... Bir çeşit.

Netlify dağıtım önizlemelerinin büyüsü sayesinde prototipi kendiniz denemek istiyorsanız burayı tıklayın.

Özgün tasarımın iyi ve kötüsü

İlk prototipin basamaktan başka bir şey olmasını asla düşünmedim ve oldukça kaba ve kusurlu olduğunu kendiniz görebilirsiniz.

Bir sonraki versiyon için prototip hakkında beğendiğim yönlere bakarak başladım .

Varyant Modu

Prototipin parçasını oluşturan varyantın nasıl ortaya çıktığından oldukça memnun kaldım. Bir renk seçmek ve varyantlar listenizi almak oldukça basitti. Ayrıca, sekmeli yaklaşım, birden çok temel renk eklemek için oldukça iyi çalıştı.

Bir rengi değiştirdikten sonra erişilebilirlikteki değişiklikleri görebilmek

Yukarıdaki kısa demoda da görebileceğiniz gibi, uygulamalar arasında HEX kodlarını kopyalamaya / yapıştırmaya gerek yoktu. Artık renklerimden birini değiştirebilir ve bunun renk erişilebilirliğini gerçekten hızlı bir şekilde nasıl etkilediğini görebilirdim.

Sonra sevmediğim ve iyileştirilmesi gereken şeyleri seçmeye başladım .

Etkileşimler açık değildi

Ana sayfaya ulaştığınız için, varyantları nasıl seçeceğiniz ve erişilebilirliği kontrol ettiğiniz hemen belli değildi. Sonunda kutucuklara tıklamak zorunda olduğunuzu muhtemelen anlayabilirsiniz, ama gerçekten hantaldı.

Modlar kafa karıştırıcıydı

İlk tasarımlarda, yalnızca palet görünümünden çiftler ekleyebilir ve yalnızca varyantlar görünümünden varyantları ekleyebilir / kaldırabilirsiniz. Her şey ekranlar arasında çok fazla geçiş yapmayı gerektiriyordu ve uygulamanın bana ne kadar iş yaptırdığına dair kendimi hayal kırıklığına uğrattığını fark ettim. Bu beni bir sonraki noktama götürüyor.

Çok fazla tıklama gerekliydi

Bir varyant eklemek için tıklamalısınız. Ardından palet görünümüne geçmek için tıklamanız gerekir. Ardından bir çift oluşturmak için birden çok kez tıklamanız gerekir. Daha sonra eklediğiniz çifti görmek için biraz daha tıklamanız gerekir. Yukarıda bahsettiğim gibi, her şey oldukça hantaldı ve bu muhtemelen prototipin en kötü kısmıydı ve değiştirmem gerektiğini bildiğim bir şeydi.

Ekranda aynı anda yeterli bilgi görünmüyordu

Onu kullandıkça, yarattığım “modlar” kavramından daha çok hoşlanmaya başladım. Uygulamaya ilham veren orijinal süreçten etkilendiğimi düşünüyorum ve ekranları birleşik bir deneyim tasarlamaktan ziyade silolar halinde tasarladım. Prototipi kullandıktan sonra, "modlar" konseptinden ideal olarak tek bir sayfada yapılabilecek bir şeye geçmem gerektiğine karar verdim.

İkinci bir deneme

Prototipten öğrendiğim dersleri aldım ve uygulamanın daha iyi bir sürümünü oluşturmaya başladım.

Siparişe olarak etkileşimlerinin sayısını azaltmaya , gerekli etkileşimlerde belirsizliği azaltmak , ve kullanılan bilgi miktarını artırmak seferde kullanıcıya, bir sürükle geçmek ve kullanıcı sürükle mümkün olacaktır dayalı UI düşmeye karar paletlerine eklemek veya erişilebilirlik kontrolleri oluşturmak için etrafındaki karolar

Sürükleme hedefi her zaman görüntülenir ve bu, ekranlar arasında geçiş yapma ihtiyacını ortadan kaldırır.

Geldiğim şeye bir bakalım.

Uygulamanın güncel sürümüne buradan erişebilirsiniz.

Sonraki adımlar

Uygulama henüz emekleme aşamasında ve ikinci versiyon aklımdaki fikre çok daha yakın olsa da yapılabilecek iyileştirmeler var.

Koddan içe aktar

Paleti dışa aktarmanın yanı sıra, değişkenler içeren koddan ilk temel renkleri okuma özelliğini eklemeyi planlıyorum (SASS ve başlangıç ​​için CSS değişkenleri)

Daha fazla formata aktarın

Şu anda yalnızca SASS dışa aktarabilirsiniz. Gelecekte CSS Değişkenleri ve diğer formatlar için destek eklemeyi planlıyorum.

Tasarım araçlarıyla entegre edin

Koda dışa aktarmak harika, ancak paleti dışa aktarabilir ve ardından Figma veya Sketch gibi bir tasarım aracında bir katman veya paylaşılan stil olarak içe aktarabilirsem daha da iyi olurdu.

Kullanıcı arayüzünü iyileştirin

Kabul edelim , dünyadaki en iyi görünen uygulama değil . Uygulamayı görsel olarak iyileştirmek için UI bileşenlerini değiştirmeyi planlıyorum.

Geri bildirim ve hata raporlama

Bu kendisi için konuşur. Uygulamayı yalnızca onu kullananların katkılarıyla iyileştirebilirim. Bunu yapmak için ileride bir geri bildirim formu eklemeyi planlıyorum.

geri bildirim

Geri bildirimden bahsetmişken… Bu makaleyi iki nedenle yazdım. İlk olarak, ondan bir şeyler öğrenebileceğiniz umuduyla mevcut tasarıma ulaşmak için geçtiğim süreçte size rehberlik edecek.

İkinci neden, birçok insan için faydalı olabileceğine inandığım için aracı geliştirme ve tasarım topluluğuna sergilemek ve mevcut durumunda geri bildirim almak istememdi.

Dolayısıyla, tasarım, işlevsellik, aracı oluşturmak için geçtiğim süreç veya başka herhangi bir şey hakkında herhangi bir fikriniz varsa, onu duymak isterim!

Bağlantılar

Prototip

Şimdiki versiyonu

Bileşen kitaplığı