Bir yazılım mühendisi olmak ve figma alaylarında gezinmek, malzeme tasarımı gibi kelimeleri duymak, bunun ne olduğunu merak etmeme neden oldu?

Basit Googling aşağıdaki tanımı verir

Material, ekiplerin Android, iOS, Flutter ve web için yüksek kaliteli dijital deneyimler oluşturmasına yardımcı olmak için Google tarafından oluşturulan bir tasarım sistemidir .

Evet, bunun google tarafından yaratıldığını biliyorum ve bunun bir tasarım sistemi olduğunu söylüyorsunuz ama her şeyden önce bir tasarım sistemi nedir?

Materyal web sitesinde körü körüne gezinmek başımı döndürdü, bu yüzden bu arayışa bir tasarım sistemini basit terimlerle anlayarak ve basit sorular sorarak başlamayı düşündüm.

Umarız bu küçük okuma, materyallerde veya diğer web sitelerinde yayınlanan jargonları anlamakta zorluk çekmemeniz için tasarım sistemlerinin gizemini çözmenize yardımcı olur.

Tasarım sistemi nedir?

Tasarım sistemi, bir bileşenler koleksiyonu ve bu bileşenlere tutarlı bir ortamda birlikte nasıl çalışacakları konusunda rehberlik eden standartlardır.

Basit bir ifadeyle, ürününüzü tasarlarken nasıl kullanılmaları gerektiğini belirleyen kurallarla birlikte bir UI bileşenleri koleksiyonudur.

Ama neden bir tasarım sistemi kullanalım?

Bir tasarım sistemi kullanmanın aşağıdaki avantajları vardır:

Tutarlılık :
Bir tasarım sistemi kullanmak, aşağıdaki tutarlılıkları elde etmemizi sağlar:

• Görsel tutarlılık: Kullanıcının bir ürünü öğrenme yeteneğini artırır.
• İşlevsel tutarlılık: Kullanıcının bir uygulamayı kullanırken beklenen sonucu almasını sağlar.
• İç tutarlılık: Yeni bileşenlerin eklenmesi mevcut bileşenlerle tutarlıdır.
• Dış tutarlılık: Ürün, birden çok platformda tutarlıdır

Yönergelerle birleştirilen bileşenler, yeniden kullanılabilirliği teşvik eder ve geliştiricilerin bileşenleri sıfırdan oluşturması gerekmediğinden geliştirme süresinden tasarruf sağlar.

Bir tasarım sisteminin yapısı nedir?

Bir tasarım sistemi 2 bileşenden oluşur:

Desen Kitaplığı

1. Tasarım sistemi ortamında kullanılabilen farklı öğeleri barındırır. Örnek: düğmeler, giriş alanları, menüler vb.
2. Her bileşen aşağıdaki alanları içerir:
3. Başlık : Bileşenin adı
4. Tanım : Bileşenin ne yaptığına ilişkin açıklama
5. Kullanım ve İlkeler: Belirli bileşenlerin ne zaman ve nasıl kullanılacağını ve hangi bağlamda kullanılacağını belirleyen kurallar.
6. Varyasyonlar : Bileşenin farklı düzenler, boyutlar vb. açısından varyasyonları
7. Kod : Kod parçacıkları
1. Tasarım sisteminin her bir parçasının kendi başına ve diğer sistem öğelerine göre nasıl davranması gerektiğini yöneten politikalar.
2. Aşağıdakileri içerir:
3. Tasarım ilkeleri
4. Marka yönergeleri
5. Renkler
6. tipografi
7. ikonografi