Tasarım sistemi: nedir, neden ve nasıl oluşturulur?

Görünüşe göre tasarım sistemleri konusu her yönüyle ele alınmış: hakkında birçok makale, yazı, rapor ve diğer materyaller bulabilirsiniz. tasarım sistemi oluşturmak. Buna rağmen bu terimle karşılaşan herkesin aklına birçok soru geliyor. Ana olanları ayrıntılı olarak cevaplamaya çalışacağız:

• Tasarım sistemi nedir?
• Bu ne için?

Tasarım sistemi nedir?

Tasarım sistemi, görsel bileşenleri, kod kütüphanesini ve kullanım kılavuzlarını içeren bir yapıdır.

Çoğu zaman, başlangıç ​​seviyesindeki tasarımcılar, bir tasarım sistemini yalnızca bir kullanıcı arayüzü kiti (grafiksel arayüz öğeleri, tipografi ve renkler içeren bir belge) olarak düşünerek konsepti basitleştirme hatasına düşerler.

Tasarım sistemi üç seviyeden oluşur:

A kullanıcı arayüzü kiti kendisi için tasarım sisteminin oluşturulduğu ürünün görsel dilidir. Bunlar renkler, yazı tipleri, simgeler, düğmeler, madde işaretleri, geçiş anahtarları, kaydırıcılar, resimler, animasyondur. Öğeler farklılık gösterir ve dijital ürünün özelliklerine bağlıdır. Hepsi, kullanıcının etkileşime girdiği arayüzün görünür kısmını oluşturmaya yardımcı olur.

Çerçeve, animasyon, etiketler ve gezinme etiketleri için eklentilerin yanı sıra bu öğelerin her biri için yazılmış bir kod kitaplığıdır.

Kuralları iş sürecini düzenleyen öğelerin kullanımına yönelik bir dizi şablon ve kuraldır. Yönergeler sayesinde bir tasarımcı basit görevlere dahil olmaz, ancak bir geliştirici hemen dahil olur.

Örneğin, yönergeler bir web sitesindeki açılır pencerenin parametrelerini belirler: metindeki girintiler, başlık ve gövde metninin konumu ve boyutu, bir düğme için yer ve pencerenin daha az veya daha az görüntü ile nasıl görüneceği. daha fazla metin.

Tasarım sistemi türleri

Tek bir sınıflandırma yoktur, ancak uzmanlar iki tür tasarım sistemini birbirinden ayırır: açık ve kapalı kaynak.

Açık kaynaklı sistemlerde herhangi bir şirket malzemeleri kullanabilir ve bunları projelerine uyarlayabilir; düğme renklerini, yazı tiplerini ve simgeleri değiştirebilir. Örneğin, Ant Design, İnsan Arayüzü Yönergeleri ve Materyal Tasarımı sistemlerinde.

Kapalı kaynaklı tasarım sistemleri genellikle belirli bir şirket veya ürün için oluşturulur. Bunlar ya tamamen kapalı, yalnızca çalışanların erişebildiği materyallerdir ya da kısmen açıktır.

Bir tasarım sistemi nasıl oluşturulur?

Tasarım sistemlerinin geliştirilmesi atomik tasarım ilkelerine dayanmaktadır. Atom tasarımı, beş düzeyde tasarım öğesi içeren bir tekniktir: atomlar, moleküller, organizmalar, desenler ve sayfalar.

Tasarım sistemi yapısı:

• Atomlar en küçük bileşenlerdir: düğmeler, simgeler, giriş alanları ve yazı tipleri.
• Moleküller birkaç basit öğenin birleşimidir: iki düğme, bir başlık ve bir giriş satırı, bir bildirim çubuğu, bir onay kutusu ve metin.
• Organizmalar eksiksiz bileşenlerdir: site başlığı, yetkilendirme formu, ürün kartları ve bildirim başlığı.
• Şablonlar – içeriksiz sayfa düzenleri: menü, site görünümü.
• Sayfalar içerikle dolu sayfalardır.

Genel algoritma şuna benzer:

• Renkleri ve yazı tiplerini seçin, modüler ızgaraları ayarlayın ve animasyonu, görüntüleri ve sesleri seçin.
• Temel arayüz öğeleri oluşturun.
• Tasarım öğesi kombinasyonları ve düzenleri.
• Kurallarla birlikte öğelerin bir listesini oluşturun. Kılavuzda öğenin ne olduğunu, nerede kullanıldığını ve hangi görevleri çözdüğünü belirtin.

Tipik olarak tasarım sistemleri sıfırdan oluşturulmaz, ancak halihazırda geliştirilmiş materyallere (UI kitleri, yönergeler veya marka kitapları) dayalı olarak oluşturulur.

Neden bir tasarım sistemine ihtiyacınız var?

Her bilişim ürününde olduğu gibi “Tasarım sistemi ne işe yarar?” sorusunun yanıtını vermek kritik önem taşıyor. Veya mağazadaki bazı meslektaşların belirttiği gibi "ne olmuş yani"?

Bu sorunun cevabı ürünün değerini anlamanıza yardımcı olacaktır. Bunun bir kısmı yukarıda anlattıklarımızdan zaten görülebilmektedir. Ama gelin bunu parçalara ayıralım ve daha derin bir göz atalım.

Otomasyon

Otomasyon en belirgin faydayı sağlar. Bir tasarım sistemi, diğer görevler için size zaman kazandırarak işlemleri otomatikleştirmenize yardımcı olacaktır.

Tekrarlanabilirlik

Tasarım sistemi öğelerindeki değişiklikleri devralabilmek ve otomatik olarak uygulayabilmek, bir ürün ekibi için değerli bir araçtır. Tek bir yerde hızlı bir şekilde kozmetik ve hatta büyük değişiklikler yapabilirsiniz. Bu şekilde ürünü her zaman geliştirebilirsiniz.

Tutarlılık

Tutarlılık, bir üründe aynı işlevi gören nesne ve varlıkların birlik ve benzerliği hedeflemesi gerektiğini ifade eder.

Bir üründe karşılaştırılabilir özellikler kullandığımızda, bunlar tanıdık ve kullanışlı hale gelir: içgüdüsel olarak düğmenin nasıl çalıştığını ve göründüğünün yanı sıra nereye yerleştirildiğini de anlarız.

Herkesin makaleden değerli bir şeyler öğreneceğini umuyoruz. Ve bir makale üzerinde çalışmanın bilgiyi yapılandırdığına ve ek çalışmayı motive ettiğine bir kez daha ikna olduk.