Bu bölümde renk sistemi ve tipografiye dair soru ve cevapları bulabileceksiniz.

1️⃣ Bölüm 1 — Design System Nedir? Nasıl Oluşturulur?
3️⃣ Bölüm 3 — Design System Elementleri (Buton, İkon, Grid ve Spacing) ve Nasıl Maintain Edilir?

Renk

Design systemi oluşturan çok fazla component olsa bile aralarından bir tanesi var ki o da kendi içerisinde çok geniş bir yelpazeye sahip olan renk sistemidir. Renk sistemi geniş bir yelpazeye sahip olabilir fakat bunun önüne erkenden geçilmezse ortaya çıkan ürünün farklı dillerden konuşması kaçınılmazdır. (Farklı dil derken, eğer renk sistemini henüz kurmadıysanız, yazılım ekibinden farklı dillerde yeni kelimeler duymanız muhtemeldir. 😥) Bu yüzdendir ki renk sistemi, design systemin iskelet yapısını oluşturur.

Renklerle İlgili Problemimiz Neydi?

Tasarımın bazı kısımları bitmişti ve bizim elimizde çok geniş bir renk kütüphanesi vardı, renklerin bu kadar çok olması tasarımda bütünlüğü bozuyordu. Bunun için tüm tasarımcıların ve yazılımcıların erişebilecekleri net ve kullanılabilir bir renk kütüphanesine ihtiyaç vardı.

Kaos gökkuşağında yaşıyoruz.
-Paul Cézanne

Neler yaptık?

Tasarımda kullanılan bütün renkleri toplamakla işe başladık. Topladığımız renkler içerisinde ihtiyaç fazlası renkler olduğunu fark ettik. Aynı rengin birbirine yakın çok fazla tonunun kütüphanemizde olması tasarım yaparken ve sonrası için tasarım çizgisini ve bütünlüğünü bozacaktı. Yazılım açısından da renk kütüphanesinin yoğun ve karmaşık olmasına yol açacaktı. Tüm bu sebeplerden ötürü renk sayısını azaltma sürecine girdik.

Renkleri; Ana Renkler, İkincil Renkler, Semantic Renkler, Nötr Renkler ve Supportive Renkler olarak 5 ana gruba ayırdık. Daha sonra bu kategoriler için hangi renkleri belirleyeceğimize karar verdik. Peki bu kategorileri oluştururken hangi kriterleri baz aldık?

1. Birincil Renkler

Arayüzde en sık kullandığımız renklerdir. Aynı zamanda bu renkler markanın kimliğini belirleyen renklerdir.

2. İkincil Renkler

Ana rengi destekleyici renklerdir. Tasarımda hiyerarşiyi korumak ve dengeyi sağlamak için bu renkleri kullandık.

3. Semantic Renkler

Spesifik noktalarda içeriğe göre kullandığımız renklerdir. Kendi içinde Caution, Danger, Success ve Info olarak dörde ayrılır.

4. Nötr Renkler

Metinlerde ve arkaplanlarda kullandığımız, doygunluğu olmayan tasarımda dengeyi sağlayan renklerdir.

5. Supportive Colors

Ana renklerin açık tonlarını kullanarak elde ettiğimiz bu renkleri, semantic renklerle birlikte desteklemek istediğimiz alanları ön plana çıkartmak için kullandık.

“Renk körü olmak dünyanın sonu değildir, dünyaya farklı bir pencereden bakmaktır.”

Renklerin Erişilebilirliği

Değişen teknoloji ile birlikte dijital dünyadaki kullanıcı sayısı yukarı doğru hızlı bir ivme kazandı, böylece web siteler ve mobil uygulamalardaki kullanıcı çeşitliliği bir hayli arttı. Bu kullanıcıların hepsine aynı deneyimi yaşatmak için bazı dünya standartlarını korumamız gerekiyordu ve bu standartların başında erişilebilirlik geliyor. Erişilebilirlik, renk sistemi açısından okunabilirliği temsil etmektedir. Tasarım içeriğinin okunabilir olması gerekmektedir, bu yüzden kullandığımız renkler de erişilebilirlik değerleriyle örtüşmelidir.

Ekibimizde de renk körü olan arkadaşlar var ve bu noktada onların erişilebilirlik sıkıntılarını yakından gözlemledik. Bunun önüne geçebilmek için de aksiyon aldık.

Renklerin kontrast değerlerini kontrol ederek erişilebilirliği en üst düzeye çıkarmaya çalıştık. Arka plan ve metin öğeleri arasında yeterli kontrast olup olmadığını WCAG Renk Kontrast yönergelerine göre kontrol ettik. Testi başarıyla geçmeyen renklerin birçoğunu uygun bir şekilde revize ettik.

Renkleri İsimlendirme

Kullandığımız tüm renkleri belirledikten sonra tasarım süreçlerinde ileride kullanabileceğimiz renk tonlarını bulmak adına işe tüm renklerin HSL kodlarını belirlemekle başladık. Daha sonra bu HSL kodlarının lightness değerleri üzerinde belirli bir kural belirleyerek kullandığımız tüm renklerin tonlarını oluşturmuş olduk.

Renk kodunun lightness değerini 10’ar puan eksilterek ana rengimizden daha koyu renkler, aynı şekilde 10’ar puan artırarak daha açık renkler elde ettik. Ayrıca ana renkten en fazla 5 adet ton olacak şekilde kendimizi sınırladık, böylece renk karmaşasının da önüne geçmiş olduk.

Sıra geldi renklerimizi isimlendirmeye.. Renk isimlendirme hem tasarım hem de yazılım ekibi için kritik bir öneme sahipti, isimleri sade ve anlaşılır bir formüle göre ayarlamamız gerekiyordu. Çözüm olarak “primary.blue.00” şeklinde bir yapı elde ettik. Tasarım kütüphanemizde bu renklerden en çok kullandıklarımızın başına “+” ekledik. Bu sayede kütüphaneden kullanacağımız renkleri sınırlandırmış olduk.

Peki bu yaptığımız düzen bize ne gibi farklı avantajlar sağladı? Tasarımlarda çok fazla renk ve renk tonu kullanımının önüne geçildi. Böylece yapılan tasarımlar renk açısından tutarlık gösterdi. Ayrıca hem tasarım ekibinin hem de birlikte çalışılan diğer ekiplerin daha sistematik ve net bir şekilde çalışmalarına olanak sağladı.

Özetle, yaptığımız bu çalışmalar renk kütüphanemizi erişilebilirlik değerlerine uygun hale getirdi, renk paletindeki gereksiz tonlardan bizi kurtardı ve daha sürdürülebilir bir renk kütüphanesi oluşturmamızı sağladı.

Tipografi

Bir web sitesi düşündüğünüzde bunun, %85–90'ını sitedeki yazılar oluşturur. Bu yüzdendir ki tipografi bir web sitesindeki tartışmasız en önemli elementtir ve kullanıcılara bu yolla ne kadar bilgi ileteceğimizi belirlememizi sağlar. Tasarımdaki metinlerin önem sırasını kullandığımız font ailesinin puntoları ve fontun diğer ağırlıkları ile belirleyebiliriz. Bir fontun boyutunu 1pt büyütmenin ya da küçültmenin bile yapacağınız satışlara etkisi gözle görülebilir.

Comic Sans’ın sevgilisi varmış. “Seni karakterin için seviyorum” diyormuş.
Tam Benim Tipim — Simon Garfield

Yalnızca bir font ailesi kullanıyoruz; Nunito Sans. Siteninin genel tasarım diline uygun olduğu, diğer dilleri desteklediği ve birden fazla font ağırlığı olduğu için bu font ailesini tercih ettik. Bu aileden en çok Regular, Semibold ve Bold ağırlık tiplerini kullanıyoruz. Bu sayede tasarımdaki hiyerarşiyi net bir şekilde sağlamış oluyoruz.

Design System maceramızın diğer bölümlerine aşağıdaki linklerden ulaşabilirsiniz. Bölümleri sırasıyla okursanız makalenin büyüsü kaçmaz. 😍👇

1️⃣ Bölüm 1 — Design System Nedir? Nasıl Oluşturulur?
3️⃣ Bölüm 3 — Design System Elementleri (Buton, İkon, Grid ve Spacing) ve Nasıl Maintain Edilir?