İçeriğe atlaDEMOBu site Briefikir tarafından geliştirilmiş bir tanıtım demosudur. Ajansınıza site ve yönetim yazılımı için bize ulaşın →
  1. Ana sayfa
  2. Blog
  3. Tasarım sistemi ne zaman gerekir?

Tasarım · 6 dk okuma

Tasarım sistemi ne zaman gerekir?

Her proje bir tasarım sistemine ihtiyaç duymaz; ama bazı işaretler görüldüğünde ertelemek pahalıya patlar. Ne zaman ve nasıl başlanır?

Derya Akman

Tasarım sistemi ne zaman gerekir?

Tasarım sistemi; renkleri, yazı karakterlerini, boşlukları, bileşenleri ve bunların kullanım kurallarını tek bir yerde toplayan, hem tasarımcıların hem geliştiricilerin ortak kaynağıdır. Büyük şirketlerin tasarım sistemleri yıllar süren projelerdir; ama küçük ekipler için de bir tasarım sistemi gerekli olabilir. Asıl soru “gerekli mi?” değil, “ne zaman ve ne kadar?” sorusudur.

Her proje bir tasarım sistemine ihtiyaç duymaz

Beş sayfalık bir tanıtım sitesi ya da tek seferlik bir kampanya sayfası için kapsamlı bir tasarım sistemi kurmak gereksiz bir yüktür. Bu projelerde tutarlı bir stil rehberi ve iyi adlandırılmış birkaç bileşen yeterlidir.

Tasarım sistemine ihtiyaç duyduğunuzu gösteren işaretler

  • Aynı düğmenin sitenizde beş farklı hâli var.
  • Yeni bir ekran tasarlamak, var olanlardan parça toplayıp yeniden çizmekle başlıyor.
  • Geliştirici her ekranda “bu boşluk 16 mı 20 mi?” diye soruyor.
  • Birden fazla ürününüz (site, uygulama, yönetim paneli) var ve hepsi aynı markaya ait görünmeli.
  • Ekip büyüyor; yeni tasarımcı ve geliştiriciler kuralları birinden duymak yerine bir yerden okumalı.
  • Açık ve koyu tema gibi birden fazla görünüm desteklemeniz gerekiyor.

Bu işaretlerden üç ya da daha fazlası tanıdık geliyorsa tasarım sistemini ertelemek her geçen ay daha pahalı hâle gelir.

Küçük başlayın: belirteçler

Tasarım sisteminin temeli belirteçlerdir (design token): renk, yazı boyutu, boşluk, köşe yarıçapı ve gölge gibi en temel değerlerin adlandırılmış hâli. “#111113” yerine “mürekkep”, “24px” yerine “boşluk-6” demek, değerlerin tek bir yerden değiştirilebilmesini sağlar. Açık ve koyu tema da bu belirteçlerin iki farklı değer setinden ibarettir.

Sonra bileşenler

İkinci katman bileşenlerdir: düğme, form alanı, kart, rozet, tablo, pencere, bildirim. Her bileşen yalnız varsayılan hâliyle değil, bütün durumlarıyla tanımlanır:

  • Varsayılan, üzerine gelindiğinde, odakta, basılı, devre dışı.
  • Yükleniyor, boş, hata ve başarı durumları.
  • Uzun metin, eksik veri ve küçük ekran gibi kenar durumları.

Durumları çizilmemiş bir bileşen, geliştirme sırasında tahminle tamamlanır ve tutarsızlık oradan başlar.

Belgeleme

Bir tasarım sistemi, kullanılmadığı sürece bir dosya klasöründen ibarettir. Her bileşenin ne zaman kullanılacağı, ne zaman kullanılmayacağı ve erişilebilirlik notları kısa ve örnekli biçimde yazılmalıdır. En iyi belgeleme, kodla birlikte yaşayan ve canlı örnek gösteren belgelemedir.

Kim sahiplenecek?

Tasarım sistemi bir proje değil, bir üründür; bir sahibi olmalıdır. Küçük ekiplerde bu genellikle kıdemli bir tasarımcı ile bir ön yüz geliştiricinin ortak sorumluluğudur. Yeni bir bileşen ihtiyacı doğduğunda önce sistemde var olup olmadığına bakılır; yoksa sisteme eklenir, sonra kullanılır.

Ne kadar sürer?

Belirteçler ve temel bileşenlerden oluşan ilk sürüm, çoğu proje için iki ile dört hafta arasında hazırlanabilir. Bu süre, sonraki her ekranın tasarım ve geliştirme süresini kısaltarak kendini hızla geri öder. Uygulama ve panel projelerimizde tasarım sistemini ayrı bir teslimat olarak sunmamızın nedeni budur.

Hazır sistemlerden yararlanmak

Sıfırdan bir sistem kurmak zorunda değilsiniz. Açık kaynaklı bileşen kitaplıkları iyi bir başlangıç noktası olabilir; ama markanıza uyarlanmadan kullanıldıklarında ürününüz başka yüzlerce ürüne benzer. Bizim yaklaşımımız, erişilebilirliği kanıtlanmış hazır davranışları korurken belirteçleri, tipografiyi ve görsel dili markaya göre baştan kurmaktır. Böylece hem hız hem de özgünlük kazanılır.

Tasarım sistemi bir lüks değil, büyüyen bir dijital ürünün ortak dilidir. Doğru zamanda, doğru ölçekte kurulduğunda ekibin hızını artırır ve markanın her ekranda aynı görünmesini sağlar.

Projenizi konuşalım. Brief sihirbazı iki dakikada kapsamı, süreyi ve önerilen ekibi çıkarır.

Brief’i başlat

K/07 — Devamı

Okumaya devam

Tüm yazılar

Tasarım · · 7 dk

Erişilebilir web tasarımı: temel kurallar

Kontrast, klavyeyle gezinme, odak halkası, başlık sırası ve form etiketleri. Her projede uyguladığımız erişilebilirlik kontrol listesi.

Süreç · · 6 dk

Web sitesi brief’i nasıl hazırlanır?

İyi bir brief, teklifi hızlandırır ve projeyi kapsam tartışmasından korur. Hangi soruların yanıtı gerektiğini adım adım anlatıyoruz.

Strateji · · 5 dk

Kurumsal site mi, e-ticaret mi?

Ürün satıyor olmanız e-ticaret sitesine ihtiyacınız olduğu anlamına gelmez. Karar verirken bakmanız gereken beş soru.

WhatsApp