Stil Kılavuzu mu Tasarım Sistemi mi? Kurallar Belgesinden Yaşayan Sisteme

İki kavram neyi kapsar?

Stil kılavuzu (style guide), bir markanın ya da ürünün nasıl görüneceğini ve nasıl konuşacağını tanımlayan kurallar bütünüdür. Görsel tarafta renk paleti, tipografi, logo kullanımı, ikon ve görsel üslubu; içerik tarafında yazım kuralları, ses ve ton, terim tercihleri, büyük harf ve noktalama kararlarını kapsar. Çıktısı genellikle bir belge ya da web sayfasıdır ve insanlar tarafından okunup uygulanır.

Tasarım sistemi (design system) ise ürün arayüzlerini tutarlı biçimde üretmek için ortak kullanılan, yeniden kullanılabilir parçalar ve bunları yöneten kurallar ile süreçlerden oluşan bir bütündür: tasarım token'ları, bileşen kütüphanesi (hem tasarım aracında hem kodda), kullanım desenleri, erişilebilirlik ilkeleri, dokümantasyon ve katkı ile sürüm yönetimi. Bir stil kılavuzu çoğu zaman tasarım sisteminin içinde bir katman olarak yer alır; tasarım sistemi bu kuralları hazır parçalara dönüştürüp kullanımını ölçeklenebilir hale getirir.

Temel farklar ölçüt ölçüt

• Ölçüt: Soru. Stil kılavuzu: "Nasıl görünmeli ve nasıl yazılmalı?" / Tasarım sistemi: "Bunu hazır, test edilmiş parçalarla nasıl üretiriz?"
• Ölçüt: Biçim. Stil kılavuzu: kurallar ve örneklerden oluşan belge. / Tasarım sistemi: belge, tasarım kütüphanesi, kod paketi ve bunları yöneten süreç.
• Ölçüt: Uygulama. Stil kılavuzu: kişi okur, yorumlar ve elle uygular; tutarlılık uygulayanın dikkatine bağlıdır. / Tasarım sistemi: kural parçanın içine gömülüdür; birincil buton bileşenini kullanan, rengi ve köşe yarıçapını ayrıca hatırlamak zorunda kalmaz.
• Ölçüt: Kapsam. Stil kılavuzu: marka iletişiminin tamamı; basılı materyal, sosyal medya, sunum, web. / Tasarım sistemi: çoğunlukla dijital ürün arayüzleri.
• Ölçüt: Sahip. Stil kılavuzu: marka, kurumsal iletişim ya da içerik ekibi. / Tasarım sistemi: tasarım ve ön yüz geliştirme ekiplerinin ortak sorumluluğunda, çoğu zaman ayrılmış bir sistem ekibi.
• Ölçüt: Bakım. Stil kılavuzu: marka ya da dil kararları değiştiğinde güncellenir. / Tasarım sistemi: sürümlenir, değişiklik notları yayımlanır, kullanan ürünler yeni sürüme geçirilir.
• Ölçüt: Kurulum maliyeti. Stil kılavuzu: görece düşük; birkaç uzmanın üzerinde uzlaştığı bir belge ile başlar. / Tasarım sistemi: yüksek; envanter, bileşen tasarımı, kod geliştirme, dokümantasyon ve yönetişim gerektirir.

Somut örnek: aynı kurum, iki ayrı kaynak

Birleşik Krallık hükümetinin dijital hizmetleri bu ayrımı açıkça gösterir. Government Digital Service tarafından yayımlanan GOV.UK style guide, içerik yazarları için yazım ve üslup kurallarını alfabetik bir başvuru listesi olarak sunar. GOV.UK Design System ise kamu hizmetlerini tutarlı kılmak için stiller, bileşenler ve desenler (patterns) sunar; tasarım sisteminin kendi içeriği de bu stil kılavuzuna uyar.

Bu örnekte stil kılavuzu "tarihleri nasıl yazarız, hangi kelimeyi kullanırız" sorusunu yanıtlar; tasarım sistemi ise "bir tarih giriş alanı nasıl görünür, nasıl davranır, hata mesajı nereye çıkar ve hangi kodla üretilir" sorusunu. İkisi birbirinin yerine geçmez, birbirine dayanır.

Stil kılavuzu ne zaman yeterli?

Her kurumun bir tasarım sistemine ihtiyacı yoktur. Şu durumlarda iyi hazırlanmış bir stil kılavuzu yeterli ve doğru başlangıçtır: • Dijital ürün tek ya da küçük; arayüzü az sayıda tasarımcı ve geliştirici üretiyor. • İhtiyaç daha çok marka iletişiminde tutarlılık: kampanya görselleri, sunumlar, sosyal medya, web sitesi içerikleri. • İçerik birçok yazar tarafından üretiliyor ve asıl sorun terim, ton ve yazım tutarsızlığı. • Ürün henüz şekillenmiyor; bileşenleri dondurmak için erken.

İyi bir stil kılavuzu kuralı örnekle birlikte verir: "Doğru" ve "yanlış" kullanımı yan yana gösterir, gerekçesini kısaca açıklar ve sık sorulan durumlar için karar verir. Yalnızca renk kodları ve yazı tipi adlarından oluşan bir belge, uygulayanı yorum yapmaya zorlar.

Tasarım sistemine ne zaman geçilmeli?

Stil kılavuzunun yetmediği noktayı gösteren işaretler şunlardır: • Aynı buton, form alanı ya da modal pencere farklı ekiplerde farklı biçimlerde yeniden tasarlanıp yeniden kodlanıyor. • Stil kılavuzunda doğru tanımlanmış renkler kodda birbirine yakın ama farklı değerlerle yaşıyor. • Birden fazla ürün, platform ya da marka aynı temeli paylaşmak zorunda. • Erişilebilirlik hataları her ekranda ayrı ayrı düzeltiliyor. • Tasarımdan koda devir sırasında aynı ölçü ve davranış soruları tekrar tekrar soruluyor.

Bu durumda stil kılavuzunu çöpe atmak gerekmez. Mevcut kurallar tasarım token'larına çevrilir (renk, tipografi, boşluk, köşe, gölge), sık kullanılan arayüz parçaları envanterden çıkarılıp bileşen haline getirilir, ses ve ton kuralları da bileşen dokümantasyonuna içerik yönergesi olarak eklenir.

Geçişte sık yapılan hatalar

Tasarım sistemi kurarken en sık hata, onu daha kalın bir stil kılavuzu olarak düşünmektir: güzel bir dokümantasyon sitesi yayımlanır ama kodda karşılığı olan bileşen yoktur; ekipler yine kendi kopyalarını üretir. Tasarım sistemi, kullanılan bileşenler kodda ve tasarım aracında aynı adla ve aynı davranışla var olduğunda işe yarar.

Diğer yaygın hatalar şunlardır: • Envanter çıkarmadan bileşen tasarlamak; mevcut ürünlerdeki gerçek kullanım görülmeden kurulan bileşenler benimsenmez. • Sahiplik ve katkı kuralı tanımlamamak; kimin değişiklik önerebileceği, kimin onaylayacağı belirsiz kalır. • İçerik kurallarını sistemin dışında bırakmak; hata mesajları, boş durum metinleri ve buton etiketleri tutarsız kalır. • Mevcut ürünlerin yeni sisteme nasıl taşınacağını planlamamak; eski ve yeni bileşenler uzun süre yan yana yaşar.

Mindset programlarında iki tarafı nerede çalışırsınız?

İçerik Kalite Standartları ve Stil Kılavuzu Yönetimi, stil kılavuzunun işlevi, yazım ve dil kuralları, terimce ve benimsetme ile denetim modülleriyle içerik, kurumsal iletişim ve dokümantasyon ekiplerine yöneliktir. Kılavuzun yazılmasından çok uygulanmasını ve güncel tutulmasını sorun olarak yaşayan ekipler için uygundur.

Tasarım sistemi tarafında Figma ile Tasarım Sistemi, bileşen kütüphanesi, design token ve stil yönetimi üzerinden ürün tasarımcılarına hitap eder; Tasarım Sistemi Mimarisi: Design Token ve Bileşen Kütüphanesi ise token katmanları ile tasarım ve kod eşleşmesini ele alır. Var olan bir ürünü sisteme geçirmek isteyen ekipler için Mevcut Ürünü Tasarım Sistemine Taşıma (Migration) Yönetimi, envanter, önceliklendirme ve birlikte yaşama dönemini işler.