Tasarım sistemi, bir web sitesi ya da ürünün renk, yazı tipi, boşluk, buton, form ve kart gibi tüm tekrar eden öğelerini kurallarıyla birlikte tanımlayan ve hem tasarımda hem kodda tek kaynaktan yönetilen bileşen kütüphanesidir.
Tasarım sistemi, sitenin yapı taşlarının sözlüğüdür. İki katmandan oluşur: tasarım belirteçleri denen temel değerler (marka yeşili şu koddur, başlık yazısı şu boyuttadır, kutular arası boşluk şu ölçüdedir) ve bu değerlerle kurulan bileşenler (birincil buton, uyarı kutusu, hizmet kartı, form alanı). Her bileşenin ne zaman kullanılacağı ve hangi durumlarda nasıl görüneceği yazılıdır. Kod tarafında bu bileşenler bir kez yazılır ve her sayfada aynı parça tekrar kullanılır; tasarım aracında da aynı bileşenler kütüphane olarak durur.
İşletme sahibi için neden önemli
Tutarlılık güven yaratır ve bakım maliyetini düşürür. Sistem yoksa her yeni sayfa biraz farklı görünür, bir yıl sonra sitede beş çeşit buton olur. Sistem varsa yeni bir sayfa mevcut parçalarla hızlıca kurulur, marka rengi değişecekse tek yerden değiştirilir. Ekip değişse bile site aynı dilde büyümeye devam eder. Küçük sitelerde bu sistem birkaç sayfalık bir stil rehberi olabilir; büyük kurumsal sitelerde ayrı bir dokümantasyona dönüşür.
Örnek
Bir holding, alt şirketleri için ayrı ayrı yaptırdığı sitelerin birbirine benzemediğini fark etti. Ortak bir tasarım sistemi hazırlandı: aynı yazı tipi ailesi, aynı boşluk ölçeği, her şirket için yalnızca vurgu rengi değişen aynı bileşenler. Sonraki siteler bu sistemle kuruldu; her biri farklı ama aynı aileden görünüyor.
Sık yapılan hata
Sistemi yalnızca tasarım dosyasında bırakıp kodda karşılığını kurmamaktır; bu durumda geliştirici her seferinde yeniden yorumlar. İkinci hata, küçük bir proje için aşırı kapsamlı bir sistem kurup zaman kaybetmek. Üçüncüsü, sistemi teslimden sonra güncellememek: yeni bileşenler sistem dışında yazılınca bir süre sonra iki farklı site dili oluşur.
Teklif alırken sorulacak soru
Renk, yazı ve bileşen kuralları yazılı olarak teslim edilecek mi ve kodda tek kaynaktan mı yönetilecek? İleride yeni sayfa eklendiğinde bu sistem üzerinden mi kurulacak?
Sık sorulanlar
Tasarım sistemi ile stil rehberi aynı şey mi?
Stil rehberi genellikle renk ve yazı gibi görsel kuralları belgeler; tasarım sistemi buna kodda çalışan bileşenleri ve kullanım kurallarını ekler.
Beş sayfalık bir site için tasarım sistemi gerekli mi?
Kapsamlı bir sistem gerekmez; ancak buton, başlık ve boşluk kurallarını tek yerde tanımlayan küçük bir temel her ölçekte tutarlılık sağlar.
