Bu bölümde bazı Design System Elementlerini ve bu sistemin nasıl maintain edildiğini anlatacağız.

1️⃣ Bölüm 1 — Design System Nedir? Nasıl Oluşturulur?
2️⃣ Bölüm 2 — Design System Elementleri (Renk, Tipografi)

Buton Nedir?

Kullanıcılar tarafından eylemleri gerçekleştirmek için kullanılan en önemli etkileşimli bileşenlerdir. Aynı zamanda kullanılan stile göre tasarıma yön veren design systemin ana componentlerinden biridir.

Buton anatomisi
Butonlar çok katmanlı componentlerdir. İçerisinde birden fazla element bulundururlar. (Renk, ikon, tipografi, padding, vs.) Hadi bunları ayrıntılı bir biçimde inceleyelim. 👇

Butonlarla İlgili Problemimiz Neydi?

Ürün içerisinde gezintiye çıktığımızda birbirinden bağımsız, önem sırası karışmış ve birden fazla stile sahip buton tasarımlarını görmekteydik. Bu problemlerimizden bazıları;

• Aynı dile sahip değildi
• Butonun durumları(state) eksikti
• Farklı boyutlarda buton ihtiyacı vardı
• Birden fazla buton rengi mevcuttu

Nasıl Çözdük?

1. Buton türlerini saptadık
Mevcut buton türlerini saptamakla başladık. Kullanıcının ihtiyaç duyduğu ve onu yönlendirmek istediğimiz durumları belirledik.

Birincil Buton: Tasarımda kullandığımız birincil öneme sahip, en önemli butondur ve diğer butonlardan daha baskındır. Bir ekranda birden fazla birincil buton gösteriminden kaçınmalıyız.

İkincil Buton: Birincil butona göre daha az önemli olan genellikle alternatif veya olumsuz durumlar için kullanılan butondur. İkincil butonlarda birincil gibi baskın renk kullanımından kaçınmalıyız. Böylece kullanıcıya hangi butonun önemli olduğunu göstermiş oluyoruz.

Üçüncül Buton: Daha düşük öneme sahiplerdir, daha az alana sahip olan bölümlerde (listeler, tablolar vs.) kullanılan butondur. Tasarımlarımızda çok kullanmasak da yazılım ve tasarım kütüphanesinde kalması açısından bu stili de oluşturduk.

Ghost Buton: Genellikle birincil buton yanında kullandığımız yani ikili buton kullanımlarında birincil butonun önemini kaybetmemesi gereken durumlarda kullanırız. (örneğin “Evet”, “Hayır” butonlarında ön plana çıkartmak istediğimiz seçeneği “Birincil” , daha geri planda kalmasını istediğimiz butonu ise “Ghost” olarak kullanıyoruz.)

2. Buton boyutlarını oluşturduk

Buton türlerini belirledikten sonra butonların her alana uygun olması için farklı boyutlarını tasarladık.

3. Buton durumlarını oluşturduk

Buton durumları(stateleri) nedir?
Butonlar gerçek hayatta kullanıldığında kullanıcıya belirli geri bildirim vererek alınan aksiyonun durumlarını belirtir. Dijital dünyada da aynı şekilde geri bildirim vermek için bu durumları(stateleri) kullanıyoruz. Bu aynı zamanda ileride ihtiyaca göre oluşacak durumları göstermek için tasarım ihtiyacını azaltacaktır. Butonlar bazen yalnızca text ile yazıldığında anlaşılması güç olabiliyor. Butonlar üzerinde kullandığımız yazılarda endişe duyduğumuzda ikonlarla desteklemek verilecek olan mesajın daha net algılanmasını sağlayacaktır. Bu yüzden ihtiyaca göre butonlara ikon ekleyerek alınacak aksiyonu desteklemiş oluyoruz.
Bazı durumlarda ise butona basıldığında sayfaya yönlendirmiyoruz. Kullanıcının seçim yapması için ona “dropdown arrow” ile seçenekler sunuyoruz, bu seçenekleri göstermek için etkileşim tasarımından faydalanıyoruz.

Grid ve Spacing

Grid sistemleri, tasarımcıların duyarlı tasarımlar oluşturmak, bilgileri düzenlemek ve tutarlı kullanıcı deneyimleri oluşturmak için kullanılan yardımcılardır. Aynı zamanda tasarım-yazılım arasındaki matematiksel oranları net bir şekilde görebilmek ve tasarımları bir orana oturtmak adına bizlerle müthiş kolaylıklar sağlar.

Tasarım dünyasında birçok grid sistemi mevcuttur, bunlardan en çok kullanılan ve duyarlı(responsive) kırılımına en kolay uyarlanan “8px grid” sistemidir. Spacinglerde de(paddingler) aynı sistemi kullandık.

İkonlar

İkonlar design system için büyük öneme sahiptirler. İkonlar evrensel oldukları için farklı dillerde de aynı anlamı çağrıştırır. Hatta bazı durumlarda metinler yerine direkt ikonlar ile iletişimi sağlıyoruz. Biz de bu yüzden uygun ikon kullanımına önem veriyoruz.
8px grid sistemini kurduğumuz için ikonlarda da 8’in katlarından ilerledik. (16, 24, 32…)
Tüm ikonlar farklı geometrik özelliklere sahip oldukları için bu ikonları bir container(kare kutu) içine alarak tutarlı bir tasarım oluşturabiliyoruz.

İkonlarda tutarlılık önemlidir bu yüzden böylesine dinamik ortamda sürekli ikon tasarlamak oldukça vakit kaybına yol açacaktı, bu yüzden yazılım ile aldığımız karar sonucu “fontawesome” kütüphanesini kullanmaya başladık.

Design System Nasıl Maintain Edilir?

Design systemlerin önemli bir parçası da componentlerin güncel olduğundan emin olmaktır. Design systemde ihtiyaçları saptayan ve bu ihtiyaçlara göre gerekli güncellemeleri yapan ekip Product Design ekibidir. Aynı zamanda elde edilen yeni çıktılar paydaşlarla paylaşılıp geri bildirimler doğrultusunda düzenlemelerle birlikte güncelleme yapılmaktadır.

Herhangi bir sistem için en büyük varoluşsal tehdit, ihmaldir.
Alex Schleifer, Airbnb

Figma’nın sağladığı auto-layout ve frame avantajı ile birlikte design systemdeki yapılacak değişiklikler bu kurallara göre uygulanacağından maintain etmek oldukça kolay oluyor.

Tasarımlarda farklı bir case ortaya çıkarsa yazılım ekibi ile bunu görüşüp design systeme bu case’i de ekliyoruz.

Design systemler, yaşayan sistemler olduğu için sektörü sürekli takip ederek ve ürünlerimizin ihtiyaçları doğrultusunda design systemlerimizi güncel tutmaya çalışıyoruz.

Katkıları için; Tayfun Dogan, Mert Güler, Nilay Durukan’a teşekkür ederiz..

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?
2️⃣ Bölüm 2 — Design System Elementleri (Renk, Tipografi)